ViBi Flix

ViBi Flix: Visual Interface

Description

A responsive streaming platform built with Vue.js, leveraging the TMDB public API. This project was developed as part of the TIC 12 Technological Residency Program (RESTIC 12).

Table of Contents

• Objective
• Features
• Tools
• Project Structure
• Demo
• Developers

---

Objective

• Develop a platform capable of consuming the TMDB public API to retrieve data on popular movies and TV series.

Features

• Information view about popular movies and tv series.
• View updated information about popular movies and TV series.
• Add and remove movies and TV series to/from favorites.
• Watch trailers directly on the platform.
• Responsive design optimized for desktop, tablet, and mobile screens.

Tools

Project Structure

📁 src/                 # Directory containing all project files.
│
├───📁 assets/          # Contains static files such as images, fonts, and icons.
│
├───📁 components/      # Stores reusable UI components used across the application.
│
├───📁 model/           # Defines interfaces and types for managing application data structures.
│
├───📁 modules/         # Organizes related functionality and global application components.
│
├───📁 router/          # Manages application routes and navigation logic.
│
├───📁 service/         # Contains the application's service layer for API requests and data handling.
│   │
│   ├───📁 rest/        # Contains service files for making REST API calls.
│
├───📁 utils/           # Includes utility functions and helpers for common operations.
│
├───📁 views/           # Contains the application's main pages and views.
│   │
│   ├───📁 Favorites/   # The view for displaying the user's favorite movies and series.
│   │
│   ├───📁 Home/        # The view for displaying the homepage content.
│   │
│   ├───📁 Movies/      # The view for displaying the movies section.
│   │
│   └───📁 Series/      # The view for displaying the series section.
│
├───📄 App.vue          # The root component that serves as the application's main container.
│
└───📄 main.ts          # The entry point that sets up and initializes the Vue application.

Demo

ViBi Flix: Mobile Version

ViBi Flix: Tablet Version

ViBi Flix: Desktop Version

You can explore the ViBi Flix streaming platform here.

Developers

Beatriz Monteiro

Vitor Pires