Noodl - Interactive Quiz Platform

Noodl is an interactive quiz platform featuring real-time progress tracking, and dynamic leaderboards. It allows users to compete on quizzes, with scores updated live and ranks displayed.

Overview

Noodl is an interactive quiz platform with a playful, culinary-inspired theme. It offers a seamless experience for users to create and take quizzes, track real-time scores, and compete on dynamic leaderboards. The UI is designed to be engaging, responsive, and intuitive, making learning fun and competitive.

Key Features

Real-Time Leaderboards: Track player scores live as they compete in quizzes.
Noodl-Bowl System: Users can create unique quiz bowls and share custom codes to invite participants.
Interactive UI & Animations: Smooth transitions and a delightful visual experience powered by Framer Motion.
Dark Mode Support: Fully optimized for both light and dark themes.
Admin Panel: Secure admin interface for quiz creation and management.
Mobile-Optimized: Designed to work flawlessly across all devices.
Performance Analytics: Track user engagement and quiz performance.

Technologies Used

Next.js: Provides a fast and optimized web experience with server-side rendering.
Tailwind CSS: Ensures a clean, modern, and responsive UI.
MongoDB: Used for storing quiz data and tracking user progress.
Firebase: Handles user authentication and real-time data syncing.
Framer Motion: Powers smooth animations and interactions.

Challenges and Learnings

One of the biggest challenges was implementing a real-time leaderboard that updates seamlessly as users complete quizzes. Managing state efficiently and ensuring smooth synchronization between users required careful handling of Firebase and MongoDB.

Another key learning was designing a scalable quiz engine that allows for dynamic question sets, customizable quiz durations, and seamless transitions between questions. The noodl-bowl system was a unique concept that required fine-tuning to ensure an intuitive and frictionless user experience.

Usage

Creating a Quiz Bowl

Log in to the admin panel at /[id]/admin.
Create a new noodl-bowl with your questions.
Share the unique bowl code with participants.

Taking a Quiz

Enter the noodl-bowl code on the homepage.
Input your culinary alias.
Start cooking up answers!

Outcome

Noodl successfully brings together education and entertainment, making quizzes more engaging and competitive. The combination of real-time tracking, a playful UI, and smooth animations makes it stand out as an interactive learning platform. This project highlights my UI/UX expertise, full-stack development skills, and ability to integrate real-time features effectively.