Hakan Cetin - Task Commit

README.md

@@ -1,21 +1,84 @@
-# GlobalWebIndex Engineering Challenge
+# My Cat Gallery App
 
-## Exercise: CatLover
+A modern React application for browsing cat breeds, viewing images, and managing favorites.  
+Built with Vite, React Query, MUI, TailwindCSS, and TheCatAPI.
 
-Create a React application for cat lovers which is going to build upon thecatapi.com and will have 3 views.
-The **first** view displays a list of 10 random cat images and a button to load more. Clicking on any of those images opens a modal view with the image and the information about the cat’s breed if available. This would be a link to the second view below - the breed detail. The modal should also contain a form to mark the image as your favourite (a part of the third view as well). Make sure you can copy-paste the URL of the modal and send it to your friends - they should see the same image as you can see.
+---
 
-The **second** view displays a list of cat breeds. Each breed opens a modal again with a list of cat images of that breed. Each of those images must be a link to the image detail from the previous point.
+## **Setup**
 
-The **third** view allows you do the following things:
+1. **Install dependencies:**
+   ```sh
+   npm install
+   ```
 
-- Display your favourite cats
-- Remove an image from your favourites (use any UX option you like)
+2. **Start the development server:**
+   ```sh
+   npm run dev
+   ```
 
-You can find the API documentation here: https://developers.thecatapi.com/
-We give you a lot of freedom in technologies and ways of doing things. We only insist on you using React.js. Get creative as much as you want, we WILL appreciate it. You will not be evaluated based on how well you follow these instructions, but based on how sensible your solution will be. In case you are not able to implement something you would normally implement for time reasons, make it clear with a comment.
+## **Usage**
 
-## Submission
+- **Browse Breeds:**  
+  View a list of cat breeds and their details.
+- **View Cat Images:**  
+  Click on a breed to see images of cats from that breed.
+- **Favorites:**  
+  Add or remove cats from your favorites list.
+- **Modals:**  
+  Cat and breed details are shown in modals for a smooth user experience.
 
-Once you have built your app, share your code in the mean suits you best
-Good luck, potential colleague!
+---
+
+## **Architecture Overview**
+
+- **src/Components/**  
+  UI components (lists, items, modals, loaders, etc.)
+- **src/Hooks/**  
+  Custom React Query hooks for API data fetching and mutations.
+- **src/Contexts/**  
+  Contexts for managing global state (favorites).
+- **src/Utils/**  
+  Utility functions and API configuration.
+- **src/Pages/**  
+  Page components to server for the specific links
+- **src/App.jsx**  
+  Main app component, sets up routing and context providers.
+- **src/style.css, App.css**  
+  TailwindCSS and custom styles.
+
+**Key Libraries:**
+- [React Query](https://tanstack.com/query/latest) – Data fetching and caching
+- [MUI](https://mui.com/) – UI components
+- [TailwindCSS](https://tailwindcss.com/) – Utility-first CSS
+- [React Router](https://reactrouter.com/) – Routing
+
+---
+
+## **Config File**
+
+- TO_DO Remove api key from the utils file and record it in the config file. It is intentionally added to help test the project
+
+## **Error Handling**
+
+- TO_DO Error handling will be optimized by adding a corresponding UI element and a centralized error management system
+
+## **UI/UX**
+
+- Basic UI/UX element are used just to focus on React development
+
+## **Testing**
+
+- TO_DO: Test cases will be adding
+
+## **Styles**
+
+- TO_DO inline css and custom CSS will be removed/reduced by using theme configration of Material UI and by using Tailwind Classes
+
+## **Favicon**
+
+- TO_DO favicon will be added
+
+## **Favorite API**
+
+- TO_DO Reconsider the approach of fetching all favorite cats when we load the application if the list becomes very large

eslint.config.js

@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])

index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Vite + React</title>
+  <link href="/src/style.css" rel="stylesheet">
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+
+</html>