{"id":19854692,"url":"https://github.com/ashwek-padolkar/dogsapi2","last_synced_at":"2026-05-15T03:31:07.276Z","repository":{"id":256705127,"uuid":"855135136","full_name":"ashwek-padolkar/DogsAPI2","owner":"ashwek-padolkar","description":null,"archived":false,"fork":false,"pushed_at":"2024-10-07T05:43:16.000Z","size":4467,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-28T23:38:44.353Z","etag":null,"topics":["apifetch","carousel-slider","pagination","reactjs"],"latest_commit_sha":null,"homepage":"https://ashwek-padolkar.github.io/DogsAPI2/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ashwek-padolkar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-10T11:21:46.000Z","updated_at":"2024-10-07T05:43:20.000Z","dependencies_parsed_at":"2025-01-11T13:44:50.600Z","dependency_job_id":"20221c37-b9f3-42a1-871d-9e6f590d2070","html_url":"https://github.com/ashwek-padolkar/DogsAPI2","commit_stats":null,"previous_names":["ashwek-padolkar/dogsapi2"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ashwek-padolkar/DogsAPI2","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ashwek-padolkar%2FDogsAPI2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ashwek-padolkar%2FDogsAPI2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ashwek-padolkar%2FDogsAPI2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ashwek-padolkar%2FDogsAPI2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ashwek-padolkar","download_url":"https://codeload.github.com/ashwek-padolkar/DogsAPI2/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ashwek-padolkar%2FDogsAPI2/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33052499,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-13T13:14:54.681Z","status":"online","status_checked_at":"2026-05-15T02:00:06.351Z","response_time":103,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apifetch","carousel-slider","pagination","reactjs"],"created_at":"2024-11-12T14:10:08.908Z","updated_at":"2026-05-15T03:31:07.252Z","avatar_url":"https://github.com/ashwek-padolkar.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Dog Breeds Data Table and Carousel Application\n\nThis 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.\n\n## Technologies Used\n\n1. React: For building the user interface.\n2. Vite: As the development tool for faster builds.\n3. Context API and useReducer: For state management across components.\n4. CSS: For styling the components.\n5. Fetch API: For fetching data from the external Dog API.\n\n## API Integration\n\nThe application fetches data from The Dog API to populate both the data table and carousel components. It uses the following endpoints:\n\n1. Data Table: Fetches 10 dog breed records for each page.\n2. Carousel: Fetches 10 random dog breed images to display in the slider.\n   The API calls are secured using an API key stored in the .env file.\n\n## State Management\n\nThis project utilizes React's useReducer for managing state in both the Pagination and Carousel components. State is managed independently for each component:\n\n1. PaginationContext: Manages the state of the data table, including the current page, loading state, and cached data.\n2. CarousalContext: Handles the state for the carousel, including the list of images, current slide index, and loading state.\n\n## Optimizations\n\n1. Implemented Loader until data is fetched:\n   A loading indicator is displayed while data is being fetched from the API, ensuring a smooth user experience.\n2. Efficient Data Fetching:\n   Caching is implemented to store fetched data, preventing unnecessary API calls when switching between pages and ensuring quick access to previously loaded content.\n3. Carousel optimized by including a Load More button that generates more data:\n   The Load More button fetches additional data when required, allowing users to dynamically load content as they explore.\n4. Responsive Layout:\n   The UI is designed to adapt to different screen sizes and resolutions, offering an optimal user experience across devices.\n\n## Installation\n\nTo get started with this project, follow the steps below:\n\n1. Clone the repository:\n\n```bash\ngit clone https://github.com/ashwek-padolkar/DogsAPI2.git\n```\n\n2. To navigate to the project folder:\n\n```bash\ncd DogsAPI2\n```\n\n3. Install the required dependencies:\n\n```bash\nnpm install\n```\n\n4. Start the development server:\n\n```bash\nnpm run dev\n```\n\n## Available Scripts\n\n1. npm run dev: Starts the development server.\n2. npm run build: Builds the project for production.\n3. npm run preview: Preview the production build locally.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fashwek-padolkar%2Fdogsapi2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fashwek-padolkar%2Fdogsapi2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fashwek-padolkar%2Fdogsapi2/lists"}