Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/shwetaank/-quizz-app

A dynamic and responsive quiz platform đŸŽ¯ tailored for AlmaBetter Capstone Project, offering secure user authentication 🔒, customizable quiz creation 📝, and real-time interactive gameplay 🎮.
https://github.com/shwetaank/-quizz-app

axios-react clerk-auth flowbite-react framer-motion react-router-dom react-vite redux-toolkit tailwindcss

Last synced: 29 days ago
JSON representation

A dynamic and responsive quiz platform đŸŽ¯ tailored for AlmaBetter Capstone Project, offering secure user authentication 🔒, customizable quiz creation 📝, and real-time interactive gameplay 🎮.

Awesome Lists containing this project

README 

        
# AlmaBetter Quiz App 🧠



![React](https://img.shields.io/badge/-React-blue)

![Redux Toolkit](https://img.shields.io/badge/-Redux%20Toolkit-purple)

![Clerk](https://img.shields.io/badge/-Clerk-red)

![TailwindCSS](https://img.shields.io/badge/-TailwindCSS-teal)

![Flowbite React](https://img.shields.io/badge/-Flowbite%20React-yellowgreen)

![Axios](https://img.shields.io/badge/-Axios-blueviolet)

![Framer Motion](https://img.shields.io/badge/-Framer%20Motion-orange)

![React Router](https://img.shields.io/badge/-React%20Router-red)



A dynamic and responsive quiz platform đŸŽ¯ tailored for AlmaBetter Capstone Project, offering secure user authentication 🔒, customizable quiz creation 📝, and real-time interactive gameplay 🎮.



## Table of Contents 📚



- [Overview](#overview-ℹī¸)

- [Features](#features-✨)

- [Screenshots](#screenshots-đŸ–ŧī¸)

- [Demo](#demo-đŸŽĨ)

- [Installation](#installation-⚙ī¸)

- [Usage](#usage-🚀)

- [Technologies Used](#technologies-used-đŸ’ģ)

- [Contributing](#contributing-🤝)

- [Problem Statement](#problem-statement-📋)

- [Future Scope](#future-scope-🚀)

- [License](#license-📜)

- [Credits](#credits-🙌)

- [Contact](#contact-📞)



## Overview ℹī¸



The AlmaBetter Quiz App provides an engaging platform for users to create 📝, play 🎮, and manage quizzes 📊. Built with React, it features secure user authentication 🔒 via Clerk and is styled with Tailwind CSS for a sleek, responsive experience 🌟. Designed to work seamlessly across all devices, the app aims to be both educational and entertaining, helping students test their knowledge and track their progress 📚.



## Features ✨



- **User Authentication**: Secure login and registration with Clerk 🔒.

- **Quiz Creation**: Craft personalized quizzes with custom questions 📝.

- **Play Quizzes**: Dive into quizzes created by others 🎮.

- **Surprise Quiz**: Enjoy quizzes powered by the Trivia API 🎉.

- **Result and Certificate**: View quiz results and download a certificate upon scoring 100% 🏅.

- **My Quizzes Management**: Edit or delete quizzes you've created 🛠ī¸.

- **Responsive Design**: Optimized for an exceptional experience on both mobile and desktop devices 📱đŸ’ģ.



## Screenshots đŸ–ŧī¸





  Mobile View






  Web View




## Demo đŸŽĨ



Check out the demo video to see the AlmaBetter Quiz App in action:-

One of Many Feature Like Surpirse Quizz-



https://github.com/user-attachments/assets/a8d25773-97b1-47ce-a160-cd1cc593a47d



## Installation ⚙ī¸



To run this project locally, follow these steps:



```bash

# Clone the repository

git clone [email protected]:Shwetaank/almabetter-quizz-app.git



# Navigate to the project directory

cd almabetter-quizz-app



# Clerk Authentication

# Get the Key from Clerk and save it in the .env file



# Install dependencies

npm install



# Start the development server

npm run dev

```

## Usage 🚀



1. **Visit the AlmaBetter Quiz App** web application. 🌐

2. **Sign in or register** using Clerk authentication. 🔑

3. **Navigate through the different sections** such as "Create Quiz," "My Quizzes," "Surprise Quiz," or "Play Quiz." 🧩

4. **Create a quiz**, **play an existing one**, or **view your quiz results**. 🎨🎮📊

5. **Use the "Surprise Quiz"** feature to challenge yourself with unexpected questions. 🎉🤔

6. **Download a certificate** if you achieve a perfect score. 🏆📜



## Technologies Used đŸ’ģ



- **React**: Front-end library for building user interfaces. ⚛ī¸

- **Redux Toolkit**: State management for the application. 🔄

- **Clerk**: User authentication and management. 🔑

- **Tailwind CSS**: Utility-first CSS framework for styling. 🎨

- **Flowbite React**: Component library for UI elements. 🧩

- **Axios**: Promise-based HTTP client for making API requests. 🌐

- **Framer Motion**: Library for animations and transitions. 🎞ī¸

- **React Router**: Declarative routing for React applications. đŸšĻ



## Contributing 🤝



Contributions are welcome! To contribute:



1. **Fork the repository**. 🍴

2. **Create a new branch** for your feature or bugfix:

   ```bash

   git checkout -b feature/your-feature

3. Commit your changes:-

   ```bash

   git commit -m "Add some feature"

4. Push to the branch:-

   ```bash

   git push origin feature/your-feature

5. Open a pull request. 🔄



## Problem Statement 📋



In many educational platforms, users often face challenges with:



- **Lack of Engagement**: Traditional quiz systems can be static and unengaging, leading to reduced motivation and interaction. đŸŽ¯

- **Limited Personalization**: Users have few options for customizing quizzes or receiving tailored content based on their interests and performance. 🎨

- **Inadequate Feedback**: There is a need for real-time feedback and detailed performance analytics to help users understand their strengths and weaknesses. 📊

- **Inefficient Authentication**: Managing user access and authentication securely can be complex and often lacks seamless integration. 🔒



The AlmaBetter Quiz App addresses these issues by providing a dynamic, interactive quiz platform with robust features for quiz creation, real-time gameplay, and detailed feedback. It enhances user engagement through personalized content and ensures secure authentication and management using Clerk. 🚀



## Future Scope 🚀



The AlmaBetter Quiz App has potential for future enhancements:



- **Integration with More Question APIs**: Expand the variety of trivia questions available. 🌍

- **Advanced Analytics**: Provide users with detailed insights into their quiz performance. 📈

- **Social Features**: Add functionalities like leaderboards and quiz sharing to enhance user engagement. 🏆🔗

- **Mobile App**: Develop a mobile application version to reach users on the go. 📱

- **AI-Driven Recommendations**: Use AI to suggest quizzes based on user interests and past performance. đŸ¤–đŸŽ¯



## License 📜



This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.



## Credits 🙌



- **Trivia questions** sourced from [Open Trivia Database](https://opentdb.com/).

- **Clerk** for authentication services. 🔑

- **Tailwind CSS & Flowbite-React** for styling the application. 🎨

- **React-Icon** for icons. ⭐



## Contact 📞



For any questions or suggestions, feel free to reach out:



- **Email**: [email protected] 📧

- **Twitter**: [@Sin_Greed___](https://x.com/Sin_Greed___) đŸĻ

- **LinkedIn**: [Shwetank Morey](https://www.linkedin.com/in/shwetank-morey-a35484257/) 🔗