Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vimode/quizzical-app
📝 Quizzical App is a solo project, part of the Scrimba React Learning path. This project was built with the OpenTriviaDatabase API using ReactJS and styled with styled-components.
https://github.com/vimode/quizzical-app
react styled-components
Last synced: 22 days ago
JSON representation
📝 Quizzical App is a solo project, part of the Scrimba React Learning path. This project was built with the OpenTriviaDatabase API using ReactJS and styled with styled-components.
- Host: GitHub
- URL: https://github.com/vimode/quizzical-app
- Owner: vimode
- Created: 2022-03-25T08:57:21.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-09-30T13:36:32.000Z (over 2 years ago)
- Last Synced: 2024-05-02T06:11:10.400Z (8 months ago)
- Topics: react, styled-components
- Language: JavaScript
- Homepage: http://scrimba-11-4-quizzical-app.vercel.app/
- Size: 93.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Quizzical App
This is the solo project for Scrimba Module 12.4
## Overview
Build a Trivia App with React using the [OpenTriviaDatabase API](https://opentdb.com/) based on the provided Figma design.
Objectives of the Project
- 2 Screens: Start and Quiz
- Pull 5 questions from OTDB API
- Tally correct answers after 'Check answers' is clicked and display the correct and incorrect answers for each question and a tally at the bottom with an option to play again.
## Experience, Learning and Notes
This was a fun and challenging app to build. At surface, it felt really simple to build. And the structure was very straightforward too. But the app logic was not that simple. It's easy to check user responses as soon as its selected but to delay it to when user submits required a different approach as the user was allowed to change their responses any number of times before submitting.
I relied heavily on JS objects and object methods for most of the app logic.
This was the first time I tried Styled Components for styling instead of regular CSS. And it was really fun using it especially the flexibility it provides with props, nesting and conditionals. The styled component docs were really helpful to start learning and implement everything in the project. The only thing that wasn't very clear about SC in the docs was the way to create and use GlobalStyles for the project.
The fetched data from the API had some HTML entities, so I changed the default encoding to Bas64 and used the `atob()` function from the Web API. It isn't recommended using it in frontend apps and `encoreURIComponent()` is to be used.
It was fun to use `useReducer()` hook, was fun to watch chopping down a lot of states and consolidate a lot of logic it in a single function.
## TODO
### Extra
- [ ] Fix loading icon appearing late
### Repo
- [ ] Add an app diagram
- [ ] Add figma link and/or desktop screenshot
- [ ] Add favicon
## Installation
Clone the repo
```bash
cd quizzical-app
npm install
npm run dev
Open http://localhost:3000 to view it in the browser
```
**Available Scripts**
```bash
# Run the app in development mode
npm run dev
# Build the app for production to the `dist` folder
npm run build
# Preview the production build from the `dist` folder
npm run preview
```
## Resources
OTDB API - https://opentdb.com/api_config.php
Styled-Components docs https://styled-components.com/docs/
useReducer() - https://reactjs.org/docs/hooks-reference.html#usereducer
Base64 - https://developer.mozilla.org/en-US/docs/Glossary/Base64
encoreURIComponent() - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent
SubmitEvent - https://developer.mozilla.org/en-US/docs/Web/API/SubmitEvent/submitter
Nano ID - https://github.com/ai/nanoid
ViteJS - https://vitejs.dev/guide/#scaffolding-your-first-vite-project