Trivial-Quiz-app

Trivial Quiz App is a Full Stack application built using Next js, Next js core CSS modules, Firebase and Redux for State management, Chart Js and Framer Motion, it was designed and developed by me.

Demo

https://trivial-quiz-app.netlify.app/

Features

• Random Multiple varied questions grading after you submit.
• A countdown Timer that submits for you if you don't.
• A real-time Chart showing ratio of wins-losses.
• A Leaderboard.
• Cute little messages depending on your score.
• One time user login.
• Light and Darkmode.
• Cool looking animations.

Tech Stack

Client: Next Js, CSS, Firebase, Framer Motion, Redux.

Backend: Firebase

License

MIT

Support

For support, email mayorfalomo@gmail.com or contact me via any platform.

Optimizations

I needed my web application to be fast so i used Next Js which is known for it's speed.

I avoided making too many API Calls and instead used Redux to pass and update my states and avoid re-renders throughout my application.

Login is passwordless and one-time.

i made sure Components were reusable so i didn't have to build too many components from scratch.

All useEffects have a dependency Array, so there's no chance of your browser crashing from too many repeated API calls.

Deployment

To deploy this project run

  npm run dev

🛠 Skills

Javascript, HTML, CSS...

React, Next Js, Typescript, Vue js...

Styled Components, Sass , Tailwind, Redux

Node Js, Express, MongoDb...

Firebase.

Lessons Learned

Previously i built this app using context but i refactored the entire codebase to use redux instead.

Run Locally

Clone the project

  git clone https://link-to-project

Go to the project directory

  cd my-project

Install dependencies

  npm install

Start the server

  npm run dev