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
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.