Building React Projects Other roadmaps
Learn working in React with our guided roadmapLearning is a continuous process. If you are already familiar with how React works, these projects will help you put theory into practice. Solidify your knowledge by building the following components and applications.
If you are new to React, be sure to take the React roadmap first. If you want to explore more React tutorials without a direction, you can filter for the tutorials you are interested in on our React category page.
1Getting Started with CSS animations in ReactLearn how you can create a scroll-animated single site portfolio from scratch using React, TypeScript and CSS. 2Animated Carousel in React
Using CSS transitionsLearn how you can build an animated Carousel component in React with the help of CSS transitions. 3Building a FileUploader in React
How to upload files with progress trackingLearn how you can build a FileUploader component in React to handle file uploads with progress tracking included. 4Responsive, Animated Navbar
With dropdown functionalityLearn how you can create a responsive animated navbar component in React with the help of CSS media queries and transitions. 5Responsive Timeline in React
With the help of CSS pseudo elementsLearn how you can build a responsive timeline component in React with the help of pseudo elements in CSS. 6Configurable Tabs Component in React
With TypeScriptLearn how you can build a configurable Tabs component in React with TypeScript and HTML content support. 7How To Create a Toggleable FAQ Component in React
Using React hooksLearn how you can create a toggleable FAQ component in React with the help of React hooks. 8How to Implement Drag and Drop
With the help of the HTML Drag and Drop APILearn how you can build a drag-and-drop Kanban board in React with the help of the native HTML Drag and Drop API. 9How to Validate Forms in React
Using validation objectsLearn how to easily validate your forms in React in a declarative manner with the help of validation objects. 10How to Toggle Visibility in React
Building a customizable show/hide componentLearn how to create a customizable show/hide component for toggling visibility in React. 11How to Create an Infinite Scroll Component
With the help of the Intersection Observer APILearn how you can use the IntersectionObserver API in React to create a configurable infinite scrolling component. 12How to Build a Note Taking App
With the help of JSON serverLearn how you can use React with JSON server to quickly set up a backend for your application for mocking and prototyping. 13How to Create Autocomplete Search
With support for keyboard navigationAutocomplete is a common feature for websites with a search bar. Learn how you can create an autocomplete search in React with keyboard navigation. 14How to Make Feature Flags
Enable features with a click of a buttonLearn how you can implement feature flags in React to put your features behind a toggle.π Unlock this lesson 15How to Build a Weather App from Scratch
Learn how to build a weather app from start to finishIn this 5 part series, you will learn how to build a weather app from scratch using hooks, providers, and the fetch API.
πΊοΈ Related roadmaps
Continue learningReact Roadmap
Learn React with our guided roadmapThis roadmap takes you through the essential concepts in React, from JSX, props and state, to concepts like lazy loading, suspense and error boundaries.Building JavaScript Projects
Learn how to work with JavaScript using our guided roadmapThis roadmap covers and takes you through various projects to help you practice JavaScript while also building a portfolio of applications.
Rocket Launch Your Career
Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies: