REACT

30+ React Projects to Build in 2026 (With GitHub Links)

By BuildIdeas Team·June 2026·7 min read
Updated: June 2026

Beginner Projects

GitHub Profile Explorer

A responsive app that lets users search any GitHub username and explore their public profile — repositories, stars, forks, languages, and contribution activity — in a clean card-based dashboard. Implements pagination, debounced search, and a dark/light theme toggle. Great first project to demonstrate API integration, custom hooks, and responsive design.

React 19TypeScriptViteTanStack QueryTailwind CSSGitHub REST API
View on GitHub

Personal Finance Expense Tracker

A client-side finance tracker where users log income and expenses by category, visualise monthly spending breakdowns with interactive charts, set budget limits with alert thresholds, and export transaction history to CSV. Data persists via localStorage. Demonstrates state management, form validation, and data visualisation fundamentals.

React 19TypeScriptViteZustandRechartsTailwind CSSshadcn/ui
View on GitHub

Movie & TV Show Discovery App

A responsive entertainment discovery platform powered by the TMDB API that lets users browse trending films, search by title or genre, filter by release year and rating, view detailed cast pages, and maintain a personal watchlist saved to localStorage. Implements infinite scroll and skeleton loading states.

React 19TypeScriptViteTanStack QueryAxiosTailwind CSSTMDB API
View on GitHub

Markdown-Powered Notes App

A productivity note-taking app where users write in Markdown and see a live rendered preview side-by-side. Features include tag-based filtering, full-text search, pinned notes, and automatic save on every keystroke. No backend — data lives in localStorage for persistence.

React 19TypeScriptViteZustandreact-markdownTailwind CSS
View on GitHub

Job Application Tracker Dashboard

A Kanban-style job hunt tracker where candidates move applications through stages — Saved, Applied, Interview, Offer, Rejected. Each card stores the company, role, salary range, notes, and link. Features drag-and-drop between columns, statistics panel showing conversion rates, and CSV export for offline review.

React 19TypeScriptVite@dnd-kit/coreZustandTailwind CSSshadcn/ui
View on GitHub

Real-Time Currency & Crypto Converter

A financial converter that fetches live exchange rates and cryptocurrency prices, supports multi-currency conversion in a single view, displays 7-day trend sparklines, and allows users to build a personalised watchlist of currency pairs. Implements auto-refresh every 30 seconds with a visual countdown and graceful offline fallback.

React 19TypeScriptViteTanStack QueryRechartsTailwind CSSExchangeRate API
View on GitHub

Developer Link-in-Bio Profile Builder

A no-code link-in-bio builder where developers input their name, bio, social links, tech stack, and featured projects to generate a shareable, mobile-optimised profile page. Includes a QR code export feature. A great project for learning React Router, form handling, and basic URL generation.

React 19TypeScriptViteReact Router v6Tailwind CSSshadcn/uiSupabase
View on GitHub

Intermediate Projects

Full-Stack Blog CMS with Auth

A headless blog platform where authenticated authors can write, edit, preview, and publish posts using a rich text editor with Markdown support. Features role-based access (admin, editor, reader), draft/published states, slug-based routing, tag filtering, and an RSS feed. The frontend is a full Next.js application with ISR for fast public page loads.

Next.js 14TypeScriptSupabaseTanStack QueryTailwind CSSshadcn/uiTipTap
View on GitHub

Real-Time Collaborative Whiteboard

A multiplayer whiteboard where multiple users can draw, add sticky notes, insert shapes, and annotate simultaneously — all synced in real time. Features room creation with shareable invite links, cursor presence, undo/redo per user, and canvas export to PNG. A technically rich project demonstrating WebSocket event handling and optimistic UI updates.

React 19TypeScriptSocket.ioNode.jsKonva.jsTailwind CSSExpress
View on GitHub

SaaS Subscription Management Dashboard

A subscription analytics dashboard for a SaaS business showing MRR, ARR, churn rate, trial-to-paid conversion, and plan distribution in real time. Features drill-down into subscriber records, plan upgrade/downgrade simulation, cohort retention heatmaps, and a revenue forecast chart.

React 19TypeScriptViteTanStack QueryRechartsTailwind CSSshadcn/ui
View on GitHub

E-Commerce Storefront with Cart & Checkout

A production-quality e-commerce frontend with product listing pages, faceted filtering, a persistent cart, a multi-step checkout with address and payment forms, order history, and a product review system. Implements Stripe Elements for the payment step. Fully responsive across mobile, tablet, and desktop.

Next.js 14TypeScriptZustandTanStack QueryStripe ElementsTailwind CSSSupabase
View on GitHub

Developer Portfolio with GitHub Activity Integration

A modern, animated developer portfolio that dynamically pulls GitHub contribution data, pinned repositories, and commit activity. Features project case studies with tech stack breakdowns, a filterable skills matrix, a blog section powered by MDX, animated page transitions, and a dark/light theme. Scores 95+ on Lighthouse.

Next.js 14TypeScriptFramer MotionGitHub GraphQL APIMDXTailwind CSS
View on GitHub

Real-Time Chat Application with Rooms

A multi-room chat application where users can create public or private rooms, send messages with rich text formatting, share files, react to messages with emoji, and see typing indicators and read receipts in real time. Features infinite scroll for message history and a presence system.

React 19TypeScriptSocket.ioNode.jsMongoDBExpressTailwind CSS
View on GitHub

Habit Tracker with Streak Analytics

A habit-building app where users define daily habits, log completions, and visualise their streaks on a GitHub-style contribution calendar. Features habit grouping by category, streak freeze tokens, weekly completion rate trends, and push notifications via the Web Push API.

Next.js 14TypeScriptSupabaseTanStack QueryD3.jsTailwind CSSClerk
View on GitHub

Event Management & Ticketing Platform

A full-featured event platform where organisers create events with cover images, schedules, speaker bios, and ticket tiers. Attendees can browse, register, and receive a QR code ticket. Organisers get a live attendee dashboard. Implements Clerk authentication, image uploads, and email confirmations.

Next.js 14TypeScriptClerkSupabaseTailwind CSSshadcn/uiStripe
View on GitHub

Advanced Projects

AI-Powered SaaS Writing Assistant

A production SaaS app where users compose long-form content with an inline AI co-writer powered by OpenAI streaming. Features AI-powered autocomplete, paragraph rewriting, SEO keyword insertion, tone adjustment, a document version history, and team collaboration with commenting. Implements per-user rate limiting and usage billing via Stripe.

Next.js 14TypeScriptOpenAI Streaming APISupabaseTipTapStripeClerkVercel AI SDK
View on GitHub

Multi-Tenant Project Management Tool

A Jira/Linear-style project management SaaS with multi-tenancy — each organisation gets its own isolated workspace. Features Kanban and list views, sprint planning, GitHub issue sync, team member invitations, time tracking, burndown charts, and a full activity audit log. Implements row-level security in Supabase and real-time updates.

Next.js 14TypeScriptSupabase (RLS + Realtime)TanStack QueryZustandTailwind CSS@dnd-kit
View on GitHub

AI Code Review & Diff Viewer

A developer tool where users paste a GitHub PR URL and receive a full AI-generated code review — identifying bugs, security vulnerabilities, performance issues, and documentation gaps — displayed inline next to the diff. Features syntax-highlighted diffs, comment threading, and a downloadable review report in Markdown.

Next.js 14TypeScriptGitHub APIOpenAIreact-diff-viewerTailwind CSSshadcn/ui
View on GitHub

Real-Time Analytics Dashboard for SaaS Products

An embeddable analytics dashboard SaaS where product teams track custom events, build funnel visualisations, analyse feature adoption across user cohorts, and create retention tables. Features a drag-and-drop dashboard builder, real-time event stream viewer, and a SQL query interface for power users.

Next.js 14TypeScriptClickHouseTanStack QueryRechartsD3.jsTailwind CSSDocker
View on GitHub

Video Conferencing Platform with AI Meeting Notes

A WebRTC-based video conferencing application with room creation, screen sharing, participant management, in-call chat, and virtual backgrounds. An AI pipeline powered by Whisper transcribes the meeting in real time and an LLM generates structured meeting notes, action items with assignees, and a shareable summary after the call ends.

Next.js 14TypeScriptWebRTCSocket.ioOpenAI WhisperGPT-4oSupabase
View on GitHub

Enterprise CRM with Pipeline Analytics

A full-featured CRM system for sales teams with contact management, deal pipeline (Kanban + table view), activity timeline per contact, email and call logging, automated follow-up reminders, and a performance analytics module with team leaderboards. Features role-based access, bulk CSV import, and custom field definitions.

Next.js 14TypeScriptSupabaseTanStack QueryZustandRechartsTailwind CSSClerk
View on GitHub

AI-Powered Resume Builder with ATS Scorer

An interactive resume builder where an AI assistant rewrites bullet points with strong action verbs and quantified impact statements. A real-time ATS compatibility scorer analyses the resume against a target job description, highlights missing keywords, and scores formatting compliance. Generates a pixel-perfect PDF and supports multiple professional templates.

Next.js 14TypeScriptVercel AI SDKOpenAI API@react-pdf/rendererTailwind CSSSupabase
View on GitHub

Real-Time Collaborative Code Editor

A browser-based collaborative IDE similar to CodeSandbox where multiple developers can write, run, and debug code together in real time. Features a multi-file project tree, live cursor presence, integrated terminal, syntax highlighting for 40+ languages, and a shareable session link with spectator mode. Implements CRDTs for conflict-free concurrent editing.

React 19TypeScriptY.js (CRDT)Monaco EditorWebSocketNode.jsDocker
View on GitHub

Full-Stack Learning Management System

A production LMS platform for online course creators similar to Teachable. Features video upload with adaptive HLS streaming, progress tracking per lesson, timed quizzes with automated grading, course completion certificates, a student discussion forum, and Stripe-based course monetisation with coupon codes.

Next.js 14TypeScriptSupabaseMux (video streaming)StripeTanStack QueryTailwind CSSClerkPrisma
View on GitHub

Open-Source Uptime Monitor & Status Page

A self-hosted uptime monitoring SaaS that pings HTTP, TCP, and DNS endpoints on a configurable schedule, tracks response time history with percentile distributions, sends multi-channel alerts (Slack, email), and publishes a beautiful public status page with incident history. Features maintenance window scheduling and an embeddable status badge for GitHub READMEs.

Next.js 14TypeScriptNode.jsPrismaPostgreSQLRedisRechartsTailwind CSSDocker
View on GitHub

AI Flashcard Study Platform

A smart study tool where users paste any text, upload a PDF, or enter a topic and the AI automatically generates Anki-style flashcards with spaced repetition scheduling. Tracks mastery per card, surfaces due cards daily, and shows a long-term retention curve chart. Ideal for showcasing AI integration, scheduling algorithms, and user progress tracking.

Next.js 14TypeScriptVercel AI SDKOpenAISupabaseTailwind CSSshadcn/uiClerk
View on GitHub

Open-Source Form Builder (Typeform Clone)

A drag-and-drop form builder where users create multi-step forms with conditional logic, various question types (multiple choice, rating, file upload), custom themes, and real-time response analytics. Forms are served at public URLs with an embeddable script. Teaches drag-and-drop, schema-driven rendering, and building a submission pipeline.

Next.js 14TypeScriptReact DnDPrismaPostgreSQLTailwind CSSshadcn/uiClerk
View on GitHub

Notion-Style Personal Wiki

A local-first personal knowledge base with nested pages, rich block-based editing (text, headings, code blocks, toggles, tables, callouts), inline slash commands, bidirectional page links, and a sidebar tree navigator. Covers building a custom block editor from scratch and managing deeply nested tree state efficiently in React.

React 19TypeScriptTipTapZustandTailwind CSSshadcn/uiSupabase
View on GitHub

Social Media Scheduling Dashboard

A content operations tool where marketers compose posts, attach media, schedule publications across multiple platforms (Twitter/X, LinkedIn, Instagram), preview how posts will render on each network, and analyse engagement metrics in a unified calendar view. Covers OAuth integrations, cron-based job queuing, and multi-account state management.

Next.js 14TypeScriptSupabaseInngest (job scheduling)Tailwind CSSshadcn/uiClerk
View on GitHub

AI-Powered Image Generation Studio

A creative studio built on top of the OpenAI DALL-E or Stability AI API where users generate images from prompts, apply style presets, upscale outputs, organise creations into collections, and share generated images via public gallery links. Covers streaming API responses, file storage to S3, and building creative-tool UIs.

Next.js 14TypeScriptOpenAI DALL-E APIAWS S3Tailwind CSSshadcn/uiSupabase
View on GitHub

Personal Budgeting App with Bank CSV Import

A privacy-first personal finance app where users import bank statement CSVs, auto-categorise transactions with a simple ML classifier, set monthly spending limits per category, and visualise net worth trends over time. Teaches CSV parsing, client-side data transformation, and advanced Recharts patterns.

React 19TypeScriptVitePapaParseRechartsZustandTailwind CSSshadcn/ui
View on GitHub

Developer Tool: JSON Visualizer & Formatter

A browser-based JSON utility that pretty-prints, validates, minifies, and displays any JSON as an interactive collapsible tree with syntax highlighting. Supports file upload, URL fetch, and shareable permalink to the formatted view. A deceptively deep project for parsing edge cases, building recursive tree components, and performance optimisation.

React 19TypeScriptViteCodeMirrorTailwind CSS
View on GitHub

Real-Time Stock & Crypto Portfolio Tracker

A live investment portfolio tracker where users add holdings, track real-time prices via WebSocket feeds, view portfolio allocation charts, set price alerts with push notifications, and simulate buy/sell scenarios. Covers financial data streaming, complex aggregation logic, and building responsive data-dense dashboards.

Next.js 14TypeScriptSupabase RealtimeRechartsTailwind CSSshadcn/uiClerk
View on GitHub

Open-Source Customer Support Chat Widget

A full-stack live chat system for websites — a customisable embeddable chat bubble script, a real-time agent inbox dashboard, automated canned responses, conversation history, and basic analytics (response time, satisfaction scores). A great systems project covering widget injection, multi-tenancy, and real-time event pipelines.

Next.js 14TypeScriptSocket.ioNode.jsPostgreSQLPrismaTailwind CSSshadcn/ui
View on GitHub

AI Travel Itinerary Planner

A conversational travel planning tool where users describe their trip (destination, duration, budget, interests) and an AI generates a day-by-day itinerary with activity suggestions, estimated costs, and an interactive map. Users can regenerate individual days, save itineraries, and share them via public links. Combines conversational AI, map APIs, and structured data extraction.

Next.js 14TypeScriptVercel AI SDKOpenAIMapbox GL JSSupabaseTailwind CSSClerk
View on GitHub

Tips for Building Projects That Get You Hired

  1. 1

    Build with hooks only — avoid class components entirely. useState, useEffect, useContext, and useReducer are what interviewers expect.

  2. 2

    Add React Query or SWR for data fetching — it signals you understand caching, loading states, and real-world async patterns.

  3. 3

    Deploy every project on Vercel — a live URL is non-negotiable for React portfolio projects.

  4. 4

    Use TypeScript — even a partial migration shows production-grade thinking and is now expected at most companies.

  5. 5

    Write a README with a live demo link, screenshots, and setup instructions. Recruiters spend under 60 seconds on each repo.

Not sure which React project to build?

BuildIdeas generates 3 personalized React project ideas based on your exact stack — with week-by-week roadmaps and interview prep built in.

Generate My React Project