π ππππππ πΏππππππ πΈππππ ππ πΈππππππ ππππ πππππ ππππππ
- important React JS
- React projects
- React Native projects
React JS is critical for creating large web apps for your organization in an agile manner. Data can dynamically get updated in web pages created by you without requiring them to be reloaded at each update trigger. Application UIs can be designed in a scalable, swift, and easy manner. Within the MVC (Model View Controller) template, you can combine the usage of React JS with other frameworks and libraries of JavaScript like AngularJS.
- Easy to Learn ππ»
- Components Are Reusable π
- Optimum Performance with Virtual DOM π₯
- Good Abstraction π
- Complemented by Flux Architecture π
- JSX for Templating π
- Awesome Developer Tools βοΈ
- React Native π±
What does a programmer want after learning a new language/framework? Practice and projects, right? So, Iβm going to tell you some unique projects you can make to practice and improve your React Skills.
Many developers or beginners just learn all the fundamentals concepts but they don't implement those concepts. So Projects are one of the best ways to implement those concepts
These applications are:
- great for improving your coding skills
- great for experimenting with new technologies
- great for adding to your portfolio to impress your next employer/client
- great for using as examples in tutorials (articles or videos)
- easy to complete and also easily extendable with new features
Best React Projects for Beginners in Easy to Hard Order
| Tier | Level |
|---|---|
| 1 | Beginner level React projects |
| 2 | Intermediate level React projects |
| 3 | Advanced React projects |
| 4 | Importance of React projects |
- Choose Only One Project at A Time
- Replicates, But Donβt Copy-Paste the Codes
- Be Curious, Find out Why the Codes Work
- Experiment, and Add Your Own Flavour
- Have Patience and Stay Focused
π - New Project
| Name | Short Description | Tier |
|---|---|---|
| Hello World App | You will install Node on your computer and learn how to initialize a new React App using the βCreate React Appβ command-line interface. Once the new app is created we make minor modifications to display βHello worldβ text on the page. | Beginner |
| Simple Counter | You will build a simple React App which increment/decrements count on-screen when buttons are clicked using React State.element | Beginner |
| Temperature Control App | You will build a temperature control app where users can increment/decrement temperature and the background color changes based on temperature. | Beginner |
| Search Filter | You will build an app that allows users to enter search keys and it filters the user list from the hardcode list based on the entered key | Beginner |
| Basic Registration Form | You will build a basic registration form in React where users can enter first name, last name, and email. Post-registration, an error message is displayed for each field if validation fails else a success message is shown. | Beginner |
| React Quiz App | You will build a simple React quiz app where users can click on option buttons to answer questions, next question rendered each time option is selected and at the end, the final score is displayed. | Beginner |
| React Navbar | You will create a fully responsive navbar on React using CSS grid and flexbox. Additionally, display breadcrumbs with the menu dropdown on mobile screen size. | Beginner |
| User Login app using Auth0 | You will simple authentication app where users can log in using Auth0 and view the user data with an option to log out. | Beginner |
| Todo List | It is a very common app which most React developers can build, demonstrates basic knowledge of React. | Beginner |
| Calculator with React and Flexbox | You will build a calculating app that allows the number to be entered by a click of buttons and perform operations like addition, subtraction, multiplication, etc to produce results. | Beginner |
| Simple Contact List | You will build a contact list app that fetches the list of all users from API and renders each userβs details on a component with βshow ageβ button which displays the age on click. | Beginner |
| Recipe App With React | You will build a simple recipe app that fetches a list of all recipes from external API and provide dynamic search functionality. | Beginner |
| Shopping list app | You will build a shopping list app where users can add new items to the list, increment/decrement each item and the change will reflect in the total | Beginner |
| Weather App in React JS | You will build a Weather app user can enter a city name and then it displays the data related to the Weather of the city through an external API. | Beginner |
| Name | Short Description | Tier |
|---|---|---|
| React Fully Responsive website | You will build a fully responsive website using react with multiple pages. The website will have various animations and support mobile, desktop, and tablet screen sizes. | Intermediate |
| Random Quote Generator | You will build a random quote generator app in React where the user can see randomly generated quotes through external API and generates a new quote the button is clicked. | Intermediate |
| React notes App | You will build a notes app where users can enter text to each note and save it in local storage, delete an existing note, dynamically search among the notes and add character limit. | Intermediate |
| Hangman Game in React | You will implement a hangman game in React where users will guess a hidden word within a set of attempts. The user is shown a βYou wonβ or βGame Overβ message based on whether the word is guessed within the given number of attempts. | Intermediate |
| Basic Registration Form | You will build a basic registration form in React where users can enter first name, last name, and email. Post-registration, an error message is displayed for each field if validation fails else a success message is shown. | Intermediate |
| React Quiz App | You will build a simple React quiz app where users can click on option buttons to answer questions, next question rendered each time option is selected and at the end, the final score is displayed. | Intermediate |
| Netflix clone | This project is a simplified front-end clone of Netflix. It was created with ReactJS, JavaScript, HTML and CSS. It uses TheMovieDB API to display movies and show details like genre, description and score. The data gets updated weekly | Intermediate |
| Medium Clone | Now it's time to use all the concepts that we have learned by making an entire blog app, just like Medium. This app will have all the features of a modern web application. Things like login, signup, adding articles, etc. | Intermediate |
| Airbnb clone | Airbnb clone website using React, Next.js and Tailwind CSS | Intermediate |
| React Pokemon App | Most of us have been huge fans of Pokemon since childhood. You can make a very simple and fun React project using PokeAPI. Here you can fetch the Pokemon details or their characteristics through this API and you can make a fun project using this. Make different cards for each Pokemon and in each card show their pictures, their names, etc. | Intermediate |
| Name | Short Description | Tier |
|---|---|---|
| Chat App in React & Firebase | You will build a chat app where users have to log in through Google through Firebase Auth and access the chat application where they can see existing chats and type new messages which will be stored in Firebaseβs real-time database. | Advanced |
| COVID-19 Tracker | You will build the Covid-19 tracker app which displays graphs for infected, recover cases, and deaths of a country from external API. The country can be changed by selecting another option from the dropdown. | Advanced |
| Slack Clone | You will build a Slack clone where users can enter the existing usernames or add usernames to access the chat page where a list of users with status (online/offline) is displayed with chat room messages. Further, you can add new messages to the chat room. | Advanced |
| Photo Gallery App | You will build a photo gallery app where users can upload a new file that is stored in the Firebase Realtime database and view a list of uploaded files in a grid format. Users can click on any image to view it as a popup along with animations added to all the transitions. | Advanced |
| Lyric Search App | You will build a Lyric Search app that allows users to type lyrics and search for music based on it using an external API. | Advanced |
| Budget Management App | You will build a budget Management app that shows the total budget, remaining and sent so far along with the list of expenses. It also has the functionality to add new expenses and delete the existing expense.. | Advanced |
| Build an Expense Tracker | You will build an expense Tracer app that shows the net balance, income, expense, and list of all transactions so far. It also has the functionality to add new transactions and delete the existing transaction along with reflecting the new changes. Additionally, the hangman figure is shown using HTML canvas based on the progress of the user.. | Advanced |
| Building Tetris in React | You will build a Tetris game using React where you can start the game, rearrange incoming blocks using the keyboard inputs and display βGame overβ if the block collides with the top. Additionally functionality to clear blocks if 2 same colors of blocks are aligned correctly. | Advanced |
| GitHub Jobs React App | You will build a Github Jobs App where users can view the list of all jobs sent from Github Jobs API and expand each selected job. In addition, they can search for jobs by description and location. | Advanced |
| YouTube Clone | You will build a YouTube clone on React with a YouTube homepage, trending tabs, video watch page with comments. All the information for the project is real data sent from YouTube Data API V3. | Advanced |
| Voice Assistant App | You will build a Voice Assistant App using React with Alan AI which allows users to search for the latest news, news by terms, categories, and source by voice control. Additionally, the AI in the app will read each news, scroll by itself, and allow you to open news article links by voice control. The page will be fully responsive to support desktop, tablet, and mobile screen sizes. | Advanced |
| React Cryptocurrency Application | Cryptocurrency is always popular among young stars. What if we make a React Project where the users can get daily price updates of the crypto coins... | Advanced |
| E-Commerce Application | We all love shopping via online E-Commerce applications. You can also create your full-stack E-commerce application using MERN(MongoDB, Express, React, and Node) stack which can be considered as a great advanced level React Project. You can add all the functionalities like user ... | Advanced |
| Social Media App | Yes, you may be confused by this point, because the market is overwhelmed with a range of popular social platforms, and there are enough leaders like YouTube, Instagram, TikTok or Twitter, though who knows, every day we see new trends and newcomers ... | Advanced |
Contributions are always welcome!
See contributing.md for ways to get started.
Distributed under the no License. See LICENSE.txt for more information.
Your Name - @twitter_handle - sashenjayathilaka95@gmail.com