loading...
Cover image for 20 React Apps

20 React Apps

hemant profile image Hemant Joshi 😼 Updated on ・2 min read

Hello Fellow Dev_ians,


Hope ya all doing fine in your code journey ❤️.

About Me.

I am a 18 year old Mern stack aspirant who love to work in JavaScript and dedicated to master JavaScript , follow me on github to stay updated to my codes.


Mentioning

This is a request please follow me on github
i share a lot of repository there which can
help you as a beginner and below is a Road-Map Repo which consist of road maps give it a try once

Alt Text

*Here is the preview of the Mindmap Repo and below is the link to github *

GitHub logo 8bithemant / Mindmap-Full-Stack

This is A roadmap or you can spell it mindmap for Developer's , this is for frontend and Full stack developer , all the people who belive in them and want to grow faster can work with this mindmap.

And star 🌟 and Fork the repository .


Begin.

How To Learn React And JavaScript?

By Building The Application

Here are 20 Apps Must To Build To Conquer ReactJS + JavaScript

I will be sorting apps in order....



Make sure you follow chris-on-code and he have posted video tutorials too;

1. YouTube Clone

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

GitHub

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.

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool…

Make Sure To Star And Follow


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.


3. Authentication


4. React Weather App

Live Preview: NA;

GitHub

GitHub logo 8bithemant / React-Weather-App

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

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool…


5. Pomodoro


6. Markdown Editor


7. Browser Tabs


8. Paper Rock Scissors


9. Moving Boxes and Zelda


10. Infinite Image Gallery


11. Trivia


12. Web Speech and Timers


13. Calendar Picker


14. Moving-box-link


15. Multi-step-form


16. memory-matching


17. Speech Timers


18. Drag Drop Math Card


19. chat-box


20. Highlight Tabs

If you want a tutorial related to these apps follow ChrisonCode
Video Tutorial : https://20reactapps.com/



Hope You liked the Blog and don't forget to follow me
on GitHub.

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.

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool…

My Personal Portfolio Website Link : https://hemant.codes

I am Hemant Joshi 18 year old Developer and i work hard to become a hardcore dev and i am working on JavaScript And Mern Stack if you like what i do or post, Please react with (🦄) and (❤️ ) , do follow me on twitter and github also don't forget to star (⭐)your fav repo in github.

Thank You,
Hope Those All Reading This May Land On Their Dream Job/ Intern.

20reactapps.com
Can Visit Chris Website and Learn React By Building The Mentioned Applications Live

Posted on by:

Discussion

markdown guide
 
 

Dont foregt to follow me on github😼🤭🤭
Thank you;

 

On very large screens your Infinite Image Gallery doesn't work... there's only a single row of images and says "loading" but nothing happens. I assume you're capturing scroll distance, but on large screen there is nothing to initially scroll so your script to load images never triggers.

Moral of the story: always keep in mind not everybody uses the same monitor you have.