All Challenges
Pick a challenge and start building.
"LinkHub" – Personal Bio Link Builder
LinkHub is a simplified version of Linktree. It allows users to create a single page that hosts all their social media and project links. This project focuses on the "Bread and Butter" of full-stack development: CRUD (Create, Read, Update, Delete) operations. You will build a dashboard to manage links and a public-facing profile page that anyone can visit. What You Will Learn Database Basics: How to model a simple "Link" object (Title, URL, Icon). Dynamic Routing: Creating custom URLs like linkhub.com/username. Form Handling: Validating URLs and text inputs in React. Deployment: Learning how to connect a frontend and backend in a live environment.
View Challenge
"CoDraw" – Real-Time Collaborative Canvas
CoDraw is a multi-user digital whiteboard where developers and designers can brainstorm in real-time. Instead of just a drawing tool, this project is a lesson in synchronization. You will build a system where a stroke made on one user’s screen appears instantly on another’s, using Socket.io for the live connection and the HTML5 Canvas API for the rendering. What You Will Learn Socket.io (WebSockets): How to maintain a persistent, bidirectional connection between the client and server. Canvas API: Mastering 2D drawing, brush strokes, and coordinate mapping. Concurrency Management: Handling "race conditions" where two users draw in the same spot at the same time. Room-Based Logic: Creating unique "Room IDs" so different teams can have private whiteboard sessions.
Unlock with Pro →
"DevNotes" – Component-Driven Markdown Editor
DevNotes is a specialized note-taking application designed for developers. Unlike a plain text editor, DevNotes allows users to write in Markdown and embed live React components directly into their notes using MDX. Imagine writing a note about a UI color palette and embedding an actual interactive color picker, or writing about a specific algorithm and embedding a live code execution playground. This project focuses on the intersection of static content and dynamic interactivity. What You Will Learn MDX Integration: How to compile and render MDX strings into React components on the fly (using tools like mdx-bundler or next-mdx-remote). AST Manipulation: Understanding how Markdown is parsed into a syntax tree. Persistent Local Storage: Saving complex note structures to localStorage or an IndexedDB. Custom Component Injection: Mapping standard Markdown tags (like h1 or code) to your own custom, styled React components.
Unlock with Pro →
"PulseMetric" – Real-Time Social Sentiment Dashboard
PulseMetric is a high-performance social analytics dashboard that tracks engagement and sentiment across multiple simulated social streams. Unlike a static dashboard, this project focuses on high-frequency data. You will build a system that can handle "bursty" traffic (like a viral tweet or a live event) by using Redis as a lightning-fast caching and message brokering layer between your backend and your React frontend. You’ll learn how to move away from traditional "request-response" cycles and into the world of event-driven architecture. What You Will Learn Real-time Data Streams: Using Redis Pub/Sub or WebSockets to push updates to the UI without refreshing. In-Memory Data Structures: Leveraging Redis Sorted Sets (ZSET) to create real-time "Trending" leaderboards. Caching Strategies: Reducing database load by caching heavy analytical queries. Complex State Management: Managing a constant stream of incoming data in React without tanking performance.
Unlock with Pro →
Eccomerce Platfrom
The "Performance" Challenge (Frontend) Most developers can make a site look good, but few can make it fast. The Goal: Achieving a perfect 100/100 Lighthouse Score while loading 4K product images. The Tech: You’ll need to master Next.js Server Components, image optimization (WebP/AVIF), and Skeleton Screen patterns. The Win: You learn how to handle "Cumulative Layout Shift" (CLS) so the page doesn't jump around while loading—a common frustration for shoppers. 2. The "Real-Time" Challenge (Inventory) In E-commerce, "Out of Stock" must be updated instantly across all users. The Goal: Preventing two people from buying the very last item at the exact same millisecond. The Tech: You’ll implement WebSockets (Socket.io) for live updates and Optimistic UI (updating the UI before the server confirms) to make the app feel "instant." The Win: You master Race Conditions and database locking—skills essential for high-frequency trading or seat-booking apps. 3. The "Search & Discovery" Challenge (AI) Standard search is boring. Users want "Visual Search" (uploading a photo). The Goal: Connecting a frontend upload to a Vector Database (like Pinecone or pgvector). The Tech: You’ll work with Machine Learning APIs (Google Vision or OpenAI CLIP) to turn an image into "embeddings" (mathematical coordinates) to find similar products. The Win: You bridge the gap between Web Development and AI Implementation, making you 10x more valuable in the current job market. 4. The "Payment & Security" Challenge (FinTech) Handling money requires a "zero-error" mindset. The Goal: A seamless, secure "One-Click" checkout that handles taxes, shipping, and discounts dynamically. The Tech: Deep integration with Stripe/Razorpay Webhooks. You have to ensure that if a user’s internet cuts out after they pay but before the order is saved, the system recovers gracefully (Idempotency). The Win: You become an expert in FinTech Security and reliable third-party API orchestration.
Unlock with Pro →
Designer Dashboard
This Designer Dashboard is a high-performance, "multiplayer" workspace designed specifically for creative professionals. Unlike a standard admin panel, this website acts as a visual engine that balances heavy asset management with an inspiring, distraction-free aesthetic. In the industry, we call this a "Graphical-First Interface"—where the focus is on direct interaction with visuals rather than digging through text menus. 🎨 Visual Identity & Aesthetic The "Dark Mode" Standard: High-contrast charcoal and deep slate backgrounds to make design colors "pop" without shifting the user's color perception. Glassmorphism & Depth: Using semi-transparent "frosted glass" layers and subtle shadows to create a sense of hierarchy (z-axis) without adding heavy borders. Bento Grid Layout: A modular, card-based system (inspired by Apple/Modern SaaS) that allows users to scan project previews, timelines, and team activity in a non-linear way.
View Challenge