This is a React-based Pet Store application that demonstrates the use of React Router for navigation and routing. It fetches pet data from an API and organizes the UI into distinct pages, such as a home page, a hero section, and a page for displaying individual pets.
- Client-side routing: Uses React Router to navigate between different sections of the app without a full page reload.
- API integration: Fetches pet data from an external API (Petfinder API).
- Component-based UI: The app is built with modular React components for better organization and reusability.
- Frontend: React
- Routing: React Router
- API: Petfinder API
pet-store-app/
β
βββ public/ # Static assets
βββ src/
β βββ api/ # API calls
β β βββ petfinder/
β β βββ index.js # Petfinder API requests
β βββ assets/ # Images, icons, etc.
β βββ components/ # Reusable React components
β β βββ hero/
β β β βββ index.js # Hero section component
β β βββ navigation/
β β β βββ index.js # Navigation bar component
β β βββ pet/
β β βββ index.js # Pet display component
β βββ App.js # Main application component with router setup
β βββ App.test.js # Test file for App.js
β βββ index.js # Entry point of the application
β βββ logo.svg
β βββ reportWebVitals.js
β βββ setupTests.js
βββ LICENSE
βββ package-lock.json
βββ package.json
βββ README.md
βββ yarn.lock
-
Clone the repository:
git clone https://github.com/your-username/pet-store-app.git cd pet-store-app -
Install dependencies:
npm install
-
Run the app:
npm start
The application will be available at
http://localhost:3000.