cethak89 · cethak89 · Aug 24, 2025
diff --git a/README.md b/README.md
@@ -1 +1,82 @@
-# catApp2
+# My Cat Gallery App
+
+A modern React application for browsing cat breeds, viewing images, and managing favorites.  
+Built with Vite, React Query, MUI, TailwindCSS, and TheCatAPI.
+
+---
+
+## **Setup**
+
+1. **Install dependencies:**
+   ```sh
+   npm install
+   ```
+
+2. **Start the development server:**
+   ```sh
+   npm run dev
+   ```
+
+## **Usage**
+
+- **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.
+
+---
+
+## **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/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
diff --git a/eslint.config.js b/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_]' }],
+    },
+  },
+])
diff --git a/index.html b/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>