Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ashwek-padolkar/dogsapi2
https://github.com/ashwek-padolkar/dogsapi2
apifetch carousel-slider pagination reactjs
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/ashwek-padolkar/dogsapi2
- Owner: ashwek-padolkar
- Created: 2024-09-10T11:21:46.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-09-16T06:09:22.000Z (4 months ago)
- Last Synced: 2024-09-16T07:36:00.161Z (4 months ago)
- Topics: apifetch, carousel-slider, pagination, reactjs
- Language: JavaScript
- Homepage: https://ashwek-padolkar.github.io/DogsAPI2/
- Size: 4.26 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Dog Breeds Data Table and Carousel Application
This application demonstrates Front-End development expertise by presenting data in two distinct formats: a **Data Table** and an **Interactive Carousel**. The application fetches data from The Dog API to display a list of dog breeds in both a table and a carousel view. Users can toggle between these views using buttons in the navigation bar. The table view supports pagination, while the carousel offers image sliding and additional data loading functionality.
## Technologies Used
1. React: For building the user interface.
2. Vite: As the development tool for faster builds.
3. Context API and useReducer: For state management across components.
4. CSS: For styling the components.
5. Fetch API: For fetching data from the external Dog API.
## API Integration
The application fetches data from The Dog API to populate both the data table and carousel components. It uses the following endpoints:
1. Data Table: Fetches 10 dog breed records for each page.
2. Carousel: Fetches 10 random dog breed images to display in the slider.
The API calls are secured using an API key stored in the .env file.
## State Management
This project utilizes React's useReducer for managing state in both the Pagination and Carousel components. State is managed independently for each component:
1. PaginationContext: Manages the state of the data table, including the current page, loading state, and cached data.
2. CarousalContext: Handles the state for the carousel, including the list of images, current slide index, and loading state.
## Optimizations
1. Implemented Loader until data is fetched:
A loading indicator is displayed while data is being fetched from the API, ensuring a smooth user experience.
2. Efficient Data Fetching:
Caching is implemented to store fetched data, preventing unnecessary API calls when switching between pages and ensuring quick access to previously loaded content.
3. Carousel optimized by including a Load More button that generates more data:
The Load More button fetches additional data when required, allowing users to dynamically load content as they explore.
4. Responsive Layout:
The UI is designed to adapt to different screen sizes and resolutions, offering an optimal user experience across devices.
## Installation
To get started with this project, follow the steps below:
1. Clone the repository:
```bash
git clone https://github.com/ashwek-padolkar/DogsAPI2.git
```
2. To navigate to the project folder:
```bash
cd DogsAPI2
```
3. Install the required dependencies:
```bash
npm install
```
4. Start the development server:
```bash
npm run dev
```
## Available Scripts
1. npm run dev: Starts the development server.
2. npm run build: Builds the project for production.
3. npm run preview: Preview the production build locally.