Add Cat Lovers App with React, Redux, Tailwind, and BFF Integration

.env.example

@@ -0,0 +1 @@
+REACT_APP_MAX_FAVOURITES=10

.gitignore

@@ -0,0 +1,28 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+.idea
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+#testing
+/cypress/downloads/*
+/cypress/screenshots/*

README.md

@@ -1,21 +1,62 @@
-# GlobalWebIndex Engineering Challenge
+# 🐱 Catlover's App
 
-## Exercise: CatLover
+Welcome to **Catlover's App** – a simple and adorable platform made for cat enthusiasts!
 
-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.
+This app allows you to:
 
-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.
+- 🖼 View **random cat images**
+- 🧬 Select a cat to see detailed **breed information**
+- 📚 Explore a list of **all available breeds** with images related to each
+- ❤️ Save your favourite cats to a **favourites view**
 
-The **third** view allows you do the following things:
+---
 
-- Display your favourite cats
-- Remove an image from your favourites (use any UX option you like)
+## 🚀 Tech Stack
 
-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.
+Built with the following technologies:
+
+- ⚛️ **React** (using Create React App)
+- 🟦 **TypeScript**
+- 🧠 **Redux** for state management
+- 🎨 **Tailwind CSS** for UI styling
+
+---
+
+## 🛠 Getting Started
+
+### Steps for running the app in development mode
+
+```bash
+1. Clone the project
+
+git clone https://github.com/melnikolaidis86/catlover.git
+cd catlovers-app
+
+2. Install dependencies
+
+# In root folder
+npm install
+
+# Then in server folder
+cd server
+npm install
+
+3. Copy env files
+
+# In root folder
+cp .env.example .env
+
+# Then in server folder
+cd server
+cp .env.example .env
+
+4.  You can get a free API key from:
+
+#👉 https://developers.thecatapi.com/
+
+5. Run the in development mode
+
+# In root folder
+npm run dev
 
-## Submission
 
-Once you have built your app, share your code in the mean suits you best
-Good luck, potential colleague!

cypress.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+    },
+    baseUrl: "http://localhost:3000/",
+  },
+});

cypress/e2e/home.cy.ts

@@ -0,0 +1,24 @@
+describe('Cat Lovers App', () => {
+  beforeEach(() => {
+    cy.visit('/');
+  });
+
+  it('loads the homepage', () => {
+    cy.getByTestId('load-more-button').contains('Load More');
+  });
+
+  it('loads more cats on click', () => {
+    cy.getByTestId('load-more-button').click();
+    cy.getByTestId('cat-card').should('have.length.greaterThan', 10);
+  });
+
+  it('opens modal when a cat card is clicked', () => {
+    cy.getByTestId('cat-card').first().click();
+    cy.getByTestId('cat-details-modal').should('be.visible');
+    cy.getByTestId('cat-name').should('exist');
+    cy.getByTestId('cat-description').should('exist');
+  });
+});
+
+
+export {};

cypress/support/commands.ts

@@ -0,0 +1,13 @@
+declare global {
+    namespace Cypress {
+        interface Chainable {
+            getByTestId(testId: string): Chainable;
+        }
+    }
+}
+
+Cypress.Commands.add('getByTestId', (testId: string) =>
+    cy.get(`[data-test-id="${testId}"]`)
+);
+
+export {};

cypress/support/component-index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

cypress/support/component.ts

@@ -0,0 +1,36 @@
+// ***********************************************************
+// This example support/component.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+import { mount } from 'cypress/react'
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount
+    }
+  }
+}
+
+Cypress.Commands.add('mount', mount)
+
+// Example use:
+// cy.mount(<MyComponent />)

cypress/support/e2e.ts

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'