Frontend assignment solution from Younes Henni

[youneshenniwrites]

🎬 Movie Search App

A simple React + TypeScript application for searching movies using the TMDB API.

🖼️ Preview

Here’s a quick look at the app in action:

🚀 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
• TypeScript
• Vite (build tool)
• styled-components
• React Router

📦 Installation

1. Clone your fork of the repository:

git clone [email protected]:youneshenniwrites/Mews-Developers.git

cd Mews-Developers/frontend/younes-assignment

2. Install dependencies:

npm install

3. Create a .env file in the project root and add your TMDB API key:

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:

npm run dev

5. Run tests locally:

npm run test

Open 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