🎬 Streamovie, an application to explore movies, create favorites lists, and discover new content via TMDB API.

_{💎 Roadmap  |  📂 Pages structure  |  🏗️ Project Architecture  |  🛸 Techs  |  ⚙️ TMDB (API)}

^{⚠️ Prerequisites  |  ❔ How To Use  |  🔖 Badges  |  ☎ Contact Me}

💎 Roadmap

• Base structure with React + Vite + TypeScript
• Explore popular movies from the TMDB API
• Movie listing, search, and favorite functionality
• Create custom favorite lists
• Routing and navigation with React Router
• Global state management with Redux Toolkit
• Full responsiveness with Tailwind CSS
• Error handling and loading states
• Clean code organization and architecture
• Unit testing with Vitest and Testing Library
• Production deployment

📂 Pages structure

_{🏠 Home (/)}

🕹️^🤏

• Fixed header with logo, global search bar, and navigation menu
• Responsive grid displaying popular movies
• Paginated movie listing
• Each movie card displays:
  • Title
  • Poster (https://image.tmdb.org/t/p/w300/{poster_path})
  • TMDB rating
  • Favorite icon

_{🎞️ Move details (/movie/:id)}

🕹️^🤏

• Large image on the left and content on the right
• Displays title, genres, release date, rating, and synopsis
• Button to add or remove from favorites

_{❤️ Favorites (/favorites)}

🕹️^🤏

• Grid layout similar to the Home page
• List of favorited movies
• Trash icon to remove a movie from favorites
• Sorting filters by:
  • Title (A–Z / Z–A)
  • Rating (↑↓)
• Empty state with image, info message, and call-to-action

_{🔍 Search (/search?q=termo)}

🕹️^🤏

• Synchronized search bar
• Results displayed in a grid layout
• Highlight of the searched term
• Paginated search results

🏗️ Project Architecture

/src
  /assets
  /components
    /ui
    /layout
  /config
  /features
    /home
    /movieDetails
    /favorites
    /pageNotFound
    /search
  /routes
  /services
  /stores
  /tests
  /types
  /utils

🛸 Techs

This project was developed with the following technologies:

dependencies	Description
Vite	Fast and optimized bundler
React 19	Tha main library of the application
Redux Toolkit	Global state management
React Router DOM	Pages routing
ShadCN UI	Custom accessible components
Radix UI	Accessible components
TailwindCSS	Easy to style and create responsive app
Embla Carousel	Lib to handle carousel application
React Hook Form	Easy to deal with form handler
Lucide React	Lightweight and modern icons
Axios	To make API HTTP request
TMDB API	The Movie Database API
Zod	Data validation

devDependencies	Description
TypeScript	Static type to be more readable
Vitest + React Testing Library (RTL)	Unit tests

Others	Description
VS Code with Biome	Visual Studio Code (IDE) with Biome as linter

⚙️ TMDB (API)

The application consumes the API do TMDB to list, search, and display detailed information about movies. You need to create a free account and generate your own API Access Token.

Main Endpoints:

Endpoint	Description
/movie/popular	List of popular movies
/search/movie?query={termo}	Movie search
/movie/{id}	Details of a specific movie

⚠️ Prerequisites

Before running this project locally, you need to have:

• Git
• Node.js >= v18
• Yarn >= v1.22 or npm >= 8
• Account and API Access Token from TMDB

Make sure you have a valid TMDB API Access Token and your environment set up.

1. Create a free account: TMDB
2. Generate an API Access Token: TMDB API
3. Create a .env file based on .env.example with your API Access Token

🧾 .env.example

VITE_TMDB_API_ACCESS_TOKEN=your_api_access_token
VITE_TMDB_API_URL=https://api.themoviedb.org/3

❔ How To Use

From your command line follow these steps...

Clone the repository and start the project locally:

git clone https://github.com/caiohenrique-developer/streamovie
cd streamovie

Install dependencies:

yarn

...or (if you prefer npm):

npm install

Start the development server

yarn dev

...or (if you prefer npm):

npm run dev

You'll be able to see the URL http://localhost:{port} on your command line.

So open them and just enjoy this project! ;)

⚠️ Atention:

Don't forget to create your .env file based on .env.example

🚀 Or go to streamovie-psi.vercel.app to see the project in a production environment.

🔖 Badges

☎ Contact Me

“Always running in search of new movies!”
Done with ☕ by Caio Henrique 👇 Get in touch!