Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zakaria9375/quiz-app-angular
Frontend quiz app challenge on Frontend Mentor
https://github.com/zakaria9375/quiz-app-angular
accessibility angular animation electron firebase html5 tailwindcss typescript unit-testing
Last synced: about 1 month ago
JSON representation
Frontend quiz app challenge on Frontend Mentor
- Host: GitHub
- URL: https://github.com/zakaria9375/quiz-app-angular
- Owner: Zakaria9375
- License: mit
- Created: 2024-06-09T13:56:41.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-09-15T20:18:12.000Z (4 months ago)
- Last Synced: 2024-10-16T19:36:09.278Z (3 months ago)
- Topics: accessibility, angular, animation, electron, firebase, html5, tailwindcss, typescript, unit-testing
- Language: TypeScript
- Homepage: https://za-quiz.netlify.app/
- Size: 1.75 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Frontend Mentor - Quiz App - Angular Solution
This is a solution to the [Frontend quiz app challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/frontend-quiz-app-BE7xkzXQnU). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of Contents
- [Overview](#overview)
- [Figma Design](#figma-design)
- [Outcome](#outcome)
- [Technologies](#technologies)
- [Features](#features)
- [Setup](#setup)
- [Links](#links)
- [Testing](#testing)
- [Accessibility](#accessibility)
- [Unit Testing](#unit-testing)
- [Screenshots](#screenshots)
- [Retrospectives](#retrospectives)
- [About The Author](#about-the-author)
- [Contributing](#contributing)
- [License](#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:
```shell
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](https://www.frontendmentor.io/challenges/frontend-quiz-app-BE7xkzXQnU)
* [Live Demo](https://za-quiz.netlify.app/)
* [React Solution for this challenge](https://github.com/Zakaria9375/quiz-app-react)
## 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:
```shell
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](https://zaportfolio.netlify.app/)
* Frontend Mentor Profile - [@Zakaria9375](https://www.frontendmentor.io/profile/Zakaria9375)
* Project by - [Frontend Mentor team](https://www.frontendmentor.io/)
## 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