Learn React.js Through
Hands-on Projects

Develop a recipe search application with filtering, favorites, and detailed recipe instructions.

Display and update a number using buttons. A simple counter that can be incremented or decremented.

Add, display, and remove tasks. A basic to-do list app that saves tasks to local state.

Fetch and display weather data from an API. Displays current weather information based on user location or search parameters.

Perform basic arithmetic operations. A simple calculator for addition, subtraction, multiplication, and division.

Use an external API to search for movies. Fetches movie data and displays search results.

Display a collection of images. A basic app to import and showcase a series of images.

Store and display favorite quotes. Allows users to add and view their favorite quotes.

Fetch quiz questions and options from an API. An interactive quiz app with multiple-choice questions.

Create, edit, and delete notes. A simple note-taking application.

Record and display expenses. Users can add, edit, and remove expenses, and view summaries.

Convert markdown input to HTML. An app where users write in markdown and see a live preview.

Fetch and display random jokes from an API. Users can click a button to see a new joke.

Display products with image, description, and price. A simple static product page for an e-commerce application.

Convert units between different measures (length, weight, etc.). A basic unit converter with common conversions.

Slide through a series of images. Users can manually scroll through images or set an automatic slideshow.

Display blog posts from static data. A minimal blog display with a list of posts and individual pages.

Count the words and characters of input text. A text box where users input text to see a word count.

Create, view, and flip flashcards. Users create flashcards to study various topics.

Start, stop, and reset a stopwatch. A digital stopwatch with basic control buttons.

Integrated map display with weather data overlays. Displays weather data on an interactive map using an API.

Static pages displaying personal information and projects. A customizable portfolio site using React components.

Create a card matching game. Users match cards in pairs to win the game.

Calculate Body Mass Index based on input values. Users input height and weight to calculate BMI.

Convert one currency to another using API exchange rates. An app to convert amounts between different currencies.

Design a user interface for a chat application. A static front-end for a messaging service.

Implement a searchable list of items. Filters through a list of data based on user input.

Display a list of recipes using static data. Users browse through a static collection of recipes.

Display current time and update every second. A digital clock displaying the current local time.

Form with input validation and submission handling. A user input form with basic validation rules.

Display user information and activity overview. A static social media dashboard with widgets.

Use GitHub API to fetch user profiles. Search and display GitHub user data such as repos and followers.

Implement a color selection tool. Users select colors from a palette and see HEX/RGB values.

Display infographic data with charts. Renders complex data into visual infographics.

Calculate loan payments based on input values. Users calculate monthly payments and interest for loans.

Implement a timeline to display a series of events. A graphical timeline of events with descriptions.

Create a virtual on-screen keyboard. An interactive keyboard simulator for input fields.

Basic audio player with play, pause, and skip functionalities. Plays a playlist of audio files.

Add and track daily habits. Users create habits and log daily progress.

Implement the classic 2048 tile game. A board game where users combine numbers to reach 2048.

Track and manage job applications. Users add jobs and track their application status.

Display a product list and manage a shopping cart. Users add and remove items from a virtual shopping cart.

Collect and display feedback from users. Users submit feedback that is stored and displayed.

Design UI elements for a text-based adventure game. A static interface for navigating a story-driven game.

Track live stock prices using an API. Displays real-time stock data with user-selected companies.

Search and display emojis from a dataset. Users search for and select emojis to use.

Apply filters and adjustments to images. Users can edit images using basic tools like cropping.

Track expenses and create budgets. Users input financial data to manage personal budgets.

Add, search, and delete contacts. Users manage a list of personal or professional contacts.

Drawing app using SVG elements. A web-based drawing tool with simple graphic editing features.

Display a calendar of events. Users view upcoming events in a calendar format.

Create and navigate through an interactive story. Users build and read interactive choose-your-own-adventure stories.

Generate strong passwords based on user criteria. Users customize the length and elements of generated passwords.

Create memes from custom text and images. An app where users can design memes with existing templates.

Track time spent on tasks. Users track how much time they spend on various tasks.

Drag and drop files to upload to a server. A user interface for uploading files, with progress tracking.

Display restaurant menu and categories. Users browse through a digital menu by categories such as appetizers or desserts.

Pomodoro timer for productivity. Implements the Pomodoro technique to enhance focus with timed intervals.

Design UI similar to Twitter for browsing posts. A static interface with Tweet-like posts and user interactions.

Fetch and display the latest news articles from an API. Users can read the current news from various sources in different categories.

Implement light and dark mode toggling. A simple UI switch that changes the site's theme colors.

Log workouts and track progress over time. Users record and analyze their fitness routines.

Design a UI for viewing cryptocurrency balances. Displays crypto balances and transaction history.

Translate text between languages using an API. Provides a tool for translating text submitted by users.

Display a collection of video thumbnails and details. A static interface to showcase videos and their metadata.

Calculate estimated income tax from user input. Lets users input financial data to calculate tax liability.

Submit and display film reviews. Users write reviews for movies they've seen and rate performances.

Display air quality data using an API. Users check real-time air quality metrics by location.

Test website layouts for responsiveness. Users emulate mobile views and check for responsive design compatibility.

Search and display pets for adoption. Users search and view details about pets looking for homes.

Implement a calculator capable of plotting graphs. Users input functions to see graphed visualizations.

Implement basic voice commands for app navigation. Uses browser APIs to control app UI through voice commands.

Display an online bookstore with categorized books. A static UI with categories like fiction, non-fiction, and children's books.

Fetch and display a new quote minutes. Automatically updates with inspiring quotes each day.

Calculate calories from recipe ingredients. Users input ingredients to calculate the recipe's nutritional info.

Implement a drag-and-drop Kanban board to manage tasks. Users visualize task progress in a Kanban style layout.

Create a basic chatbot for queries. Responds to specific questions with pre-set responses.

Users create and participate in polls. Users vote on polls and view the results graphically.

Plan and organize workout routines. Users set up detailed workout schedules by activity and duration.

Visualize sound waves and frequencies of audio input. React visualizes audio input through dynamic graphs.

Display details of employees in a company. Users browse employee profiles with job titles and contact info.

Fetch nutritional information using a food database API. Users get detailed nutrition facts and components for foods.

Users rate and review recipes in a collection. Implements a star rating system for displayed recipes.

Use flashcards to learn new vocabulary in another language. Users track progress by using flashcards for language studies.

Track multiple loans and view payment progress over time. Users see cumulative payment history and remaining balance for loans.

Users write and organize daily journal entries. Logs user's thoughts or events in entries stored by date.

Implement a quiz with a scoring system and leaderboard. Displays top scorers and current user progress after quizzes.

Schedule and track plant watering and care. Helps users remember plant care needs and routines.

Visual display and information on elements. Users learn about chemical elements and their properties.

Create customizable greeting cards. Users input custom text and images to create digital greeting cards.

Calculate and visualize astrological charts for users. Users input info to see star positions and horoscopes.

Browse movies and reserve tickets. Users book movie showtimes and seats through a simple interface.

Include a timer in the trivia quiz app. Adds a challenge by setting time limits on question responses.