https://github.com/inna-mykytiuk/cat-gallery-test

Test Case - Cat Gallery
https://github.com/inna-mykytiuk/cat-gallery-test

react react-query router-dom tailwind-css typescript zustand

Last synced: 4 days ago
JSON representation

Test Case - Cat Gallery

• Host: GitHub
• URL: https://github.com/inna-mykytiuk/cat-gallery-test
• Owner: Inna-Mykytiuk
• Created: 2024-11-01T06:24:02.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-11-05T13:37:15.000Z (4 months ago)
• Last Synced: 2024-12-25T16:40:25.958Z (about 2 months ago)
• Topics: react, react-query, router-dom, tailwind-css, typescript, zustand
• Language: TypeScript
• Homepage: https://inna-mykytiuk.github.io/cat-gallery-test/
• Size: 4.76 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# **Junior Frontend Developer Test Case - Cat Gallery**

**Overview**

Create a web application that displays a gallery of cat images fetched from the TheCatAPI. Users should be able to filter the cats by breed and favorite/unfavorite individual cats.

**Requirements**

1. **Cat Image Gallery**:

   - Fetch cat images and associated data (e.g., breed, temperament) from the TheCatAPI.

   - Display the cat images in a responsive grid or masonry layout.

   - Include the cat's breed name as a caption below each image.

2. **Breed Filtering**:

   - Allow users to filter the displayed cats by breed.

   - Provide a dropdown or search input to select the desired breed.

   - Update the gallery to show only the cats that match the selected breed.

3. **Favoriting Cats**:

   - Implement a "Favorite" button or icon for each cat image.

   - Allow users to mark a cat as a favorite, and persist this information in the browser's local storage.

   - Visually differentiate the favorite cats from the non-favorite ones in the gallery.

   - Provide a way for users to view only their favorite cats.

4. **React Components and State Management**:

   - Use functional components with React Hooks for state management and side effects.

   - Manage state efficiently using React Context API or a lightweight state management library like Zustand (if you think it’s needed).

5. **API Integration**:

   - Fetch cat data from the TheCatAPI using the provided API endpoints and documentation (React Query)

   - Handle API errors and provide meaningful feedback to the user.

6. **UI and Styling**:

   - Use Tailwind CSS for styling the application.

   - Ensure a responsive and visually appealing user interface.

7. **Code Organization and Best Practices**:

   - Organize the codebase in a clear and modular fashion.

   - Follow best practices for React development

8. Utils:

   - React Query

   - TypeScript

   - Vite

   - Husky

   - Linters

9. **Deployment**:

   - Deploy the application to a hosting platform (e.g., Vercel, Netlify, or GitHub Pages) and provide the deployment URL.

   ![preview](https://github.com/Inna-Mykytiuk/cat-gallery-test/blob/main/public/cats.png)