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.
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.
