Marketa Willis Mews Frontend Test

[marketaanezka]

Movie Search Application

Overview

This project is a simple movie search application built for the Mews frontend developer task. The application allows users to search for movies and view detailed information about them. It features automatic search as you type, pagination for search results, and detailed movie information views.

Features

• Search View: Automatically search for movies as you type
• Pagination: Load additional batches of search results
• Movie Detail View: View comprehensive information about selected movies
• URL State Management: Search parameters and state are preserved in the URL for easy sharing and navigation
• Responsive Design: Works well on various screen sizes

Technologies Used

Core Technologies

• React

• TypeScript

• Vite: Optimized production builds and better developer experience with hot module replacement.

Routing & Data Management

• TanStack Router: type-safe routing with search param support. Ideal for maintaining the application state in the URL. Search queries and pagination state are preserved during navigation and page refreshes.

• TanStack Query: Handles data fetching, caching, and state management for API requests.

• ky: A lightweight HTTP client based on the Fetch API that provides a simpler interface with better defaults, or refetching.

Data Validation

• Zod: Runtime type validation library that ensures data from external APIs matches expected schemas.
  • Runtime safety against unexpected API changes
  • Clear error messages when data doesn't match expected format
  • Automatic type inference to generate TypeScript types from schemas

Styling & UI

• Tailwind CSS: Utility-first CSS framework that speeds up development by providing predefined classes.

• shadcn/ui: Solid foundation of accessible, elegant, pre-built components that can be customized within the codebase.

Key Implementation Details

• Debounced Search: Search requests are debounced to avoid excessive API calls as the user types, improving performance and user experience.

• URL State Management: Search queries and pagination state are stored in the URL, this allows:

  • Shareable links with specific search results
  • Browser history navigation that maintains search context
  • Persistence of search state across page refreshes

• Component Structure: Folder structure follows Bulletproof React. The main logic is in the MovieSearch component, which manages the search state and handles search input, pagination, and results display.

Demo

The app is deployed on Netlify, you can visit it on https://mews-test.netlify.app/

Getting Started

1. Clone the repository
2. Install dependencies with npm install
3. Start the development server with npm run dev
4. Add .env file with VITE_BEARER_TOKEN to root
5. The application will be available at http://localhost:5173

Build & Deployment

To build the application for production: npm run build

This will create an optimized build in the dist directory that can be deployed to any static hosting service.