Welcome to the 20 React Apps repository! Dive into an immersive journey through the world of React.js with this curated collection of versatile applications. From foundational concepts to advanced techniques, each app is meticulously crafted to provide a hands-on learning experience.
- Comprehensive Coverage: Explore a diverse range of React.js features, including state management, component composition, hooks, context API, Redux, error handing, API handling, Redux, Axios and more.
- Real-world Scenarios: Each app is designed to simulate real-world scenarios, allowing you to tackle practical challenges and deepen your understanding.
- Clear Documentation: Detailed README files accompany each app, providing clear instructions on installation, usage, and customization.
- Interactive Learning: Engage with interactive components, dynamic UIs, and responsive designs, fostering an interactive learning environment.
| Project Name | Live Link |
|---|---|
| React Redux Shopping cart | https://shop-chair.netlify.app/ |
| Gemini AI Search | https://ps-gemini-ai-search.netlify.app/ |
| Chat Visualization | https://chat-visualization.netlify.app/ |
| Unsplash API Images Infinite Scrolling | https://unsplash-images-infinite-scrolling.netlify.app/ |
| Recipe Finder App using React | https://taste-treasure.netlify.app/ |
| EduTech University React Project | https://ps-edutech-university.netlify.app/ |
| URL Shortener | https://url-shortener-react-webapp.netlify.app/ |
This project provides visualizations and examples of various React hooks.
- Source-code : React Hooks Visualization
- Project Demo: https://react-hooks-visualization.netlify.app/
This URL Shortener React project is a web application that allows users to shorten long URLs. The application incorporates various modern React features and best practices, including structured components, custom animations, API integrations, Axios for HTTP requests, environment variables, hooks, error handling, and mobile responsiveness.
- Source-code : URL Shortener
- Project Demo: https://url-shortener-react-webapp.netlify.app/
The React Redux Shopping Cart project is a web application that allows users to browse a collection of products and add them to their cart. It utilizes React.js for the frontend and Redux for state management. The application provides a seamless shopping experience with features like adding items to the cart, adjusting quantities, and viewing the total price.
- Source-code : React Redux Shopping Cart
- Project Demo: https://shop-chair.netlify.app/
Gemini AI Search is an intuitive AI-powered search interface designed to provide quick and accurate responses to user queries. The application is built using React and integrates with a custom API to deliver results in real-time.
- Source-code : Gemini AI clone
- Project Demo: https://ps-gemini-ai-search.netlify.app/
The EduTech University project is a comprehensive educational platform that includes a variety of features such as email messaging, a university commercial video player, custom navigation bars, sliders, and more. This project aims to provide an intuitive and engaging user experience for both students and educators
- Source-code : Employee Database System Code
- Project Demo: https://ps-edutech-university.netlify.app/
This project is an Employee Management System built using React, integrating concepts like useState, useRef, and useEffects for managing component state and lifecycle. It also utilizes the SweetAlert2 library for beautiful alerts and Primitive UI for CSS styling.
- Source-code : Employee Database System Code
- Project Demo: https://ps-employee-management-system.netlify.app/
The Folder Explorer Component is a React component that allows users to create, view, and manage a folder structure. It provides functionalities like adding folders and files, renaming items, and deleting items. The component is designed to be highly customizable and responsive across different devices.
- Source-code : File explorer code
- Project Demo: https://ps-file-explorer.netlify.app/
This project is a Recipe Finder application built using React. It allows users to search for recipes by name, view recipe details, and add recipes to their favorites. The application utilizes various React concepts such as Context API for state management, React Router for routing and navigation, and Tailwind CSS for styling.
- Source-code : food-recipe-search
- Project Demo: https://taste-treasure.netlify.app/
This is a multi-step form application built with React. Users can navigate through multiple form steps, providing information at each step, such as account details, personal information, final details, and payment information. The application provides a seamless experience for users to input data across different form sections and proceed to the next step.
- Source-code : Code Link
- Project Demo: https://ps-multi-step-form.netlify.app/
- Source-code : Code Link
- Project Demo: https://chat-visualization.netlify.app/
This project is a simple date picker component built with React.js and styled-components. It allows users to select a start date and an end date, with the ability to customize the available date range based on the selected start date.
- Source-code : Code Link
- Project Demo: https://calendar-date-picker.netlify.app/
- Source Code: Code Link
- Live Project Link: https://ps-star-rating.netlify.app/
- Live Project Link: Live App Demo
- Source Code: Source Code Link
- Live Project Link: Live Quiz App
- Source Code: Source Code Link
- Live Project Link: React Unsplash Image Search
- Source Code: Source Code Link
-
Live Project Link: Play Live Game
-
Source code Link: source code
Whether you're a novice eager to grasp the basics or a seasoned developer seeking to refine your skills, these apps cater to learners of all levels. Use them to build your portfolio, experiment with new concepts, or deepen your expertise in React.js development.
Your contributions are invaluable! If you have ideas for new apps, enhancements, or bug fixes, we encourage you to fork this repository, implement your changes, and submit a pull request. Let's collaborate to enrich the learning experience for React.js enthusiasts worldwide.
Happy coding! 🚀
Made with ❤️ by PranaV Shimpi