Frontend assignment solution from Younes Henni

jobs/Frontend/younes-assignement/.env.example

@@ -0,0 +1,3 @@
+VITE_TMDB_API_KEY=your-api-key-here
+VITE_TMDB_API_URL = your-api-url-here
+VITE_TMDB_API_READ_ACCESS_TOKEN=your-read-access-token-here

jobs/Frontend/younes-assignement/.github/workflows/test.yml

@@ -0,0 +1,60 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  lint:
+    name: Lint & Format
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run ESLint
+        run: npx eslint . --max-warnings=0
+
+      - name: Check formatting with Prettier
+        run: npx prettier --check .
+
+  test:
+    name: Run Tests & Coverage
+    runs-on: ubuntu-latest
+    needs: lint
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: "npm"
+
+      - name: Cache npm modules
+        uses: actions/cache@v3
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run Vitest with coverage
+        run: npx vitest run --coverage

jobs/Frontend/younes-assignement/.gitignore

@@ -0,0 +1,26 @@
+# 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?
+.env
+TODO.md

jobs/Frontend/younes-assignement/README.md

@@ -0,0 +1,75 @@
+# 🎬 Movie Search App
+
+A simple React + TypeScript application for searching movies using the [TMDB API](https://www.themoviedb.org/).
+
+## 🖼️ Preview
+
+Here’s a quick look at the app in action:
+
+![How it looks](src/assets/how%20it%20looks.png)
+
+## 🚀 Features
+
+- Search for movies with debounce (search starts after typing stops)
+- Paginated results with **Load More** button
+- Movie detail view with overview, release date, and rating
+- Persist movie search results in session storage
+- Built using **React, TypeScript, styled-components, react-router-dom**
+- Continuous Integration automatically runs tests and checks code formatting on every push or pull request.
+
+## 🛠️ Tech Stack
+
+- [React](https://react.dev/)
+- [TypeScript](https://www.typescriptlang.org/)
+- [Vite](https://vitejs.dev/) (build tool)
+- [styled-components](https://styled-components.com/)
+- [React Router](https://reactrouter.com/)
+
+## 📦 Installation
+
+1. Clone your fork of the repository:
+
+```bash
+git clone [email protected]:youneshenniwrites/Mews-Developers.git
+
+cd Mews-Developers/frontend/younes-assignment
+```
+
+2. Install dependencies:
+
+```bash
+npm install
+```
+
+3. Create a `.env` file in the project root and add your TMDB API key:
+
+```env
+VITE_TMDB_API_KEY=your-api-key-here
+VITE_TMDB_API_URL=your-api-url-here
+VITE_TMDB_API_READ_ACCESS_TOKEN=your-read-access-token-here
+```
+
+4. Run the development server:
+
+```bash
+npm run dev
+```
+
+5. Run tests locally:
+
+```
+npm run test
+```
+
+Open [http://localhost:5173](http://localhost:5173) in your browser.
+
+## 📖 Usage
+
+- Start typing a movie name in the search input → results will appear.
+- Click on a movie to view its details.
+- Use **Load More** to fetch additional results.
+
+## ✅ Notes
+
+- API requests use TheMovieDB’s free API — you need your own key.
+- [Get your API KEY](https://developer.themoviedb.org/docs/getting-started)

jobs/Frontend/younes-assignement/eslint.config.js

@@ -0,0 +1,23 @@
+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";
+import { globalIgnores } from "eslint/config";
+
+export default tseslint.config([
+  globalIgnores(["dist"]),
+  {
+    files: ["**/*.{ts,tsx}"],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs["recommended-latest"],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+]);

jobs/Frontend/younes-assignement/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>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>