Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/adrianoescarabote/frontend-quiz-app
This project entailed the development of a frontend quiz. I utilized Figma files for styling the project.
https://github.com/adrianoescarabote/frontend-quiz-app
figma git gitflow jest next redux-toolkit storybook tailwind testing-library typescript
Last synced: about 2 months ago
JSON representation
This project entailed the development of a frontend quiz. I utilized Figma files for styling the project.
- Host: GitHub
- URL: https://github.com/adrianoescarabote/frontend-quiz-app
- Owner: AdrianoEscarabote
- License: mit
- Created: 2023-11-09T15:19:29.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-02-21T20:33:41.000Z (11 months ago)
- Last Synced: 2024-02-21T21:43:26.319Z (11 months ago)
- Topics: figma, git, gitflow, jest, next, redux-toolkit, storybook, tailwind, testing-library, typescript
- Language: TypeScript
- Homepage: https://frontend-quiz-app-eight.vercel.app
- Size: 220 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
- Deploy [click here](https://frontend-quiz-app-adrianoescarabote.vercel.app/)
# Frontend quiz app 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.
## Contents
- [The challenge](#the-challenge)
- [Continued development](#continued-development)
- [Setup](#setup)
- [Technologies Used](#technologies-used)
- [Author](#author)
- [License](#📝-license)
### The challenge
My app allows users to:
- Select a quiz subject
- Select a single answer from each question from a choice of four
- 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
### Continued development
I greatly enjoyed working on this project, and it was my first time using gitflow. I found the organizational structure it provides quite appealing; I felt more confident developing my branches with specific goals. It's definitely an approach I want to invest more time in to enhance my skills and gain a deeper understanding of using gitflow correctly.
Regarding the project itself, I am pleased with the outcome. Although not an overly complex app, the experience was incredibly rewarding and beneficial. It provided me with the opportunity to revisit Next.js concepts I hadn't practiced in a while, contributing significantly to my professional growth.
## Setup
Follow these steps to set up the project:
Clone the project repository using the following command:
```sh
git clone https://github.com/AdrianoEscarabote/frontend-quiz-app
```
Install project dependencies by running:
```sh
npm install
```
### Development
To start the development server and preview your application, use the following command:
```sh
npm run dev
```
### Testing
Run tests by executing the following command:
```sh
npm run test
```
### Storybook
Explore and visualize components using Storybook with this command:
```sh
npm run storybook
```
## Technologies Used
**Operational System**
**Front-end**
**Tools**
## Author
👤 **AdrianoEscarabote**
- Github: [@AdrianoEscarabote](https://github.com/AdrianoEscarabote)
- Linkedin: [@AdrianoEscarabote](https://www.linkedin.com/in/AdrianoEscarabote/)
- Frontend Mentor: [@AdrianoEscarabote](https://www.frontendmentor.io/profile/AdrianoEscarabote)
- Twitter: [@drianEscarabote](https://twitter.com/drianEscarabote)
## 📝 License
Copyright © 2023 [AdrianoEscarabote](https://github.com/AdrianoEscarabote).
This project is [MIT](https://github.com/AdrianoEscarabote/frontend-quiz-app/blob/main/LICENSE) licensed.
---
## Show your support
Give a ⭐️ if this project helped you!