Chapter 24: Final Projects
Final Projects! 🎉
This is the moment we’ve all been waiting for — after learning everything from JSX basics to React 19 features, Next.js, testing, deployment, and modern state management, it’s time to build real, portfolio-worthy projects that you can show to recruiters, friends, or even put on your GitHub profile.
I’m going to guide you through four amazing final projects — step by step, in detail, like we’re building them together in Mumbai with our laptops open and chai on the table. Each project will use modern React practices (2025/2026 style) and you can choose one or all to build!
Project 1: Todo App with Local Storage (Perfect Beginner-to-Intermediate Project)
Goal: Build a beautiful, persistent Todo app that saves tasks in localStorage so they don’t disappear on refresh.
Features:
- Add, edit, delete, toggle complete todos
- Persist data in localStorage
- Filter: All / Active / Completed
- Dark mode toggle (using context)
- Responsive design with Tailwind CSS
Tech Stack:
- React + Vite
- TypeScript
- Tailwind CSS
- Zustand (for state) or useReducer + useLocalStorage hook
- Custom hook for localStorage
Folder Structure
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
src/ ├── components/ │ ├── TodoItem.tsx │ ├── TodoList.tsx │ ├── TodoForm.tsx │ └── ThemeToggle.tsx ├── hooks/ │ └── useLocalStorage.ts ├── store/ │ └── todoStore.ts ├── context/ │ └── ThemeContext.tsx └── App.tsx |
Key Code Snippets
useLocalStorage Hook (we already built this earlier)
Zustand Store (store/todoStore.ts)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
import { create } from 'zustand'; import { persist } from 'zustand/middleware'; interface Todo { id: string; text: string; completed: boolean; } interface TodoStore { todos: Todo[]; addTodo: (text: string) => void; toggleTodo: (id: string) => void; deleteTodo: (id: string) => void; editTodo: (id: string, text: string) => void; } export const useTodoStore = create<TodoStore>()( persist( (set) => ({ todos: [], addTodo: (text) => set((state) => ({ todos: [...state.todos, { id: crypto.randomUUID(), text, completed: false }], })), toggleTodo: (id) => set((state) => ({ todos: state.todos.map((todo) => todo.id === id ? { ...todo, completed: !todo.completed } : todo ), })), deleteTodo: (id) => set((state) => ({ todos: state.todos.filter((todo) => todo.id !== id), })), editTodo: (id, text) => set((state) => ({ todos: state.todos.map((todo) => todo.id === id ? { ...todo, text } : todo ), })), }), { name: 'todos-storage', // key in localStorage } ) ); |
TodoForm Component
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
import { useState } from 'react'; import { useTodoStore } from '../store/todoStore'; export default function TodoForm() { const [text, setText] = useState(''); const addTodo = useTodoStore((state) => state.addTodo); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); if (!text.trim()) return; addTodo(text); setText(''); }; return ( <form onSubmit={handleSubmit} className="flex gap-3 mb-8"> <input type="text" value={text} onChange={(e) => setText(e.target.value)} placeholder="Add a new task..." className="flex-1 p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" /> <button type="submit" className="px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition" > Add </button> </form> ); } |
Full App — Add filters, dark mode, and responsive layout using Tailwind!
Deployment: Push to GitHub → Deploy to Vercel in 2 minutes.
Project 2: E-commerce Cart (Intermediate – Great for Portfolio)
Goal: Build a beautiful shopping cart with product listing, add/remove items, quantity control, total price, and persist cart in localStorage.
Features:
- Product grid with fake API or static data
- Add to cart, update quantity, remove item
- Cart sidebar / modal
- Total price calculation
- Persist cart across refreshes
- Responsive + dark mode
Tech Stack:
- React + Vite
- Tailwind CSS
- Zustand (for cart state)
- useLocalStorage hook
- Optional: Fake store API
Bonus: Add checkout button that shows order summary.
Project 3: Blog / Dashboard with API Integration (Advanced – Full-Featured)
Goal: Build a modern blog or admin dashboard that fetches real data from an API.
Features:
- List of posts/users (fetch from JSONPlaceholder or your own API)
- Single post/user detail page (dynamic routes)
- Search & filter
- Dark mode
- Responsive design
- Optional: Add new post form (with fake API POST)
Tech Stack:
- Next.js 14+ App Router
- Tailwind CSS
- TanStack Query (for data fetching)
- Server Components + Client Components
- Deploy to Vercel
Example Dynamic Route (app/posts/[id]/page.tsx)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import { notFound } from 'next/navigation'; async function getPost(id: string) { const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`); if (!res.ok) notFound(); return res.json(); } export default async function PostPage({ params }: { params: { id: string } }) { const post = await getPost(params.id); return ( <div className="container mx-auto p-8 max-w-3xl"> <h1 className="text-4xl font-bold mb-6">{post.title}</h1> <p className="text-lg text-gray-700 leading-relaxed">{post.body}</p> </div> ); } |
Project 4: Chat Application or Full-Stack Project (Expert Level)
Goal: Build a real-time chat app or a full-stack task manager with authentication.
Option 1: Real-time Chat
- Use Next.js + Supabase (PostgreSQL + Realtime)
- Features: Login, send/receive messages, online users
- Or use Firebase (very easy)
Option 2: Full-Stack Todo/Dashboard
- Next.js App Router
- Prisma + PostgreSQL (Supabase or Neon)
- Authentication (NextAuth.js / Clerk)
- CRUD operations with Server Actions
- Deploy to Vercel + Supabase
Recommended Tech Stack (2026):
- Next.js 14+ (App Router)
- Tailwind CSS + shadcn/ui
- TanStack Query
- Zustand or Jotai
- Prisma + Supabase/PostgreSQL
- Clerk or NextAuth for auth
- Vercel for deployment
Final Words & Next Steps
You’ve completed 24 chapters — that’s a complete React + Next.js mastery course! You now know everything from first component to full-stack deployment.
What I recommend you do next:
- Pick one project (I suggest starting with Todo App → then E-commerce Cart → then Blog/Dashboard)
- Build it step by step — use all modern practices (Server Components, Actions, Tailwind, TanStack Query…)
- Deploy it to Vercel
- Add it to your GitHub portfolio & LinkedIn
- Share the live link with me — I’d love to see your masterpiece!
You’re now officially a React + Next.js pro, Webliance! 🚀 I’m incredibly proud of you — you’ve come so far!
If you want, we can:
- Build any of these projects together step-by-step
- Dive deeper into TypeScript
- Learn React Native
- Or start a full-stack SaaS project
Just tell me what you want to conquer next — I’m right here with you! 😊
Celebrate yourself — you did it! 🎉
