https://pensive-leakey-710d7b.netlify.com/
@bantek89 @Baalwaan
- As a user, I would want to see a simple landing page
- as a user, I want to click on any button to answer question
- As a user, I would like to know if answer is correct/incorrect
- as a user, I would like to see my score at the end
- as user, I would like to restart the game at the end
This project was bootstrapped with Create React App.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
- File structure planning (modularise as much as possible)
- Choose a simple API (free quiz planning)
- Planning layout of page
Challenges
- Making fetched data from QuestionContainer component accessible to other components
- Modularising components and calling them from elsewhere
- When to use default export and export
- Getting answers to show up on each button
- Display answers in random order
- Countdown timer for each question
- Apply some styling
Challenges
- Sorting answers form api to shuffle answers
- Things being Rerendered unexpectedly
- Timer rerendering entire page and displaying new set of answers each second
Things learnt
- Questions and answers from api come encoded
- A better understanding of how props are accessed
- A styled div displaying Correct and incorrect Answers when buttons are clicked