peterhanania / quiz-app-frontend

The frontend for a quiz application I built using Next.js and React with TailwindCSS

Quiz App

This is a Next.js project made with React and tailwindcss.

Getting Started

Before you get started, you will need to setup the backend server at github.com/peterhanania/quiz-app-backend. Once you set everything up and you run your project locally, get your API URL (Ex. http://localhost:3001) and set it in:

• .env.local NEXT_PUBLIC_API_URL=YOUR API URL (Ex. http://localhost:3001)

Then, you can get started by installing the dependencies and running the following command:

npm install
# or
yarn install

then

npm run dev
# or
yarn dev

Project Features

• You can play as a Guest or as a User.

  • If you are playing as quest your scores won't be saved, and you might see the same questions multiple times.
  • If you are playing as user your scores will be saved and you won't see the same questions multiple times as you see each question once.

• You can toggle light mode or dark mode.
• You can signup or login.
• You can paginate through your previous scores.
• Skeleton loading, and great animations with a great U.I.
• View a small box displaying your score and the actual correct answer once you get something wrong.

Project Showcase

Credits

Logo done by Mezo