Learn React.js through hands-on projects

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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