DEV Community

Cover image for React Beginner Project Ideas
Kritika Srivastava
Kritika Srivastava

Posted on • Updated on

React Beginner Project Ideas

Since now you are familiar with basics of React,you can start building small projects in React.Here are some ideas or list which you can refer to.

Tip:Start with 1 App and complete that first.Google wherever you are stuck.Search for the logic on youtube if you don't get it.There are various tutorials you can refer to like Traversy Media,Dev Ed,Coding Addict on Youtube and many more.Read others' code to understand the logic and implement by your own.

1.Currency Converter:
Alt Text
Github Repository-https://github.com/kritika27/currency-converter-reactjs
Concepts to learn:Use of API,Select Options,React hooks,state,props,Arrays.
Demo Link-https://friendly-payne-18ef0b.netlify.app/

2.Quotes Generator:
Alt Text
Github Repository-https://github.com/kritika27/quotes-generator-react
Demo Link-https://dazzling-snyder-2f0503.netlify.app/
Concepts to learn:How to fetch data from Quotes API,arrays.

3.Bookmark:
Alt Text
Github Repository-https://github.com/kritika27/bookmark-reactjs
Demo Link-https://nervous-fermi-c86968.netlify.app/
Concepts to learn:Use of Multiple input elements,validate the entries in input box,validate url,add multiple items to array list.

4.Expense Tracker:
Alt Text
Github Repository-https://github.com/kritika27/expense-tracker-reactjs
Demo Link-https://angry-raman-08502b.netlify.app/
Concepts to learn:Arrays,map and reduce function,local storage.

5.To Do App with Firebase:
Alt Text
Github Repository-https://github.com/kritika27/todo-react-firebase
Demo Link-https://dreamy-mcclintock-c13cf8.netlify.app/
You can refer to my previous blog on Grocery List if you do not want to use backend.
Concepts to learn:Arrays,Firebase,delete items.

Star the project on Github if you like it.
You can follow me on Twitter and Github.
Suggestions are always welcome.Happy Learning :)

Top comments (5)

Collapse
 
abdurrkhalid333 profile image
Abdur Rehman Khalid

As these are accurate level for the beginners. I am pretty sure that many beginners will build these projects and there confidence will get an excellent boost as well.

Collapse
 
braydentw profile image
Brayden W ⚡️

Agreed, I tried out a CRM and Todo list and they really helped me grow.

Collapse
 
abdurrkhalid333 profile image
Abdur Rehman Khalid

Best of Luck for your future as well.

Collapse
 
kritika27 profile image
Kritika Srivastava

Hi Anjan.Fifth App in the above list is To do list App.Thanks.

Collapse
 
rahxuls profile image
Rahul

All of them sounds cool. But don't you think they all are same as JavaScript projects. For ReactJS people should think something creative and amazing. But loved all this projects.