React Project Ideas Save

About

This repository is a collection of reactjs projects. It is created so that everyone who wants to learn reactjs can use this repository as a single source of modern web projects. Also this repository is created to build an open source community where developers can add their projects day wise and contribute to it.

How about you add your own project and support this repository! Have any?

This is a free to use repository, you can clone any project from here and use it for your own purpose. And if you do find this repo useful, why not to :star: it?!

Our Website

Codinn is an amazing platform for junior to senior level developers who wish to enhance their knowledge in the field of Web application. We are focussing on building community of millions of people around the world who are learning to write good quality code together. You can learn to code with free projects, code snippets and interview preparation for the tech jobs. Happy coding!

Installation Guide

Install Node.js and npm: If you haven’t already, you’ll need to install Node.js and npm (which comes with Node.js). You can download Node.js from the official website. To check if you have Node.js installed, run this command in your terminal:

node -v

To confirm that you have npm installed, run:

npm -v

Clone the Repository: Navigate to the directory where you want to clone the repository and run the following command:

git clone https://github.com/Vasu7389/react-project-ideas.git

Navigate to the Project Directory: Change to the directory of the project you want to work on. For example, if you want to work on the first project, you would do:

cd react-project-ideas/project-1

Install Dependencies: Once you’re in the project directory, you can install the necessary dependencies by running:

npm install

Start the Development Server: After all dependencies are installed, you can start the development server by running:

npm start

Now, you should be able to see the project running at http://localhost:3000 in your web browser.

ReactJs Projects

Day 1 - counter-game | Demo

In this challenge you will be developing a counter game in which you can click a button to increase the count value. This you can play with your friends and challenge them to click click click... as much as possible in a given time.

How-to Run:

git clone https://github.com/Vasu7389/react-project-ideas.git

cd react-project-ideas

cd day001/counter-game

npm install

npm start

Day 2 - custom-form | Demo

In this challenge you will be developing a reusable custom form component in which you can add as much input fields and buttons as you want. You can use that component in your future projects too to have a login form, registration form or a data creation/updation form for any CRUD functionality.

How-to Run:

git clone https://github.com/Vasu7389/react-project-ideas.git

cd react-project-ideas

cd day002/custom-form

npm install

npm start

Day 3 - tic-tac-toe | Demo

In this challenge we will develop a tic-tac-toe game using react basic concepts with little JS programming logic around that.

How-to Run:

git clone https://github.com/Vasu7389/react-project-ideas.git

cd react-project-ideas

cd day003/tik-tac-toe

npm install

npm start

Day 4 - stopwatch | timer | Demo

In this challenge we will develop a stopwatch and a timer using basic React concepts with little JS programming logic around that.

How-to Run:

git clone https://github.com/Vasu7389/react-project-ideas.git

cd react-project-ideas

cd day004/stopwatch

npm install

npm start

Day 5 - snake-game | Demo

In this challenge we will develop the snake game using useState, useEffect, useRef along with the basic JS concepts.

How-to Run:

git clone https://github.com/Vasu7389/react-project-ideas.git

cd react-project-ideas

cd day005/snake-game

npm install

npm start

Day 6 - dino-game | Demo

In this challenge we will develop a game which you might already had played in Google Chrome when internet gets disconnected, that is 'The Dino Game'. We will develop the same game in this challenge using useRef, useEffect, useState hooks, setTimeout & setInterval. You will learn how to manipulate css styling based on some JS conditions. And how to get react jsx elements using useRef.

How-to Run:

git clone https://github.com/Vasu7389/react-project-ideas.git

cd react-project-ideas

cd day006/dino-game

npm install

npm start

Day 7 - JIRA: drag-drop | Demo

In this challenge we will develop a drag-drop JIRA board without any external library. You will learn how to make a html element draggable and how to make a div to catch that draggable element. JS events used in this challenge are onDragOver, onDrop, onDragStart.

How-to Run:

git clone https://github.com/Vasu7389/react-project-ideas.git

cd react-project-ideas

cd day007/drag-drop

npm install

npm start

Day 8 - input of tags | Demo

In this challenge we will develop an input box which can add tags without any external library. Only with just one component you can have an input box with the capability to input tags. There will be only one state which will carry all the user inputs with the help of onKeyUp JS event.

How-to Run:

git clone https://github.com/Vasu7389/react-project-ideas.git

cd react-project-ideas

cd day008/tags-input

npm install

npm start

Day 9 - shoppinn | Demo

In this tutorial we will develop a shopping website using Reactjs Context API. This tutorial will teach you to develop an e-commerce website with basic functionality i.e. show products, add to cart, review and checkout and place & view orders.

How-to Run:

git clone https://github.com/Vasu7389/react-project-ideas.git

cd react-project-ideas

cd day009/shoppin

npm install

npm start

Day 10 - Personal-Portfolio | Demo

In this tutorial we will develop a personal portfolio website using Reactjs. This tutorial will teach you how you can develop your own modern 2023 ready personal portfolio website using reactjs, html & css.
The development process is simple and we won't do any API calls. Content/Text for this website will be hardcoded in your components.

How-to Run:

git clone https://github.com/Vasu7389/react-project-ideas.git

cd react-project-ideas

cd day010/tpersonal-portfolio

npm install

npm start

Day 11 - shopping_cart

Explore the development journey of a cutting-edge shopping cart application leveraging Tailwind CSS, Next.js, and Redux Toolkit. Learn to craft a seamless, responsive shopping experience by harnessing the power of these technologies.

This project emphasizes shopping cart functionality and was crafted by Abdullah Moiz.

*Demo and tutorial is not available on codinn yet.

How-to Run:

git clone https://github.com/Vasu7389/react-project-ideas.git

cd react-project-ideas

cd day011/shopping_cart

npm install

npm start

Day 12 - sticky_notes

In this project, we'll dive into crafting an engaging Sticky Notes application employing custom hooks and the Context API. Learn how to build visually appealing, functional notes using these advanced techniques in React.

This was crafted by drbarzaga.

*Demo and tutorial is not available on codinn yet.

How-to Run:

git clone https://github.com/Vasu7389/react-project-ideas.git

cd react-project-ideas

cd day012/sticky-notes

npm install

npm start

Day 13 - music_player

In this project, we are going to create a minimalist music player that will be useful for our work sessions or to relax a bit. To achieve this, we will use some tracks available on Bensound for free. Additionally, we will employ custom hooks, the Context API, animations, and learn how to use HTML components like audio within React, enabling us to manage audio in our React applications.

This was crafted by drbarzaga.

*Demo and tutorial is not available on codinn yet.

How-to Run:

git clone https://github.com/Vasu7389/react-project-ideas.git

cd react-project-ideas

cd day013/music-player

npm install

npm start

Contributions

Feel free to send a pull request to add more reactjs projects. We are open for your feedback!

Contribution Guidelines

We welcome and appreciate all contributions to react-project-ideas! Here's how you can contribute:

Reporting Issues

If you find a bug or have a suggestion for a new feature, please create a new issue. When creating an issue, try to provide as much detail as possible, including steps to reproduce the issue, your environment (e.g., browser, operating system), and screenshots if applicable.

Submitting Pull Requests

If you'd like to contribute code, documentation, or other assets, you can create a pull request (PR). Here's a basic workflow:

1. Fork the Repository: Click the 'Fork' button at the top-right of the page to create your own copy of the repository.

2. Clone Your Fork: Clone your fork to your local machine with git clone https://github.com/YOUR_USERNAME/react-project-ideas.git.

3. Create a Branch: It's common practice to create a new branch for each PR. You can create a branch with git checkout -b BRANCH_NAME.

4. Make Your Changes: Make your changes and commit them with git commit -m "Your detailed commit message".

5. Push Your Changes: Push your changes to your fork with git push origin BRANCH_NAME.

6. Create a Pull Request: Go to your fork on GitHub and click the 'New pull request' button. Fill out the PR form and click 'Create pull request'.

Please note that this is a general workflow and the specific steps may vary depending on the project. Always check the project's README or CONTRIBUTING guide for project-specific instructions.

Code of Conduct

We're committed to fostering an open and welcoming environment. Please read and follow our Code of Conduct.

---

License

MIT