loading...
Cover image for 30 React Apps

30 React Apps

hj profile image OccludeJS Updated on ・5 min read

30 Apps (2 Part Series)

1) 30 React Apps 2) 30 Javascript Projects Add To Your Portfolio and Get Hired

Somebody messaged me on twitter and asked.

How to learn to react effectively?

And there I advised him with, you can work on projects to learn effectively and that would be best practice to commit and develop skills

And the same I am going to share here with Dev community, grab your keyboard and your todo list, and make sure to enter these in your todo list!

Mention

As DevTo policy I cannot share the links to other projects, but I am too working on these so I would be confidentially sharing the link to my projects.


About Me

Hey, Devs,
Hemant on the other side 😼, I am an 18-year-old Developer and I love System Designing, Frontend Development, and Backend as well.

Here Is a list of 30 React Apps which you can make to develop skills and become frontend master.

Count Fron 1 To 30 And Pick what you like and add it to your todo list!



Beginner

1. YouTube Clone

Live Preview : https://youtube-clone-hemant.herokuapp.com/

GitHub Code :

GitHub logo 8bithemant / Youtube-Clone

Youtube Clone ,built using ReactJS , Material UI and the API used is Youtube V3 data API , With max search result set to 5.

Youtube Clone is the best way to begin with fetching and displaying the data from API in react, and you can get the API key from Google dev console.

2. Covid-19 Tracker

Live Preview: https://covid19-trackerv1.herokuapp.com/

GitHub:

GitHub logo 8bithemant / Covid-19-Tracker

This is basic built covid 19 tracker completely buil in ReactJS this is used to track the total cases, total recovered also the total deaths and can to set to global or local country . To make the data more transparent the graphs are also added to the website where one can study data in a precise manner , for global data study the line graph is added and for local country the bar graph is added which makes the website more accurate. The use of API makes the data accurate and accurate updates in time.

Making a Covid-19 tracker is the most and popular job to do so and you can build it by the public API key available on Google, and I would recommend you should go for it!

3. React Weather App

GitHub:

GitHub logo 8bithemant / React-Weather-App

React Weather App built with love and javascript, API used: OpenWeather.org

4. Flappy Bird Game

Live Preview: https://8bithemant.github.io/flappybird.github.io/

GitHub:

Making Flappy bird game is the best option, it can let you learn objects in js and basics of react, as you have to deal with gravity and speed at the same time!

5. Music Player

Use the Spotify API to create an application that lets you discover music. It will help you find top songs, trending artists, and explore new genres.

6. Markdown Text Editor

Markdown is the most popular in 2020 as it is considered an ideal for blog posting and building it would be really productive!

7. Custom Form

Build a forum application where users can submit topics and comment on them. To step it up a notch, add a liking feature. Mix in direct messaging if you’re extra ambitious

8. Your Own PortFolio Website

Look At mine : https:\hemant.codes

Building a portfolio site would be best begin into web dev with react and the static generation!

9. Search And Filter

To learn to build a user interactive app, you need to work with a filter and search box, a basic box that on the entry of query searches the database, and shows up the entries.

10. Tic Tac Toe Game

Another great example of a user interactive project is tic tac toe, it would help you in the development of JavaScript skills too as well as react on target!

11. Random Quote Generator

A Button on click displays a quote, isn't it good?, every new button click will generate a new quote;

12. User Authentication System

Setup Private Route and redirect on success login is what the user auth system will deal with and it would give to the intro to JWT and OAuth

13. O-Auth

Just like the dev to does auth with GitHub or twitter, you could build an application to do so and this is the trending technology

14. Messaging App

This would be another masterpiece to built and this is really awesome project to work on it will help you with creating the random route.

15. Countdown Timer

Users can see an event input box containing an event name field, a date field, an optional time, and a ‘Start’ button.

16. Image Gallery

Just like our phone gallery, you can build an application with i9mages in the showcase and on click the image can be viewed in full size



Advance

17. Notes App

User can input notes in the application but with no definite numbers of notes , note on can add up to 100 notes ie, 100 Forms to appear

18. Todo

MAking a Todo app would be a great idea, but adding these 30 projects in todo would be even great idea

19. Quiz App

One can enter the question and the options, with click the question will be displayed with 4 options and user have to select only one with correct answer show a congratulations notification and bad luck in the wrong hit

20. Browser

A browser type search engine, built with google API which would work similar to google.

21. Book Finder App

Create an application that will allow users to search for books by entering a query (Title, Author, etc). Display the resulting books in a list on the page with all the corresponding data.

22. Drawing App

Create digital artwork on a canvas on the web to share online and also export as images.

23. Simple Online Store

The goal of the Simple Online Store is to give your users the capability of selecting a product to purchase, viewing purchase information, adding it to an online shopping cart, and finally, actually purchasing the products in the shopping cart.

24. Chat App

Real-time chat interface where multiple users can interact with each other by sending messages.
As an MVP(Minimum Viable Product) you can focus on building the Chat interface. Real-time functionality can be added later (the bonus features)

25. Github Issues Page

Using GitHub API to build an issue page which would show the issue with open-close status and the respective date's

26. E-Commerce App

User Cart, User Profile And Payment Integration will the main feature of the application and by building this you can call yourself a good React Developer

27. Personal Expense Tracker and Analyst

Expense tracker with data storing in the local status which would have break session of 30 days, means it will reset each month showing s net expense

28. Recommendation App

Just like tinder an online dating application with recommendation and chat feature.

29. Live Location Tracker

Using Google API to show live location on the map with a google oAuth, it would be a massive success application

30. Local Job

The application will use users' locations and show Jobs near him in 30 km or 20 km area.



Hope you all enjoyed the project ideas

Do remember to follow me on github I share stuff related to javascript and react there

My GitHub: https://github.com/8bithemant

Thank you for reaching the post!

30 Apps (2 Part Series)

1) 30 React Apps 2) 30 Javascript Projects Add To Your Portfolio and Get Hired

Posted on by:

Discussion

markdown guide
 
 

Thanks! Will def work on these down the line. 😎

 
 

You have a typo in the heading section of Advance you spelled it as Advamce.

 

Oh god my bad😵,
Thanks Habdul For the edit😼

 

Thanks for sharing this great set of github repos!