Quiztical

Welcome to Quiztical—your ultimate destination for creating, hosting, and participating in exciting and competitive quizzes! Built with cutting-edge web technologies, Quiztical transforms the traditional quiz experience into an interactive and thrilling adventure.

quiztical.pages.dev

Click to watch Video

Table of Contents

• Features
• Tech Stack
• Installation
• Usage
• Contributing
• License
• Contact

Features

🎯 Seamless User Authentication:

• Google Login: Experience swift and secure access with Google.
• Email Authentication: Register and log in effortlessly with email and password.

🏠 Intuitive Dashboard:

• Home Page: Get a quick overview of your activities and easily navigate through the platform.
• Create New Quiz: Craft customized quizzes with unlimited multiple-choice questions (MCQs) and set unique durations for each option.

🛠️ Robust Quiz Management:

• Created Quizzes: View and manage all your quizzes. Host them live and share invitation codes with ease.
• Real-Time Hosting: Invite participants in real-time with a unique code, start the quiz, and manage participants dynamically.

🚀 Engaging Quiz Participation:

• Live Quizzes: Join live quizzes instantly using an invitation code. Answer questions quickly to score higher points.
• Leaderboards: Keep the competition fierce with real-time leaderboards after each question.
• Final Board and Summary: At the end of the quiz, enjoy a detailed score breakdown and summary. Hosts can view comprehensive summaries for all participants.

📊 Post-Quiz Excellence:

• Completed Quizzes: Access and review your past quizzes anytime, complete with detailed summaries.
• Performance Analytics: Gain insights into your quiz performance to improve and excel.

ℹ️ About Us Page: Learn more about the vision and team behind Quiztical.

Tech Stack

• Frontend: React, Material-UI (MUI)
• State Management: Recoil
• Backend and Authentication: Firebase
• Deployment: Cloudflare, quiztical.pages.dev
• Language: TypeScript

Installation

To get a local copy up and running follow these simple steps:

1. Clone the repository:

   git clone https://github.com/Kishan-Vyas/Quiztical
   

2. Install NPM packages:

   cd quiztical
   npm install

3. Create a .env file in the root directory and add your Firebase configuration:

   REACT_APP_FIREBASE_API_KEY=your_api_key
   REACT_APP_FIREBASE_AUTH_DOMAIN=your_auth_domain
   REACT_APP_FIREBASE_PROJECT_ID=your_project_id
   REACT_APP_FIREBASE_STORAGE_BUCKET=your_storage_bucket
   REACT_APP_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
   REACT_APP_FIREBASE_APP_ID=your_app_id

4. Start the development server:

npm start

Usage

1. Create an Account: Sign up using your Google account or email and password.
2. Create a Quiz: Navigate to the "Create New Quiz" page and start crafting your quiz.
3. Host a Quiz: Share the invitation code with participants and start the quiz in real-time.
4. Participate in a Quiz: Join live quizzes using the invitation code and compete for the top spot on the leaderboard.
5. View Results: Check your performance and review quiz summaries anytime.

Contributing

Contributions are what make the open-source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Kishan Vyas - kishanvyas308@gmail.com