You think you are an expert on SpongeBob the Squarepants? Then come take the challenge to rock SpongeBob quiz! 15 selected quizzes to test your knowledge on our beloved episodes.
-
Take the quiz and get immediate feedback for every questions ✅
-
A timer to challenge your speed on answering questions ✅
-
Browsers will remember your highest score records ✅
-
Visualized progress bar ✅
👉 https://vocal-speculoos-c6aed6.netlify.app
- How to use json-server
- How to use useReducer in React
- How to use Netlify serverless functions
In this project, I have tried to use useReducer to centralize state logic instead of scattering states logic throughout different components.
In addition, complex state transitions are mapped to actions, which provides a more declarative way to update states.
Through this project, I realised that useReducer is ideal for multiple related pieces of state.
- Clone the project to your local environment
$ git clone "https://github.com/Xavier-Hsiao/quiz-spongebob.git"- Open the project and install all packages with the command below
$ npm install- Boost the service
$ npm run dev- Open your browser and navigate to the following path:
http://localhost:3000/
- react ^18.2.0
- react-dom ^18.2.0
- sass ^1.69.7
- vite ^5.0.8
- json-server ^1.0.0-alpha.22
- french-verbs-lefff ^3.3.0
