Frontend Mentor - Quiz App - Angular Solution

This is a solution to the Frontend quiz app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of Contents

• Overview
  • Figma Design
  • Outcome
• Technologies
• Features
• Setup
• Links
• Testing
  • Accessibility
  • Unit Testing
• Screenshots
• Retrospectives
• About The Author
• Contributing
• License

Overview

Figma Design

Outcome

Technologies

The technologies used in this project are:

• HTML & Tailwind & TypeScript
• Angular (core, animation, angular-fire)
• Unit testing (Jasmine)
• Firebase

Features

• Responsive Design: Ensures the App looks great on all devices.
• Accessibility: Built with accessibility in mind.
• Animations: Smooth animations for all app interactions.
• Unit testing: Comprehensive unit tests to ensure code reliability.
• Pixel Perfect: Almost identical to figma design.
• Innovative Solution: Created innovative solution to complex challenge, demonstrating creativity and problem-solving skills.

Setup

To run this app in development mode open the terminal and write the following:

git clone https://github.com/Zakaria9375/fm-quiz-app.git 
cd fm-quiz-app  
npm install 
 
# you need to install angular cli to run this app in development mode
npm install -g @angular/cli

ng serve

Links

• Challenge Page
• Live Demo
• React Solution for this challenge

Testing

Accessibility

This app has been crafted with a focus on accessibility, utilizing the Accessibility Linter, IBM Equal Access Accessibility Checker extension, and WCAG extension to adhere to accessibility best practices. Key features include: Zooming, Keyboard-only navigation, Static code analysis, Aria rules compliance, and Semantic HTML.

Unit Testing

To run and execute all the unit tests defined in the project after setting the app in development mode, open a new terminal and write the following:

ng test

Screenshots

Some of Accessibility Tests Screenshots

Lighthouse Report

Unit Tests Screenshots

Firebase

Retrospectives

What went well ?

I am proud of accessibility, styling, clean markup, innovative problem-solving, great ux, animation and attention to every detail.

What has been failed ?

Firebase Unit testing

What could be improved ?

Your feedback maybe useful at this section.

About the Author

In every project I develop, I focus on improving code quality and incorporating new techniques into my development process. I strive to learn from my mistakes by addressing them directly and applying those lessons to future projects. My goal is to continuously refine and enhance my standard approach to project development.

• Portfolio - Zakaria Ali
• Frontend Mentor Profile - @Zakaria9375
• Project by - Frontend Mentor team

Contributing

Want to contribute? Great! Here’s how you can help:

1. Fork the repo and create your branch from main.
2. Make your changes and test.
3. Issue that "pull" request!

License

MIT License
Copyright (c) 2024-present, Zakaria Ali