This project is a quiz application built using React, Chakra UI, and Firebase, developed for the Missing Code event at Cryptera 2k24, a technical symposium hosted by CIT. It features Google authentication, a real-time leaderboard, and a cool UI. The application was used by over 100 participants simultaneously during the event, delivering a smooth and responsive experience.

🌟 Features

Google Authentication: Secure login via Google.

Landing Page: Designed with Chakra UI for a modern, responsive interface.

Quiz with Timer: Whole quiz is timed, adding a layer of challenge.

Rulebook: A guide to help users before they start the quiz.

Real-Time Leaderboard: View user rankings in real-time.

Responsive Design: Optimized for both desktop and mobile views.

Page Routing: Seamless and secure navigation with React Router.

Live Demo 👉

🛠 Tech Stack

• Frontend: React, Chakra UI
• Backend: Firebase (Authentication, Firestore)
• Deployment: Firebase Hosting

  📸 Screenshots

  LANDING PAGE

GOOGLE AUTHENTICATION

QUIZ SCREENSHOTS

LEADERBOARD

🚀 Getting Started

To get a local copy of the project up and running, follow these simple steps.

Prerequisites

Node.js: Install Node.js.

Firebase Account: Set up a Firebase project to use authentication and Firestore.

Clone the repository:

git clone https://github.com/yourusername/Miss-C-24.git
cd Miss-C-24

Install dependencies:

npm install

Set up Firebase:

Feel free to connect with me on LinkedIn or drop me an email at ✉️ m.aniruthan@gmail.com if you need help or have any questions about the Firebase setup.

Start the application(locally)

npm start

Open (http://localhost:3000) to view it in your browser. The page will reload when you make changes.

Firebase Setup

After the firebase setup you can either deploy the application or run it locally as usual.

npm run build

Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

npm test

Launches the test runner in the interactive watch mode. See the section about running tests for more information.

[!TIP] For more information on Firebase Deployment and Google Authentication, refer to the following resources:

• Firebase Hosting Quickstart
• Google Sign-In with Firebase Authentication

🔧 Future Improvements

• Add multiple quiz categories

• Enable user-submitted questions

• Add difficulty levels for quizzes

• UI Improvements for native mobile view

🤝 Contributing

Contributions are welcome! Feel free to fork the repository, create a feature branch, and submit a pull request.