srushti-9 / adopt-me-pets

The "adopt-me pets" project is a React application designed to facilitate pet adoption by providing users with a platform to browse and search for available pets. It leverages React's capabilities and various tools to create a streamlined and intuitive user experience.

adopt-me pets

Description

The "adopt-me pets" project is a React application designed to facilitate pet adoption by providing users with a platform to browse and search for available pets. It leverages React's capabilities and various tools to create a streamlined and intuitive user experience.

Features

• No Frills React: Utilized React for building user interfaces efficiently and effectively.
• Components: Organized the application into reusable components for better maintainability and scalability.
• JS Tools: Integrated essential JavaScript tools such as npm, Prettier, ESLint, and Git for a streamlined development workflow.
• Vite: Utilized Vite as the build tool for fast and efficient development.
• Core React Concepts: Implemented core React concepts including JSX, hooks, effects, custom hooks, and handling user input.
• Component Composition: Implemented component composition for building complex UIs from simpler components.
• React Dev Tools: Utilized React Dev Tools for debugging and inspecting React components.
• React Capabilities: Explored various capabilities of React for building interactive and dynamic web applications.
• React Router: Implemented React Router for client-side routing, enabling navigation between different views.
• react-query: Integrated react-query for efficient data fetching and management, enhancing the application's performance.
• Uncontrolled Forms: Implemented uncontrolled forms handling techniques for managing form state and user input, improving form usability and performance.
• Class Components: Utilized class components for scenarios where class-based syntax is preferred or necessary.
• Special Case React Tools: Utilized special case React tools such as error boundaries, portals, refs, and context for handling specific use cases and improving application robustness and flexibility.
• Error Boundaries Implementation: Implemented error boundaries to gracefully handle and recover from JavaScript errors within the application, ensuring a smooth user experience.
• Portals and Refs Usage: Leveraged portals and refs to create advanced UI features such as modals, tooltips, and dropdowns, enhancing the flexibility and functionality of the application.
• Context Management: Implemented context API for state management and sharing data between components, ensuring a clean and efficient data flow within the application.
• Lazy Loading: Implemented lazy loading to load components or assets asynchronously, improving initial loading time and user experience.

Technologies Used

• Frontend: React, React Router, react-query
• Build Tool: Vite
• Styling: CSS
• Version Control: Git

Installation

Clone the repository:

git clone https://github.com/Srushti-9/adopt-me-pets.git

Install dependencies:

cd adopt-me-pets
npm install

Start the development server:

npm run dev

Usage

Once the development server is running, navigate to the localhost URL provided in the terminal. From there, you can explore the features and functionalities of the "adopt-me pets" application.

Learned from Course

This project was developed as part of the COMPLETE INTRO TO REACT V8 course by Brian Holt , where I learned the fundamentals of React and various technologies used in modern React development.