14 React Projects With Source Code: Beginner to Advanced Portfolio Builds

React is one of the most widely used JavaScript libraries for building web interfaces, and it is still a strong career skill in 2026. The fastest way to get genuinely good at React is to build, ship, and iterate on real projects, not just follow tutorials.

This guide includes 14 curated React projects with source code. The difficulty increases as you go, and each project includes prerequisites, a suggested stack, and specific upgrades that turn a basic demo into a portfolio-ready app.

Access the offline PDF version: React Projects With Source Code (PDF)

Project chooser

If you are not sure where to start, pick one project from your current level, build it, then add the recommended upgrades before moving on.

React projects for beginners with source code

If you are new to React, start here. These projects focus on function components, hooks, event handling, and core UI patterns. As you build, you will mix in HTML and CSS alongside CSS frameworks and JavaScript.

Building projects alongside a React course can help you move faster, because you will apply each lesson immediately.

• Todo List, simple task manager
• Weather App, API driven forecasts
• Tic Tac Toe, classic strategy game
• Stopwatch, time measurement tool
• Calculator, basic arithmetic tool

1. React Todo List

Todo lists are common starter projects because they cover the fundamentals: rendering lists, handling input, and implementing basic CRUD features. You will use React hooks, manage state, and handle user input. Basic JavaScript knowledge matters here, including operators like triple equals.

View source code

Prerequisites

• Basic HTML, CSS, and JavaScript
• Node.js and npm installed

Stack suggested

• React
• npm or yarn
• Optional: React Router (only if you add pages)
• Optional: CSS framework like Bootstrap or Material UI

Portfolio upgrades

• Must add: persist tasks with localStorage, add a filter for all, active, completed
• Stretch: add tags and a search bar, implement drag and drop ordering
• Polish: accessibility labels, keyboard shortcuts, empty state messaging

2. React Weather App

This project is ideal if you want to practice working with APIs and asynchronous data. You will build a weather app that calls a weather API, displays current conditions, and handles loading and error states. For location-based weather, you can use the browser Geolocation API. If the API portion feels heavy, consider a JavaScript course and then return.

View source code

Prerequisites

• Basic HTML, CSS, and JavaScript
• Basic API and JSON knowledge

Stack suggested

• React
• npm or yarn
• Weather API such as OpenWeatherMap
• Axios or Fetch API
• Optional: CSS framework like Bootstrap or Material UI

Portfolio upgrades

• Must add: unit toggle, recent locations list, meaningful error states
• Stretch: hourly forecast chart, saved favorites, offline cached last result
• Polish: skeleton loaders, accessible form controls, responsive layout

3. React Tic Tac Toe

This project helps you practice state management, conditional rendering, and event handling. You can extend it with scorekeeping and a restart flow, and you can style it with CSS. If you want a tougher challenge, add an AI opponent using a minimax approach, but keep it optional.

View source code

Prerequisites

• Basic HTML, CSS, and JavaScript

Stack suggested

• React
• npm or yarn
• Optional: CSS framework like Bootstrap or Material UI

Portfolio upgrades

• Must add: scorekeeping, reset, highlight winning line
• Stretch: local multiplayer, AI opponent difficulty levels
• Polish: keyboard navigation, animations, mobile-friendly layout

4. React Stopwatch

This project focuses on timers, state updates, and effects. You can extend it with lap time tracking, countdown mode, or multiple timers.

View source code

Prerequisites

• Basic HTML, CSS, and JavaScript

Stack suggested

• React
• npm or yarn
• Optional: CSS framework like Bootstrap or Material UI

Portfolio upgrades

• Must add: lap list, pause and resume, reset confirmation
• Stretch: multi-timer dashboard, countdown mode with alerts
• Polish: accessible buttons, clean formatting, mobile layout

5. React Calculator

This project is useful for practicing reusable components, event handling, and real-time UI updates. You will manage input and render results as the user interacts.

View source code

Prerequisites

• Basic HTML, CSS, and JavaScript
• Comfort with arithmetic operations

Stack suggested

• React
• npm or yarn
• Optional: CSS framework like Bootstrap or Material UI

Portfolio upgrades

• Must add: keyboard input support, clear entry versus clear all, decimal validation
• Stretch: history panel, scientific mode, theming toggle
• Polish: focus states, accessible labels, responsive keypad

Intermediate React projects for improvers

If you already know the basics, these projects add more realistic application patterns: routing, authentication, external APIs, persistence, and real-time communication. If you are unsure, build one more beginner project first, then return.

As you work through the list, you can also sharpen your workflow by using a strong JavaScript IDE.

• eCommerce Site, online shopping platform
• Recipe App, recipe search tool
• Portfolio Site, developer skill showcase
• Chat App, realtime messaging

6. React eCommerce Site

This project introduces larger application structure: product pages, carts, payments, authentication, and data persistence. You will also integrate external APIs. The original repo uses Redux, which can be reasonable here, but in 2026 it is usually better to learn Redux via Redux Toolkit once you have already built smaller apps with hooks and Context.

View source code

Prerequisites

• Solid HTML, CSS, and JavaScript
• Basic API and database concepts

Stack suggested

• React
• React Router
• Firebase (auth and data) or another backend
• Stripe API or another payment gateway
• Optional: Redux Toolkit for complex state

Portfolio upgrades

• Must add: product search and filters, cart persistence, checkout validation
• Stretch: admin product CRUD, order history, inventory rules
• Polish: performance tuning, image optimization, accessibility reviews

7. React Recipe App

This project is great for building search and filter UX, working with API data, and designing readable, attractive list views. It also creates an opportunity to practice caching and pagination.

View source code

Prerequisites

• Solid HTML, CSS, and JavaScript
• Basic API and JSON knowledge

Stack suggested

• React
• Recipe API (Spoonacular, Edamam, or similar)
• Axios or Fetch API
• Optional: Firebase for saved recipes and auth

Portfolio upgrades

• Must add: search debouncing, filters, saved favorites
• Stretch: user accounts, shopping list export, nutrition display
• Polish: skeleton loading, empty states, responsive cards

8. React Portfolio

This project is about presentation and deployment. You can showcase projects, skills, and experience, and then deploy on a platform like Vercel. Add a blog or a contact form if you want a more complete site.

View source code

Prerequisites

• Solid HTML, CSS, and JavaScript
• Responsive design basics

Stack suggested

• React or a framework like Next.js
• Optional: MDX or a headless CMS for a blog
• Deployment on Vercel or Netlify

Portfolio upgrades

• Must add: case study pages, real screenshots, live demos, resume download
• Stretch: blog with categories, newsletter signup, contact form with spam protection
• Polish: Lighthouse tuning, accessible nav, clean typography and spacing

9. React Chat Application

This project adds realtime communication. You will use websockets, manage message state, and build a responsive UI. The original stack includes Redux, which is optional if your state remains simple.

View source code

Prerequisites

• Solid HTML, CSS, and JavaScript
• Basic backend familiarity with Node.js

Stack suggested

• React
• Node.js, Express
• Socket.IO
• Optional: auth and persistence with Firebase or a database

Portfolio upgrades

• Must add: typing indicators, message timestamps, reconnect handling
• Stretch: rooms, file uploads, moderation controls
• Polish: offline banner states, accessibility, mobile keyboard UX

Advanced React projects with source code

These projects stretch you into production style complexity: WebRTC, richer data modeling, performance, and multi API integration. If you get stuck, go back to an intermediate project, then return.

• Video Call App, peer to peer video
• Social Media Dashboard, analytics display
• Quiz App, interactive game flow
• Music Player, audio playback interface
• Travel App, multi API booking style build

10. React Video Call App

This project covers video calling with features like chat, screen sharing, and possibly recording. You will use WebRTC, plus a signaling approach and a backend for coordination. Libraries like Twilio can simplify parts of the build.

View source code

Prerequisites

• Strong React, HTML, CSS, and JavaScript
• WebRTC basics and realtime concepts

Stack suggested

• React
• WebRTC
• Socket.IO for signaling
• Node.js, Express
• Optional: Twilio Programmable Video API

Portfolio upgrades

• Must add: lobby, mute and camera controls, participant grid, basic permissions
• Stretch: screen sharing, recording, network quality indicator
• Polish: UX for join flow, device selector, error handling for permissions

11. React Social Media Dashboard

This project focuses on data driven UI. You will model data, fetch metrics, and display visualizations. It is a good time to practice chart libraries, and performance tuning.

View source code

Prerequisites

• Strong React, HTML, CSS, and JavaScript
• API and backend familiarity

Stack suggested

• React
• Chart library (Chart.js, Recharts, or similar)
• Backend API (Node.js or serverless)
• Optional: Redux Toolkit or TanStack Query style caching patterns

Portfolio upgrades

• Must add: date range filters, export to CSV, consistent formatting
• Stretch: multiple data sources, alerts, role based access
• Polish: performance, memoization, loading states per chart

12. React Quiz App

This project combines app flow, scoring, and async question fetching. It is a good test of UI logic and state transitions.

View source code

Prerequisites

• Strong React, HTML, CSS, and JavaScript
• Comfort with arrays, objects, and conditionals

Stack suggested

• React
• Quiz API such as Open Trivia DB
• Axios or Fetch API

Portfolio upgrades

• Must add: progress indicator, categories, difficulty settings
• Stretch: timed mode, user accounts, leaderboards
• Polish: smooth transitions, accessible controls, mobile friendly layout

13. React Music Player

This project helps you practice audio playback, custom controls, and UX. It is also a good test for managing user preferences and playlists.

View source code

Prerequisites

• Strong React, HTML, CSS, and JavaScript
• Comfort with APIs and async state

Stack suggested

• React
• Web Audio API or another audio API
• Optional: auth and persistence with Firebase

Portfolio upgrades

• Must add: playlist management, seek bar, volume controls
• Stretch: waveform display, equalizer presets, downloads management
• Polish: keyboard shortcuts, clean responsive player layout

14. React Travel App

This project combines routing, multi API integration, and maps. The sample is inspired by Headout. You can extend it with personalization, bookings, and payments.

View source code

Prerequisites

• Strong React, HTML, CSS, and JavaScript
• API and data manipulation experience

Stack suggested

• React
• React Router
• Google Maps API
• Travel APIs for flights, hotels, and weather
• Optional: auth and persistence with Firebase

Portfolio upgrades

• Must add: search and filters, favorites, map view toggle
• Stretch: booking workflow, payments sandbox, recommendations
• Polish: SEO friendly routing approach, strong error handling, performance

React vs React Native: What is the difference?

React and React Native are related, but they solve different problems.

• React: a JavaScript library for building web user interfaces that run in a browser.
• React Native: a framework for building native mobile apps using platform-specific UI components.

For a deeper breakdown, see React vs React Native.

Portfolio checklist: How to make these projects job-ready

Most GitHub projects are not portfolio-ready by default. Use this checklist on every project you ship.

• Deploy it, include a live demo link in the README
• Add a short README with what you built, key features, setup, and screenshots
• Handle loading and error states, not just the happy path
• Add accessibility basics: labels, focus states, keyboard navigation
• Make it responsive for mobile and desktop
• Add at least one test for a core flow
• Make the configuration safe, do not commit API keys

Wrapping up

You have now seen 14 React projects that progress from basic UI apps to advanced realtime and multi API builds. Pick one project that matches your level, build it, then add the portfolio upgrades before moving on. That build, ship, iterate loop is what turns React knowledge into practical skill.

Frequently asked questions

What are some React projects I can build?

This list includes 14 React projects with source code, ranging from beginner apps like a todo list and calculator to advanced projects like a video call app and a travel app. Pick one based on your current skill level.

Is React good for big projects?

Yes. React is widely used for large applications because it supports component composition, predictable UI patterns, and a broad ecosystem of tooling.

Is React used by Netflix?

Netflix has publicly discussed using React for parts of its web UI, and React is common across many large consumer products. For interview prep, focus on patterns and tradeoffs, not brand name lists.

Is React still in demand in 2026?

React remains one of the most popular web technologies, and it continues to show up across job listings. For best results, pair React with strong JavaScript fundamentals, deployment experience, and one production style framework.

References

1. React Team. Sunsetting Create React App. React.dev. 2025. https://react.dev/blog/2025/02/14/sunsetting-create-react-app
2. Stack Overflow. 2025 Developer Survey, Technology section. Stack Overflow. 2025. https://survey.stackoverflow.co/2025/technology
3. U.S. Bureau of Labor Statistics. Web Developers and Digital Designers, Occupational Outlook Handbook. BLS. Updated 2025. https://www.bls.gov/ooh/computer-and-information-technology/web-developers.htm
4. Headout. Company website. Accessed 2026. https://www.headout.com/