The dogs-images-dashboard repository is a project that allows users to view and organize images of dogs. The dashboard provides a user-friendly interface for browsing and managing a collection of dog pictures. With its intuitive design and easy-to-use features, this project offers a great solution for dog lovers who want to keep their dog pictures organized and accessible. It use Dog API service.
| Feature | Description | |
|---|---|---|
| ⚙️ | Architecture | The codebase follows a component-based architecture using React.js framework. It separates UI components into reusable and interchangeable components such as Card, Carousel, and Header. The codebase also follows a single-page application architecture with a client-side rendering approach. |
| 📄 | Documentation | The documentation in the repository is limited. There is a README.md file that provides a brief overview of the project, but it lacks in-depth documentation on code structure, architecture, and usage instructions. Additional documentation would be helpful for onboarding new developers and users. |
| 🔗 | Dependencies | The repository relies on external libraries such as React for frontend development. The package.json file provides a list of all the dependencies along with their version numbers. |
| 🧪 | Testing | The codebase includes a e2e suit test that use Cypress library |
└── dogs-images-dashboard/
├── package.json
├── cypress/
│ ├── downloads
│ ├── e2e
│ ├── fixtures
│ ├── support
├── public/
│ ├── index.html
│ ├── manifest.json
│ └── robots.txt
├── src/
│ ├── App.test.tsx
│ ├── App.tsx
│ ├── components/
│ │ ├── Card/
│ │ ├── Carousel/
│ │ ├── CustomButton/
│ │ ├── Header/
│ │ ├── ImagePlaceholder/
│ │ ├── ImagesListByBread/
│ │ ├── ImagesListByBreadAndSubBreed/
│ │ ├── LazyImage/
│ │ ├── Loader/
│ │ ├── RandomBreedDogImage/
│ │ ├── RandomImageByBreedAndSubBreed/
│ │ ├── SelectInput/
│ │ └── Skeleton/
│ ├── context/
│ │ ├── Breed.tsx
│ ├── hooks/
│ │ ├── useBreedsList.ts
│ │ ├── useCarousel.ts
│ │ ├── useImagesListByBread.ts
│ │ ├── useImagesListByBreadAndSubBreed.ts
│ │ ├── useLoadImage.ts
│ │ ├── useRandomBreedDogImage.ts
│ │ └── useRandomImageByBreedAndSubBreed.ts
│ ├── index.tsx
│ ├── pages/
│ │ └── Dashboard/
│ ├── react-app-env.d.ts
│ ├── reportWebVitals.ts
│ ├── services/
│ │ └── Dog.ts
│ ├── setupTests.ts
│ ├── theme/
│ │ ├── animations.scss
│ │ └── root.scss
│ ├── types/
│ │ └── index.ts
│ └── utils/
│ └── index.ts
├── .nvmrc
├── cypress.config.ts
├── Dockerfile
├── tsconfig.json
└── yarn.lock
- Clone the dogs-images-dashboard repository:
git clone https://github.com/stealth90/dogs-images-dashboard- Change to the project directory:
cd dogs-images-dashboard- Install the dependencies:
yarn or yarn installyarn startyarn cypress:openThis project is protected under the MiT License. For more details, refer to the LICENSE page.