Skip to content

Conversation

i-zimmerman
Copy link

Movie Search App

A modern React application for searching movies, built with cutting-edge technology stack.

🎯 Key Features

  • Movie Search: Intuitive search by title with instant results
  • Detailed Information: Complete movie information including poster, description, rating, genres
  • Pagination: Convenient navigation through search results
  • Responsive Design: Optimized for all devices
  • Modern UI: Using shadcn/ui components

🛠 Technology Stack

  • Frontend: React 18 + TypeScript
  • Routing: TanStack Router
  • Styling: Tailwind CSS + shadcn/ui
  • Build Tool: Vite
  • API: The Movie Database (TMDB)
  • Testing: Jest + React Testing Library
  • Architecture: Feature-Sliced Design (FSD)

📁 Project Structure

The project is organized following Feature-Sliced Design principles:

src/
├── entities/movie/          # Business entities
├── features/               # Feature capabilities
│   ├── movie-search/       # Movie search
│   └── pagination/         # Pagination
├── pages/                  # Application pages
├── shared/                 # Reusable components
└── widgets/                # Composite blocks

🚀 Getting Started

npm install
npm run dev

✅ Testing

npm test

The application includes unit tests for all key components and functions.


Technical Implementation Highlights:

  • Clean architecture with Feature-Sliced Design
  • Comprehensive TypeScript coverage
  • Modern React patterns with hooks
  • Responsive design with Tailwind CSS
  • Complete test coverage
  • Production-ready build configuration

Implemented a modern movie search application with the following features:
- Movie search with debounced input
- Pagination for search results
- Movie details page with routing
- Responsive design with Tailwind CSS
- TypeScript support
- Comprehensive test coverage
- Feature-Sliced Design architecture

Tech stack:
- React 18 with TypeScript
- TanStack Router for routing
- TanStack Query for data fetching
- Tailwind CSS for styling
- Vite for build tooling
- Vitest and React Testing Library for testing
Move all frontend-related files into a dedicated frontend-app directory to improve project organization and maintainability. This includes source files, configuration files, assets, and build configurations. Delete old files from the root directory after migration.

The restructuring follows feature-sliced design architecture principles and maintains all existing functionality while making the codebase more modular and easier to navigate.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants