Skip to content

Latest commit

 

History

History
126 lines (88 loc) · 5.74 KB

README.md

File metadata and controls

126 lines (88 loc) · 5.74 KB

PixelFlix

Project Status React Firebase Node Version npm Figma Design ClickUp Board Firebase Documentation

PixelFlix is a video streaming web application inspired by Netflix, built with React, Firebase, and Firestore. The app provides users with a personalized streaming experience, allowing them to create multiple profiles, bookmark movies and shows, and view trending media. Key features include user authentication, profile management, trending recommendations, and media filtering by categories and genres.

Live Demo

Check out the live version of PixelFlix by visiting the link below:

PixelFlix - Live Demo

Create an account, explore the main features, and test the multi-profile experience in real-time!

Requirements

To run PixelFlix locally, you will need the following:

  • Node.js (version 14 or later)
  • npm (comes with Node.js)

Usage

To start using PixelFlix, follow these commands:

  1. Clone the Repository:

    git clone https://github.com/grammerjam/team-pixelflix.git

  2. Change Directories into pixelflix-app:

    cd /pixelflix-app

  3. Install Dependencies:

    npm i

  4. Run the Server:

    npm run dev

Technologies Used

Frontend: React, HTML, SASS
Backend: Firebase (FireAuth, Firestore, Hosting) (serverless)

Project Structure

src/: Contains all the React component code, stylesheets, and assets for the application.
public/: Houses static files like favicon and any non-JavaScript assets.

Database Schema

User

Field Data Type Description
userId String Unique identifier for the user (auto-generated)
email String User's email address
createdAt Timestamp Date and time the user was created
profiles Array Array of profile objects associated with the user

Profile

Field Data Type Description
profileId Number Unique identifier for the profile
avatar String Avatar image identifier for the profile
avatarColor String Color code for the avatar
name String Name for the profile
bookmarks Array Array of bookmarked items for this profile

Bookmark

Field Data Type Description
id String Unique identifier for the video item in the bookmarks array
category String Type of media (e.g., "Movie" or "TV Show")
genre String Genre of the media (e.g., "Documentary", "Action")
isTrending Boolean Indicates if the media is currently trending
rating String Content rating of the media (e.g., "PG", "R")
thumbnail String URL to the thumbnail image for the media
title String Title of the media
views Number Number of views the media has received
year Number Year the media was released

Movies-TV

Field Data Type Description
id String Unique identifier for the video item
category String Type of media (e.g., "Movie" or "TV Show")
genre String Genre of the media (e.g., "Documentary", "Action")
isTrending Boolean Indicates if the media is currently trending
rating String Content rating of the media (e.g., "PG", "R")
thumbnail String URL to the thumbnail image for the media
title String Title of the media
views Number Number of views the media has received
year Number Year the media was released

Useful Resources

  • Figma Design: Preview the app’s design system in Figma.
  • Project Management: View the project’s ClickUp board for task tracking and collaboration.
  • Firebase Documentation: Refer to the Firebase documentation to understand how to configure your Firebase and Firestore settings.

Powered by Grammerhub