Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/artempchela/dogsapi-react-ts
https://github.com/artempchela/dogsapi-react-ts
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/artempchela/dogsapi-react-ts
- Owner: ArtemPchela
- Created: 2023-10-06T07:04:43.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2023-10-06T07:34:15.000Z (over 1 year ago)
- Last Synced: 2023-10-06T08:34:05.352Z (over 1 year ago)
- Language: TypeScript
- Size: 44.9 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Dog-api
## Description
This app was created with stack:
* [React](https://reactjs.org/)
* [TypeScript](https://www.typescriptlang.org/)
* [Vite](https://vitejs.dev/)
* [React Router Dom](https://reactrouter.com/web/guides/quick-start)
* [TanStack Query v4](https://tanstack.com/query/v4/)
## Installation dependencies
```bash
npm install
```
## Start app
```bash
npm run dev
```
### Instructions
* Single-page application (SPA). There should only exist a single html file in the project.
* Build an application for viewing images of dogs by making requests to the Dog API (https://dog.ceo/dog-api/documentation/).
* On the front page of the application, a table or list of some kind should list all the different breeds of dogs that can be
viewed (see "List all breeds" in the documentation).
* Each breed should link to a new "page" where multiple images of dogs are listed using the "by breed" endpoint as described in the documentation. Each of these new pages should have a proper navigation route, so that after entering a breed page, refreshing the site or using the hash "#" property of window.location should keep you on the same breed page.
* Each breed site should include a list of the breed's sub-breeds (if any). These sub-breeds should function similarly to the main breeds, linking to separate sub-breed sites where lists of images specific to that sub-breed are displayed.
* Each breed and sub-breed site should also display the name of the breed being viewed.
* On each site (index, breed, sub-breed), there should also be a random image displayed and a button that allows you to refresh this random image. When you are on the breed or sub-breed site, the random image should specifically belong to the selected breed or sub-breed.### Requirements
* An index page should display a random image of a dog from any breed and include a refresh button for the image. Additionally, the page should feature a list of different breeds, with each breed linking to a new sub-page.
* A breed page should display a random image of a dog from the specified breed and include a refresh button for the image. Additionally, the page should feature a list of different sub-breeds (if any), with each sub-breed linking to a new sub-page. The breed page should also render all the images provided by the API for that breed (e.g., from https://dog.ceo/api/breed/hound/images). Finally, the page should include text identifying the breed being viewed.
* A sub-breed page should display a random image of a dog from the specified sub-breed and include a refresh button for the image. Additionally, the sub-breed page should render all the images provided by the API for that sub-breed (e.g., from https://dog.ceo/api/breed/hound/afghan/images). The page should also feature text identifying the sub-breed being viewed.
* Furthermore, every page, except for the index page, should incorporate a URL identifier that allows for the correct breed or sub-breed to be displayed. For instance, if I attempt to navigate to http://mysite.com#breed-hound, the page for the hound breed should be directly shown.
* There can only be a single HTML file in the project that is directly rendered by the browser.