Nipun Agarwal

Wanna be Software Engineer.

Want to be an entrepreneur.

Quiz & Leaderboard

Inspired by a code-along project on YouTube, I developed a full-stack quiz application using the MERN (MongoDB, Express.js, React.js, Node.js) stack.

Website Link: MERN Quiz Application
GitHub Repository: Quiz MERN Repository

Overview

Inspired by a code-along project on YouTube, I developed a full-stack quiz application using the MERN (MongoDB, Express.js, React.js, Node.js) stack. This application allows users to enter their username, participate in a quiz, and view their results along with a leaderboard showcasing top scores.

Objectives

  • User Interaction: Enable users to input their username and participate in a quiz.
  • Quiz Functionality: Present a series of questions to the user and record their answers.
  • Results Display: Show the user’s score upon completion of the quiz.
  • Leaderboard: Display a leaderboard featuring top scores from all users.

Key Features

  • User Authentication: Users can enter their username to start the quiz.
  • Dynamic Question Rendering: Questions are fetched from the backend and displayed to the user.
  • Real-time Scoring: User responses are evaluated in real-time, and scores are calculated accordingly.
  • Leaderboard: After completing the quiz, users can view a leaderboard of top scores.

Technical Stack

  • Frontend:

    • React.js: For building the user interface and managing component state.
    • CSS: For styling the application to ensure a responsive and user-friendly design.

  • Backend:

    • Node.js & Express.js: To create RESTful APIs for handling user data and quiz questions.
    • MongoDB: For storing user information, quiz questions, and scores.

Challenges and Solutions

  1. State Management:

    • Challenge: Managing the state of user responses and scores throughout the quiz.
    • Solution: Utilized React’s useState and useEffect hooks to handle state changes efficiently.

  2. Asynchronous Data Handling:

    • Challenge: Fetching quiz questions from the backend and ensuring they load correctly.
    • Solution: Implemented asynchronous functions with proper error handling to fetch and display data seamlessly.

  3. Leaderboard Accuracy:

    • Challenge: Accurately calculating and displaying top scores on the leaderboard.
    • Solution: Created backend endpoints to aggregate and sort scores, ensuring the leaderboard reflects real-time data.

Key Learnings

  • Full-Stack Development: Gained hands-on experience in developing a full-stack application using the MERN stack.
  • State Management in React: Enhanced understanding of managing complex state in React applications.
  • Asynchronous Programming: Improved skills in handling asynchronous operations in JavaScript.
  • Backend Integration: Learned to integrate frontend and backend components effectively to create a cohesive application.

Outcome

The MERN Quiz Application successfully met all project objectives, providing users with an interactive platform to test their knowledge and compare scores. This project reinforced my skills in full-stack development and introduced me to best practices in building and deploying web applications.