movie app -react-routing -api

1. Project Overview

Movie App is a responsive web application that allows users to search, browse, and view information about movies. It fetches data from The Movie Database (TMDB) API and displays movie posters, titles, ratings, release dates, and descriptions. The app also includes search suggestions, pagination, and a smooth user experience.

2. Features

Browse popular movies.

Search movies by title with live suggestions.

Movie details page (poster, overview, rating, release date).

Pagination for navigating large sets of movies.

Responsive design for mobile, tablet, and desktop.

Skeleton loading cards while fetching data.

Navigation bar with brand logo and links (Home, About).

3. Technologies Used

Frontend:

React.js (functional components, hooks)

React Router DOM (routing)

React-Bootstrap (UI components)

CSS for custom styling

Backend / API:

No custom backend — uses TMDB API

Axios for HTTP requests

Other:

JavaScript (ES6+)

Environment variables (VITE_TMDB_KEY) for API key

Local caching in memory to reduce repeated API requestssrc/

├─ components/

│ ├─ NavBar.jsx # Navigation bar with search

│ ├─ MovieList.jsx # Displays list of movies with pagination

│ ├─ CardMovie.jsx # Individual movie card

│ ├─ SkeletonCard.jsx # Skeleton card for loading

├─ pages/

│ ├─ Home.jsx # Home page with MovieList

│ ├─ About.jsx # About page

│ ├─ MovieDetails.jsx # Single movie detail page

├─ utils/

│ ├─ api.js # Axios instance and TMDB API endpoints

├─ App.jsx # Main app routing

└─ main.jsx # App entry point