Welcome to the Chingu Trivia 🚀, a web application built with the MERN (MongoDB, Express.js, React, Node.js) stack! This app allows users to engage in trivia quizzes across three categories: HTML, CSS, and JavaScript. The app includes user authentication using JSON Web Tokens (JWT) for secure login and score-saving and fetching capabilities.

🎯 Note: You don't need to signup/login to take the quiz. However to fetch and save scores, signing up is necessary.

• Authentication with JWT: Securely authenticate users to save and fetch scores.
• Score Saving and Fetching: Track your progress and get your latest score.
• Three Quiz Categories: Choose from HTML, CSS, and JavaScript quizzes.
• Lottie Animations: Elevate the user experience with engaging animations.
• Responsive Design: Enjoy seamless gameplay across devices.

• MongoDB: For storing user data and scores.
• Express.js: Backend framework for building robust APIs.
• React: Frontend library for a dynamic and interactive UI.
• Node.js: Server-side JavaScript for handling requests.
• JWT (JSON Web Tokens): Ensures secure authentication.
• Lottie Animations: Add flair with dynamic animations.

1. Clone the Repository:

   git clone https://github.com/Sushmita-Ghosh/chingu-trivia.git

2. Install Dependencies for both frontend & backend:

 cd frontend
 npm install
 
 cd backend
 npm install

3. Set Variables in the config.js in backend folder:

   MONGO_URI = Create a cluster in mongodb and we need to provide the url here
   SECRET_KEY= Put any string here
   
   After updation it should look something like this:
   MONGO_URI = "mongodb+srv://<username>:<password>@cluster0.cnjhdht.mongodb.net/chinguusers";
    SECRET_KEY = "mySecret";

4. Launch frontend & backend in two different terminal:

   cd frontend --> do this in terminal 1
   npm run dev
   
   cd backend   --> do this in terminal 2
   npm run start

• Need to add the logout functionality. (Currently the token expires in 24hrs but we have removed it from localhost manually).
• Currently the flow is dependent on signup for the username field, so the user would have to sign up for the username to be accessed. Need to add logic for fetching usernames for all signed-up users who are directly logging in.
• Want to include tests with React Testing Library and Jest.
• Further refactoring of code.

• Used Render for web service/api deployment.
• Used Netlify for the frontend development
• The project is available here✨.

chingu-trivia/
|-- frontend/
|   |-- src/
|       |-- components/
|       |-- assets/
|       |-- context/
|       |-- constants/
|       |-- App.jsx
|       |-- main.jsx
|   |-- package.json
|
|-- backend/
|   |-- controllers/
|   |-- models/
|   |-- routes/
|   |-- config/
|   |-- middlewares/
|   |-- service/
|   |-- connectDB.js
|   |-- index.js
|   |-- package.json
|
|-- .gitignore
|-- README.md