Marios-tsigkas-pr

.github/actions/setup/action.yml

@@ -0,0 +1,8 @@
+name: "My Composite Action"
+description: "Runs shared setup commands for CI jobs"
+inputs: {}
+runs:
+  using: "composite"
+  steps:
+    - name: Setup Environment
+      run: bash scripts/setup.sh

.github/workflows/deploy.yml

@@ -0,0 +1,81 @@
+name: CI & Deploy
+
+on:
+  push:
+    branches: [ main ]
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+permissions:
+  contents: read
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  vitest:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/setup-node@v4
+      with:
+        node-version: '22'
+    - name: checkout repository
+      uses: actions/checkout@v4
+    - name: setup environment
+      run: bash scripts/setup.sh
+    - name: Run Vitest Tests
+      run: pnpm test
+
+  cypress:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+      - name: checkout repository
+        uses: actions/checkout@v4
+      - name: setup environment
+        run: bash scripts/setup.sh
+      - name: Install Cypress Binary
+        run: npx cypress install
+      - name: Cypress run
+        uses: cypress-io/github-action@v6
+        with:
+          build: pnpm build
+          start: pnpm preview --port 5173
+          config: 'baseUrl=http://localhost:5173/platform-catApi-react'
+
+  build:
+    runs-on: ubuntu-latest
+    needs: [vitest, cypress]
+    steps:
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+      - name: checkout repository
+        uses: actions/checkout@v4
+      - name: setup environment
+        run: bash scripts/setup.sh
+      - name: build environment
+        run: pnpm build
+      - name: Upload Artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./dist
+
+  deploy:
+    needs: build
+
+    permissions:
+      pages: write   
+      id-token: write
+
+    environment:
+      name: github-pages
+      url: "${{ steps.deployment.outputs.page_url }}/platform-catApi-react/"
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

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

README.md

@@ -1,8 +1,6 @@
-# GlobalWebIndex Engineering Challenge
+## Project: CatLover
 
-## Exercise: CatLover
-
-Create a React application for cat lovers which is going to build upon thecatapi.com and will have 3 views.
+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.
@@ -12,10 +10,85 @@ 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)
 
-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.
+API documentation here: https://developers.thecatapi.com/
+
+# Solution
+Deploying after every commit on GitHub Pages at https://mariosh346.github.io/platform-catApi-react/ with the help of Github Actions
+
+## Prerequisites
+- nvm (Node Version Manager) or Node v22
+
+## Setup
+
+1. Clone the repository:
+```bash
+git clone https://github.com/mariosh346/platform-catApi-react.git
+cd platform-catApi-react
+```
+
+2. Install Node.js using nvm:
+```bash
+nvm install 22
+nvm use 22
+```
+
+3. Install pnpm:
+```bash
+npm install -g pnpm
+```
+
+4. Install dependencies using pnpm:
+```bash
+pnpm install
+```
+
+## Running the Application
+
+- Start the development server:
+```bash
+pnpm dev
+```
+
+- Build for production:
+```bash
+pnpm build
+```
+
+## Commit
+1. create ssh keys https://docs.github.com/en/authentication/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent
+2. git config --global gpg.format ssh
+3. git config --global user.signingkey git config --global user.signingkey C:\Users\mario\.ssh\id_XXXX.pub
+4. Add the .pub data to https://github.com/settings/keys as signing key
+5. Auto sign all commits ```bash
+git config --global commit.gpgsign true
+git config --global tag.gpgSign true
+```
+
+## Testing
+
+Run Cypress tests:
+```bash
+pnpm cypress
+```
+
+## Deployment
+
+To deploy the project to GitHub Pages, run the following command:
+
+```sh
+pnpm deploy
+```
+
+Note: Once deployed, check the live site on GitHub Pages at https://mariosh346.github.io/platform-catApi-react/
+
+## Next steps
+
+- Add state management like redux
+- Introduce small reusable components like Button, Link
 
-## Submission
+## Tech Stack
 
-Once you have built your app, share your code in the mean suits you best
-Good luck, potential colleague!
+- React
+- TypeScript
+- Vite
+- Cypress

cypress.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:5173',
+    specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
+    supportFile: 'cypress/support/e2e.ts',
+  },
+})

cypress/e2e/breeds.spec.ts

@@ -0,0 +1,18 @@
+describe('Breeds Page', () => {
+  beforeEach(() => {
+    cy.visit('/breeds')
+  })
+
+  it('displays the header "Cat Breeds"', () => {
+    cy.get('h1').contains('Cat Breeds').should('exist')
+  })
+
+  it('renders at least one breed list item', () => {
+    cy.get('ul li').its('length').should('be.gt', 0)
+  })
+
+  it('navigates to breed detail on breed click', () => {
+    cy.get('ul li').first().click();
+    cy.url().should('include', '/breed-detail/');
+  });
+})

cypress/e2e/favorites.spec.ts

@@ -0,0 +1,6 @@
+describe('Favorites Page Tests', () => {
+  it('displays "No favorite cats yet." when favorites are empty', () => {
+    cy.visit('/favorites');
+    cy.get('[data-cy="no-favorites-message"]').contains('No favorite cats yet.').should('exist');
+  });
+});

cypress/e2e/home.spec.ts

@@ -0,0 +1,92 @@
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference types="cypress" />
+
+const visitHomePage = () => {
+  cy.visit('/');
+};
+
+describe('Home Page Tests', () => {
+  beforeEach(() => {
+    cy.clearLocalStorage('favorites'); // Clear favorites before each test
+  });
+
+  it('displays the header "Random Cats"', () => {
+    visitHomePage();
+    cy.get('[data-cy="home-header"]').contains('Random Cats').should('exist');
+  });
+
+  it('loads images and shows the "Load More" button', () => {
+    visitHomePage();
+    cy.get('[data-cy="image-card-image"]').should('have.length.greaterThan', 0);
+    cy.get('[data-cy="load-more-button"]').should('exist');
+  });
+
+  it('displays skeleton loaders while fetching images', () => {
+    cy.intercept('GET', '**/images/search?limit=10').as('getCatImagesDelayed');
+    cy.visit('/');
+    cy.get('[data-cy="skeleton-loader"]').should('have.length', 10); // Check for 10 skeleton cards
+    cy.wait('@getCatImagesDelayed');
+    cy.get('[data-cy="skeleton-loader"]').should('not.exist');
+    cy.get('[data-cy="image-card-image"]').should('have.length.greaterThan', 0);
+  });
+
+  it('displays an error message on API failure', () => {
+    cy.intercept('GET', '**/images/search?limit=10', { statusCode: 500, body: 'Internal Server Error' }).as('getCatImagesError');
+    cy.visit('/');
+    cy.wait('@getCatImagesError');
+    cy.get('[data-cy="error-message"]').contains('Failed to load images.').should('exist');
+    cy.get('[data-cy="load-more-button"]').should('not.be.disabled'); // Button should be enabled to allow retry
+  });
+
+  it('displays "No images found." when API returns empty data', () => {
+    cy.intercept('GET', '**/images/search?limit=10', { body: [] }).as('getCatImagesEmpty');
+    cy.visit('/');
+    cy.wait('@getCatImagesEmpty');
+    cy.get('[data-cy="no-images-found-message"]').contains('No images found.').should('exist');
+    cy.get('[data-cy="load-more-button"]').should('exist'); // Button should still be there to try again
+  });
+
+  it('navigates to image detail on image click', () => {
+    visitHomePage();
+    cy.get('[data-cy="image-card-image"]').first().click();
+    cy.url().should('include', '/image/');
+    cy.get('[role="dialog"]').should('be.visible');
+  });
+
+  it('closes the modal on Escape key press', () => {
+    visitHomePage();
+    cy.get('[data-cy="image-card-image"]').first().click();
+    cy.get('[role="dialog"]').should('be.visible');
+    cy.realPress('{esc}'); // Use cypress-real-events for Escape key
+    cy.get('[role="dialog"]').should('not.exist');
+  });
+
+  it('adds and removes image from favorites', () => {
+    visitHomePage();
+    cy.get('[data-cy="image-card-image"]').first().click();
+    cy.get('[role="dialog"]').should('be.visible');
+
+    // Mark as favorite
+    cy.get('[data-cy="mark-as-favourite-button"]').click();
+    cy.get('[data-cy="remove-from-favourites-button"]').should('exist');
+    cy.realPress('{esc}'); // Close modal
+
+    // Navigate to favorites page
+    cy.get('[data-cy="favorites-link"]').click();
+    cy.url().should('include', '/favorites');
+    cy.get('[data-cy="image-card-image"]').should('have.length', 1); // Should have 1 favorite image
+
+    // Open the favorite image from the favorites page
+    cy.get('[data-cy="image-card-image"]').first().click();
+    cy.get('[role="dialog"]').should('be.visible');
+    cy.get('[data-cy="remove-from-favourites-button"]').should('exist');
+
+    // Remove from favorites
+    cy.get('[data-cy="remove-from-favourites-button"]').click();
+    cy.get('[data-cy="mark-as-favourite-button"]').should('exist'); // Button text changes back
+    cy.get('[aria-label="Close modal"]').click(); // Close modal by clicking the close button
+
+    // Verify no favorites
+    cy.get('[data-cy="no-favorites-message"]').contains('No favorite cats yet.').should('exist');
+  });
+});