Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

ryantusi/Pet_Store

Folders and files

NameName
Last commit message
Last commit date

Latest commit

History

3 Commits

Repository files navigation

🐾 Pet Store App

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.


πŸš€ Features

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

πŸ› οΈ Tech Stack

  • Frontend: React
  • Routing: React Router
  • API: Petfinder API

πŸ“‚ Project Structure

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

βš™οΈ Installation & Setup

  1. Clone the repository:

    git clone https://github.com/your-username/pet-store-app.git
    cd pet-store-app
  2. Install dependencies:

    npm install
  3. Run the app:

    npm start

    The application will be available at http://localhost:3000.

About

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.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

Contributors

AltStyle γ«γ‚ˆγ£γ¦ε€‰ζ›γ•γ‚ŒγŸγƒšγƒΌγ‚Έ (->γ‚ͺγƒͺγ‚ΈγƒŠγƒ«) /