Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/abmanaf/frontend-quiz-app
https://github.com/abmanaf/frontend-quiz-app
Last synced: 2 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/abmanaf/frontend-quiz-app
- Owner: abmanaf
- Created: 2024-05-09T08:18:40.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-05-14T16:23:12.000Z (6 months ago)
- Last Synced: 2024-05-15T05:43:37.752Z (6 months ago)
- Language: TypeScript
- Homepage: https://alibaba-frontend-quiz.netlify.app/
- Size: 953 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Amalitech - Amalitech Project (Frontend Quiz App) solution
This is a solution to the Frontend quiz app challenge on Amalitech NSS.
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Run the project](#run)
## Overview
### The challenge
Users should be able to:
- Select a quiz subject
- Select a single answer from each question from a choice of four
- See an error message when trying to submit an answer without making a selection
- See if they have made a correct or incorrect choice when they submit an answer
- Move on to the next question after seeing the question result
- See a completed state with the score after the final question
- Play again to choose another subject
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
- Navigate the entire app only using their keyboard
- Change the app's theme between light and dark
### Screenshots
- Laptop view
- Tablet view
- Mobile view
### Links
- Solution URL: [https://alibaba-frontend-quiz.netlify.app/]
## My process
### Built with
- HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- [React](https://reactjs.org/) - JS library
- TypeScript
- [Styled Components](https://styled-components.com/) - For styles
### What I learned
- Learned more about working with REACT HOOKS.
- My first time working on a project with typescript, in fact i learned a lot about typescript.
## How to Run the Project
FIRST APPROACH
1. clone repository
```
git clone https://github.com/abmanaf/Frontend-Quiz-App.git
```
2. change directory to project root.
```
cd Frontend-Quiz-App
```
3. Install depedencies
```
npm install
```
4. start project
```
npm run dev
```
ALTERNATIVE APPROACH
```
At the repository page in your browser,
```
```
Click the Code button (green button) and select Download ZIP.
```
```
Extract the downloaded ZIP file to your desired location.
```
```
Open the project with your favourite code editor eg(vscode).
```
```
Start the project by typing 'npm run dev' in your terminal
```