React Movie App

A modern React application for searching and tracking movies, built with React + Vite. This application allows users to search for movies, view details, rate them, and maintain a personal watched list.

Project Structure

Components

• App.jsx: Main application component managing state and routing
• MovieDetails.jsx: Displays detailed information about a selected movie
• MoviesList.jsx: Renders the list of searched movies
• WatchedMovie.jsx: Individual watched movie component
• WatchedMoviesList.jsx: List of movies marked as watched
• WatchedSummary.jsx: Summary statistics of watched movies
• StarRating.jsx: Reusable star rating component
• Search.jsx: Movie search component
• Navbar.jsx: Navigation component
• Box.jsx: Container component
• Loader.jsx: Loading state component
• Error.jsx: Error handling component
• Logo.jsx: Application logo component
• NumResult.jsx: Displays number of search results

Hooks

• useMovies.jsx: Custom hook for fetching movie data
• useLocalStorageState.jsx: Hook for managing persistent state in localStorage
• useKey.jsx: Hook for handling keyboard events

Features

• Movie search functionality using OMDB API
• Detailed movie information display
• Personal movie rating system
• Watched movies list with statistics
• Local storage persistence for watched movies
• Responsive design with modern UI
• Keyboard shortcuts support

State Management

• React useState for local component state
• Custom hooks for complex state logic
• Local storage integration for data persistence

Development

This project uses Vite as the build tool and development server. Key features include:

• Hot Module Replacement (HMR)
• ESLint integration
• Fast development server

Getting Started

1. Clone the repository
2. Install dependencies: npm install
3. Start development server: npm run dev
4. Build for production: npm run build

Technologies

• React
• Vite
• Tailwind CSS
• OMDB API
• ESLint

Project Structure

src/
  ├── components/     # React components
  ├── hooks/          # Custom React hooks
  ├── assets/         # Static assets
  ├── App.jsx         # Main application component
  ├── App.css         # Application styles
  ├── main.jsx        # Application entry point
  └── index.css       # Global styles