🖥️ TV Shows
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.
# 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.
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.
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.
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.
The following tools were used in the construction of the project:
Project Vite + React + TypeScript)
See the file package.json
- Prototype: Figma → Media Streaming
- Editor: Visual Studio Code
- Markdown: StackEdit, Markdown Emoji
- Commit Conventional: Commitlint
- Icons: Lucide Icon,
![Fernando Rodrigues](https://github.com/fernandortec.png)
Fernando Rodrigues