🖥️ TV Shows

TvShows provides on-demand streaming of movies, TV shows, and enables creating personalized playlists.

About

This project is a fake, streaming service inspired by Netflix. Its objective is to create a streaming platform/shows listing platform to try out the TV MAZE API.

The APP is made with Vite, React, TypeScript and TanStack Router.

Running the project

# Clone the repository

git clone https://github.com/fernandortec/tv-shows.git 
cd tv-shows

# Install necessary modules

pnpm install

# Run Application

pnpm dev

#The server will start at port:5173 - go to http://localhost:5173

The APP is made with Vite, React, TypeScript and TanStack Router.

Folder Structure

Services Created

The project uses the following services:

• Shows API:
  • find-all-shows.ts: Retrieves all shows from the API.
  • get-main-show.ts: Retrieves the main (featured) show from the API.
  • get-show-crew.ts: Retrieves the crew (cast and production) of a specific show.
  • list-episodes.ts: Retrieves the list of episodes for a specific show.
  • list-seasons.ts: Retrieves the list of seasons for a specific show.

Implemented API Requests

The project implements requests for the Shows API services listed above. The logic of how these requests are made and used can be found in the api directory.

System Components

The project uses the following React components:

• Layout:

  • App.tsx: Main application component.
  • header.tsx: Renders the application header.
  • footer.tsx: Renders the application footer.
  • navbar.tsx: Renders the application navigation bar.
  • hamburguer-menu-dialog.tsx: Renders the side menu accessible by a hamburger button.

• Common:

  • button.tsx: Generic button component.
  • search-input.tsx: Generic search field component.
  • pagination-progress.tsx: Component to display pagination progress.
  • notifications-dialog.tsx: Component to display notifications to the user.

• Shows Screens:

  • routes/shows/index.tsx: Main shows screen.
  • routes/shows/_components/*: Reusable components in shows screens.
    • -show-card.tsx: Displays a card with summary information for a show.
    • -show-details-dialog.tsx: Renders the modal window with details of a specific show.
    • -genres-section.tsx: Displays the genres section of a show.
    • -episodes.tsx: Displays the list of episodes for a show.
    • -select-seasons.tsx: Component to select seasons of a show.
    • -action-card.tsx: Component to display cards with actions related to shows (watch, favorite, etc.).

• Other:

  • routes/*: Other route components of the application (error, not found, etc.).
  • pricing.tsx: Pricing screen (hypothetical, no implementation).
  • support.tsx: Support screen (hypothetical, no implementation).

The responsibility of each component is to render its part of the application's graphical interface, reacting to state changes and interacting with other components through props and events.

Tech Stack

The following tools were used in the construction of the project:

Project Vite + React + TypeScript)

• Zod
• Vite
• TanStack Router
• TanStack Query
• Radix UI
• Zustand

See the file package.json

Utils

• Prototype: Figma → Media Streaming
• Editor: Visual Studio Code
• Markdown: StackEdit, Markdown Emoji
• Commit Conventional: Commitlint
• Icons: Lucide Icon,

Author

_{Fernando Rodrigues}

---