Top 10 ReactJs Projects and Source code

1.Chat app - Build a real-time chat app that allows users to communicate with one another with example programming codes.

Here's an example of a simple to-do list app using ReactJS:

import React, { useState } from 'react';

function App() {

const [tasks, setTasks] = useState([]);

const [newTask, setNewTask] = useState('');

Create a component for your chat app that includes a login form:

const handleAddTask = () => {

if (newTask.trim() !== '') {

setTasks([...tasks, newTask]);

setNewTask('');

}

};

const handleRemoveTask = (index) => {

const newTasks = [...tasks];

newTasks.splice(index, 1);

setTasks(newTasks);

};

return (

<div>

<input

type="text"

value={newTask}

onChange={(e) => setNewTask(e.target.value)}

<ul>

{tasks.map((task, index) => (

{task} <button onClick={() => handleRemoveTask(index)}>x</button>

</li>

))}

</ul>

</div>

);

}

export default App;

In this example, we're using the useState hook to manage the state of the tasks and the input field for adding new tasks. The handleAddTask function is called when the user clicks the "Add Task" button, and it adds the new task to the list of tasks if it's not an empty string. The handleRemoveTask function is called when the user clicks the "x" button next to a task, and it removes that task from the list. The tasks array is rendered as a list using the map function, and each task has a corresponding "x" button that calls handleRemoveTask with the task's index.

2.Weather app - Build an app that displays the current weather conditions for a particular location with example programming code.

Set up your project and install the necessary dependencies, such as axios and react-icons:

npx create-react-app my-weather-app

cd my-weather-app

npm install axios react-icons

Create a component for your weather app that includes a form to allow users to search for a location:

import React, { useState } from 'react';

function WeatherApp() {

const [query, setQuery] = useState('');

const [weather, setWeather] = useState({});

const search = async (e) => {

if (e.key === 'Enter') {

const data = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${query}&appid={YOUR_API_KEY}&units=metric`);

const result = await data.json();

setWeather(result);

setQuery('');

}

};

return (

<input

type="text"

placeholder="Search..."

value={query}

onChange={(e) => setQuery(e.target.value)}

onKeyPress={search}

{weather.main && (

{weather.name}, {weather.sys.country}

</div>

<div className="weather-temperature">{Math.round(weather.main.temp)}°C</div>

<div className="weather-condition">{weather.weather[0].main}</div>

<div className="weather-wind">Wind: {weather.wind.speed} m/s</div>

</div>

)}

</div>

);

}

export default WeatherApp;

Set up an API to fetch weather data from a weather service provider, such as OpenWeatherMap.

Create a state object that includes the current weather data and the location data.

Create a function to handle the form submission and call the API to fetch the weather data.

Display the weather data in the interface, including the current temperature, weather conditions, and wind speed.

Use react-icons to display the current weather condition icon.

Use CSS to style the app and make it visually appealing.

Note: To use this example, you need to replace {YOUR_API_KEY} with your OpenWeatherMap API key. Also, this example only displays the temperature in Celsius, but you can change it to Fahrenheit or Kelvin by modifying the API request URL.

3.Music player app - Create a music player app that allows users to stream music and create playlists. with example programming code

import React, { useState, useEffect } from "react";

import MusicPlayer from "react-responsive-music-player";

const MusicApp = () => {

const [songs, setSongs] = useState([]);

const [currentSongIndex, setCurrentSongIndex] = useState(0);

const [isPlaying, setIsPlaying] = useState(false);

const [isLooping, setIsLooping] = useState(false);

const [isShuffling, setIsShuffling] = useState(false);

// Fetch songs from server on component mount

useEffect(() => {

fetch("https://api.example.com/songs")

.then((response) => response.json())

.then((data) => {

setSongs(data);

});

}, []);

// Play or pause the current song

const handlePlayPause = () => {

setIsPlaying(!isPlaying);

};

// Play the previous song

const handlePrevSong = () => {

setCurrentSongIndex(currentSongIndex === 0 ? songs.length - 1 : currentSongIndex - 1);

setIsPlaying(true);

};

// Play the next song

const handleNextSong = () => {

setCurrentSongIndex(currentSongIndex === songs.length - 1 ? 0 : currentSongIndex + 1);

setIsPlaying(true);

};

// Toggle loop mode

const handleLoop = () => {

setIsLooping(!isLooping);

};

// Toggle shuffle mode

const handleShuffle = () => {

setIsShuffling(!isShuffling);

};

return (

<MusicPlayer

playlist={songs}

currentTrackIndex={currentSongIndex}

isPlaying={isPlaying}

isLooping={isLooping}

isShuffling={isShuffling}

onPlayPauseClick={handlePlayPause}

onPrevTrackClick={handlePrevSong}

onNextTrackClick={handleNextSong}

onLoopClick={handleLoop}

onShuffleClick={handleShuffle}

</div>

);

};

export default MusicApp;

This code uses the useState hook to manage the state of the app, including the songs, the index of the current song, and the play/pause, loop, and shuffle modes. It also uses the useEffect hook to fetch the list of songs from a server when the component mounts.

The music player UI is created using the MusicPlayer component from the react-responsive-music-player library. The playlist, currentTrackIndex, isPlaying, isLooping, and isShuffling props are passed to the MusicPlayer component to control its behavior, while the onPlayPauseClick, onPrevTrackClick, onNextTrackClick, onLoopClick, and onShuffleClick callbacks are used to handle user interactions with the music player.

4.Social media app - Build a social media platform that allows users to create profiles, connect with others, and share content with programming code

Building a social media platform is a complex project that requires a lot of coding and design work. Here is a high-level overview of some of the components you might need to build a social media app using ReactJS:

User authentication: Users need to be able to create accounts, log in, and reset their passwords. This requires creating a login and registration page, implementing a secure authentication flow, and handling user data in a database.

User profiles: Users need to be able to create and manage their profiles. This includes uploading a profile picture, creating a bio, and adding other personal information.

Connections: Users need to be able to connect with each other. This requires implementing a friend request system, allowing users to follow each other, and displaying user connections in a user's profile.

Newsfeed: Users need to be able to view and interact with content from their connections. This requires creating a newsfeed that displays content from the user's connections, such as posts, photos, and videos.

Messaging: Users need to be able to send messages to each other. This requires creating a messaging system that allows users to send and receive messages, and handling message data in a database.

Here is an example of some ReactJS code that might be used to create a user profile page:

import React, { useState, useEffect } from 'react';

import { useParams } from 'react-router-dom';

import { getUserProfile } from './api';

function UserProfile() {

const [userProfile, setUserProfile] = useState(null);

const { userId } = useParams();

useEffect(() => {

getUserProfile(userId).then((data) => {

setUserProfile(data);

});

}, [userId]);

if (!userProfile) {

return <div>Loading...</div>;

}

return (

<div>

<h2>{userProfile.name}</h2>

<p>{userProfile.bio}</p>

</div>

);

}

export default UserProfile;

In this example, the UserProfile component retrieves the user's profile information using the getUserProfile function from an api module. The component uses React's useEffect hook to fetch the user's profile data when the userId parameter changes in the URL. If the userProfile state variable is null, the component displays a loading message. Once the user's profile data is available, the component displays the user's name, avatar, and bio.

5.Recipe app - Create an app that displays recipes and allows users to search and filter based on ingredients with programming code

To create a recipe app that allows users to search and filter based on ingredients, you will need to:

Create a database of recipes and their ingredients.

Create a search function that queries the database for recipes that match the user's search terms.

Create a filter function that filters the search results based on the user's selected ingredients.

Here is an example of some ReactJS code that might be used to display a list of recipes:

import React, { useState, useEffect } from 'react';

import { getRecipes } from './api';

function RecipeList() {

const [recipes, setRecipes] = useState([]);

const [searchTerm, setSearchTerm] = useState('');

const [selectedIngredients, setSelectedIngredients] = useState([]);

useEffect(() => {

getRecipes().then((data) => {

setRecipes(data);

});

}, []);

const handleSearchTermChange = (event) => {

setSearchTerm(event.target.value);

};

const handleIngredientSelect = (ingredient) => {

if (!selectedIngredients.includes(ingredient)) {

setSelectedIngredients([...selectedIngredients, ingredient]);

}

};

const handleIngredientDeselect = (ingredient) => {

setSelectedIngredients(selectedIngredients.filter((i) => i !== ingredient));

};

const filteredRecipes = recipes.filter((recipe) => {

const ingredients = recipe.ingredients.map((i) => i.toLowerCase());

const searchTermMatches = ingredients.some((i) => i.includes(searchTerm.toLowerCase()));

const selectedIngredientsMatches = selectedIngredients.every((i) => ingredients.includes(i.toLowerCase()));

return searchTermMatches && selectedIngredientsMatches;

});

return (

<div>

<h2>Recipes</h2>

<div>

<h3>Selected Ingredients</h3>

{selectedIngredients.map((ingredient) => (

<span>{ingredient}</span>

<button onClick={() => handleIngredientDeselect(ingredient)}>X</button>

</div>

))}

</div>

{filteredRecipes.map((recipe) => (

<h3>{recipe.name}</h3>

<ul>

{recipe.ingredients.map((ingredient, index) => (

<li key={index}>{ingredient}</li>

))}

</ul>

</div>

))}

</div>

);

}

export default RecipeList;

In this example, the RecipeList component retrieves a list of recipes using the getRecipes function from an api module. The component uses React's useState hook to manage the searchTerm and selectedIngredients state variables, which are used to filter the recipe list based on the user's input. The component also defines handleSearchTermChange, handleIngredientSelect, and handleIngredientDeselect functions to update the searchTerm and selectedIngredients state variables.

The component filters the list of recipes using the filteredRecipes variable, which uses the filter method to search for recipes that match the searchTerm and have all the selectedIngredients. The component then displays the filtered recipes and the selected ingredients.

6.Movie search app - Build an app that allows users to search for and view information about their favorite movies with programming code.

Here is an example of programming code for a movie search app using ReactJS and the Open Movie Database API (OMDb API):

import React, { useState } from "react";

function MovieSearch() {

const [query, setQuery] = useState("");

const [movies, setMovies] = useState([]);

const handleChange = (event) => {

setQuery(event.target.value);

};

const handleSubmit = async (event) => {

event.preventDefault();

const url = `http://www.omdbapi.com/?apikey=your_api_key&s=${query}`;

const response = await fetch(url);

const data = await response.json();

setMovies(data.Search);

};

return (

<div>

<button type="submit">Search</button>

</form>

<ul>

{movies.map((movie) => (

<h2>{movie.Title}</h2>

<p>Year: {movie.Year}</p>

</li>

))}

</ul>

</div>

);

}

export default MovieSearch;

In this example, we use the useState hook to manage the state of the search query and the list of movies that match the query. The handleChange function updates the query as the user types, and the handleSubmit function fetches the movie data from the OMDb API and updates the state of the movies array.

We then render a form with an input field and a submit button. When the form is submitted, we map over the movies array and display the movie title, poster, and release year for each movie that matches the query.

Note that you will need to replace your_api_key in the url variable with a valid API key from the OMDb API.

7.Quiz app - Create an interactive quiz app that can be used for educational purposes with programming code.

Here is an example of programming code for a quiz app using ReactJS:Quiz app - Create an interactive quiz app that can be used for educational purposes with programming code.

Here is an example of programming code for a quiz app using ReactJS:

import React, { useState } from "react";

function Quiz() {

const questions = [

{

questionText: "What is the capital of France?",

answerOptions: [

{ answerText: "Berlin", isCorrect: false },

{ answerText: "London", isCorrect: false },

{ answerText: "Paris", isCorrect: true },

{ answerText: "Madrid", isCorrect: false },

{

questionText: "What is the largest country in the world?",

answerOptions: [

{ answerText: "Canada", isCorrect: false },

{ answerText: "Russia", isCorrect: true },

{ answerText: "China", isCorrect: false },

{ answerText: "United States", isCorrect: false },

{

questionText: "Who invented the telephone?",

answerOptions: [

{ answerText: "Alexander Graham Bell", isCorrect: true },

{ answerText: "Thomas Edison", isCorrect: false },

{ answerText: "Benjamin Franklin", isCorrect: false },

{ answerText: "Nikola Tesla", isCorrect: false },

];

const [currentQuestion, setCurrentQuestion] = useState(0);

const [showScore, setShowScore] = useState(false);

const [score, setScore] = useState(0);

const handleAnswerOptionClick = (isCorrect) => {

if (isCorrect) {

setScore(score + 1);

}

const nextQuestion = currentQuestion + 1;

if (nextQuestion < questions.length) {

setCurrentQuestion(nextQuestion);

} else {

setShowScore(true);

}

};

return (

{showScore ? (

You scored {score} out of {questions.length}

</div>

) : (

<span>Question {currentQuestion + 1}</span>/{questions.length}

</div>

{questions[currentQuestion].questionText}

</div>

{questions[currentQuestion].answerOptions.map((answerOption) => (

<button

key={answerOption.answerText}

onClick={() =>

handleAnswerOptionClick(answerOption.isCorrect)

}

{answerOption.answerText}

</button>

))}

</div>

</>

)}

</div>

);

}

export default Quiz;

In this example, we define an array of quiz questions, each of which contains a question text and an array of answer options. We use the useState hook to manage the state of the current question, the show score flag, and the user's score.

We render the quiz question and answer options by mapping over the questions array and using conditional rendering to display the user's score when the quiz is complete.

When the user clicks an answer option, we update the user's score and move to the next question, or show the user's score if all questions have been answered.

8.Calendar app - Create a calendar app that allows users to schedule events and appointments with programming code.

Here is an example of how to create a calendar app using ReactJS:

import React, { useState } from 'react';

import moment from 'moment';

const CalendarApp = () => {

const [date, setDate] = useState(moment());

const prevMonth = () => {

setDate(date.clone().subtract(1, 'month'));

};

const nextMonth = () => {

setDate(date.clone().add(1, 'month'));

};

const daysInMonth = () => {

return date.daysInMonth();

};

const firstDayOfMonth = () => {

return moment(date).startOf('month').format('d');

};

const renderCalendar = () => {

const blanks = [];

for (let i = 0; i < firstDayOfMonth(); i++) {

blanks.push(<td key={i * 100}></td>);

}

const days = [];

for (let d = 1; d <= daysInMonth(); d++) {

days.push(

{d}

</td>

);

}

const totalSlots = [...blanks, ...days];

const rows = [];

let cells = [];

totalSlots.forEach((row, i) => {

if (i % 7 !== 0) {

cells.push(row);

} else {

rows.push(cells);

cells = [];

cells.push(row);

}

if (i === totalSlots.length - 1) {

rows.push(cells);

}

});

const renderDays = () => {

return rows.map((row, i) => {

return (

{row}

</tr>

);

});

};

return (

<table>

<thead>

<tr>

{date.format('MMMM YYYY')}

</th>

</tr>

<tr>

</tr>

</thead>

<tbody>

{renderDays()}

</tbody>

</table>

);

};

return (

<div>

{renderCalendar()}

</div>

);

};

export default CalendarApp;

This code creates a simple calendar app that allows users to navigate between months and displays the days of the month in a table format. You can add additional functionality to allow users to schedule events and appointments by adding form elements and handling their submission.

9.E-commerce site - Build an online store using ReactJS and integrate payment processing with programming code.

Building an e-commerce site using ReactJS and integrating payment processing can be a complex project with many different components. Here is a basic outline of what the project might entail, along with some example code for specific features.

Set up the project and create the basic layout:

import React from 'react';

function App() {

return (

<div>

<h1>My Online Store</h1>

</header>

<main>

// add components for product listings, shopping cart, etc.

</main>

</div>

);

}

export default App;

Create components for displaying products:

function ProductList(props) {

return (

<div>

{props.products.map((product) => (

<Product

key={product.id}

id={product.id}

name={product.name}

price={product.price}

image={product.image}

))}

</div>

);

}

function Product(props) {

return (

<div>

<h3>{props.name}</h3>

<p>${props.price}</p>

<button onClick={() => props.addToCart(props.id)}>Add to cart</button>

</div>

);

}

Add functionality for adding and removing items from the shopping cart:

function ShoppingCart(props) {

return (

<div>

<h2>Shopping Cart</h2>

{props.items.length === 0 ? (

<p>Your cart is empty.</p>

) : (

<ul>

{props.items.map((item) => (

{item.name} - ${item.price}{' '}

<button onClick={() => props.removeFromCart(item.id)}>

Remove

</button>

</li>

))}

</ul>

)}

<p>Total: ${props.total}</p>

<button onClick={props.checkout}>Checkout</button>

</div>

);

}

Set up the payment processing with a payment gateway like Stripe:

import { loadStripe } from '@stripe/stripe-js';

const stripePromise = loadStripe('your_stripe_public_key');

function CheckoutForm(props) {

const handleSubmit = async (event) => {

event.preventDefault();

const stripe = await stripePromise;

const { error } = await stripe.redirectToCheckout({

lineItems: props.items.map((item) => ({

price: item.priceId,

quantity: item.quantity,

})),

mode: 'payment',

successUrl: window.location.origin + '/success',

cancelUrl: window.location.origin + '/cancel',

});

if (error) {

console.log(error);

}

};

return (

Checkout

</button>

</form>

);

}

This is just a brief overview of what an e-commerce site built with ReactJS and payment processing might look like. The actual implementation would likely be more complex and involve additional features, such as user authentication, order tracking, and inventory management.

10.To-do list app - A simple app that allows users to create a list of tasks they need to complete with programming code.

Here's an example of a simple to-do list app using ReactJS:

import React, { useState } from 'react';

function App() {

const [tasks, setTasks] = useState([]);

const [newTask, setNewTask] = useState('');

const handleAddTask = () => {

if (newTask.trim() !== '') {

setTasks([...tasks, newTask]);

setNewTask('');

}

};

const handleRemoveTask = (index) => {

const newTasks = [...tasks];

newTasks.splice(index, 1);

setTasks(newTasks);

};

return (

<div>

<input

type="text"

value={newTask}

onChange={(e) => setNewTask(e.target.value)}

<ul>

{tasks.map((task, index) => (

{task} <button onClick={() => handleRemoveTask(index)}>x</button>

</li>

))}

</ul>

</div>

);

}

export default App;

Recents in Beach

Top 10 ReactJs Projects and Source code