Cat Lover App - EP

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

cat-lover/.babelrc

@@ -0,0 +1,8 @@
+{
+    "presets": [
+      ["@babel/preset-env", { "targets": { "esmodules": true } }], // It's the name of the lib you installed
+      ["@babel/preset-react", { "runtime": "automatic" }], // It's the name of the lib you installed
+      "@babel/preset-typescript" // It's the name of the lib you installed
+    ]
+  }
+  // I took this from here: Source https://medium.com/@vitor.vicen.te/setting-up-jest-js-for-a-vite-ts-js-react-project-the-ultimate-guide-7816f4c8b738

cat-lover/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

cat-lover/.prettierrc

@@ -0,0 +1 @@
+{ "parser": "typescript", "typescript.version": "latest" }

cat-lover/README.md

@@ -0,0 +1,51 @@
+# Cat Lover App
+## Getting Started
+
+### Prerequisites
+- Node.js (v16 or higher)
+- npm
+
+### Installation
+```bash
+npm install
+```
+
+### Running the Development Server
+```bash
+npm run dev
+```
+This will start the development server at http://localhost:5173
+
+### Running Tests
+```bash
+npm run test
+```
+
+## Tech Stack
+
+### Core Technologies
+- **React 19**: Component Based UI
+- **TypeScript**: For type checking
+- **Vite**: Chosen as the build tool for its quick set up and fast development exeperience 
+- **React Router v7**: Chosen for client side routing with the latest features for navigation and URL parameter handling
+
+### Styling Approach
+- **Pure CSS**: Chose vanilla CSS over CSS frameworks for a lightweight bundle and put some effort on this field. I have created some variables and I have extracted common css under App.css .
+
+### API Integration
+- **Axios**: Used for HTTP requests to the api
+
+## Testing
+- **Jest**: As the test runner and assertion library
+- **React Testing Library**: For component testing 
+- **Axios Mock Adapter**: For mocking API calls in tests
+
+## Future Improvements
+- **Responsive design**: Currently, the application is not working perfectly on mobile. If I had additional time I would improve that using media queries.
+- **CSS Extraction to Variables**: A lot more work could be done on this field, create more variables which then used across the application.
+- **Improving test coverage**: Whilst the current test suite include a couple tests. If I had more time I would add more tests for edge cases and integration points.
+- **Improve Performance**: Techniques like lazy loading and pagination could be implemented to ensure only necessary files are being downloaded.
+- **FolderStructure**: The current folder structure is basic given the size of the application, different approaches like Atomic design or Feature based could be used.
+- **Window Alerts**: If I had more time i would create proper modals for successful and failed requests for favorite API calls. 
+
+## Thank you!

cat-lover/eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

cat-lover/index.html

@@ -0,0 +1,13 @@
+<!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>Cat Lover App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

cat-lover/jest.config.js

@@ -0,0 +1,10 @@
+export default {
+  testEnvironment: "jest-environment-jsdom",
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"], 
+  moduleNameMapper: {
+    "\\.(gif|ttf|eot|svg|png)$": "<rootDir>/test/__mocks__/fileMock.js", 
+    "\\.(css|less|sass|scss)$": "identity-obj-proxy", 
+    "^@/(.*)$": "<rootDir>/src/$1", 
+  },
+};
+  // I took this from here: Source https://medium.com/@vitor.vicen.te/setting-up-jest-js-for-a-vite-ts-js-react-project-the-ultimate-guide-7816f4c8b738

cat-lover/jest.setup.ts

@@ -0,0 +1,5 @@
+import "@testing-library/jest-dom";
+import { TextEncoder, TextDecoder } from "util";
+
+global.TextEncoder = TextEncoder;
+global.TextDecoder = TextDecoder as any;