✨Scene-Movie-Platform✨

Table of Contents🧾

Introduction📌
Technology Used🚀
Getting Started💥
How To Contribute
Code Of Conduct📑
Project Admin⚡
Contributing is fun🧡

Introduction📌

Scene is a OTT platform clone, similar to popular streaming services like Netflix or Hulu. It is built using React.js for the frontend and Firebase for the backend services.

Features

User Authentication: Users can sign up, log in, and manage their accounts. Firebase Authentication is used to handle user authentication and account management.
Media Catalog: The platform provides a catalog of movies, TV shows, and other media content. Users can browse and search for their favorite shows or movies.
Media Details:Each media item has its own dedicated page with details such as title, description, genre, and rating.
User Profiles: Users can create personalized profiles and manage their watchlists, favorites, and viewing history.

Live Site -- Click Here

Technology Used🚀

(back to top)

Getting Started💥

To get started with Scene Movie Platform, follow the instructions below.

Prerequisites

Before installing the application, ensure that you have the following:

Node.js (version 12 or higher)
MovieDB API Key

Installation

Fork this Repository.
Clone the forked repository in your local system.

git clone https://github.com/<your-github-username>/Scene-Movie-Platform.git

Navigate to the project directory:

cd Scene-Movie-Platform

Install Dependencies

npm i
#or
yarn install

Running the Application

To run the application, follow the steps below

Set up a Firebase project and enable the necessary services ((Firebase Authentication, Firebase Firestore, Firebase Storage).

Firebase setup is already done in this repo you can skip this step.

Get an API KEY from MovieDB Website.
Create a .env file in root directory.

REACT_APP_API_KEY=paste your moviedb api key

Then start the application with

npm start #using npm 
#or
yarn start #using yarn

5.Open your web browser and visit localhost:3000 to access the Scene Movie Platform.

How To Contribute

We welcome contributions from the community! To contribute to the Scene Movie Platform project, follow the steps below:

View the Live Project here.
Raise an issue if you find a bug or add a feature.
Wait for the issue to be assigned and proceed only after the issue is assigned to you.
Navigate to the project directory.

cd Scene-Movie-Platform

Create a new branch for your feature.

git checkout -b <your_branch_name>

Perfom your desired changes to the code base.
Track and stage your changes.

# Track the changes
git status
# Add changes to Index
git add .

Commit your changes.

git commit -m "your_commit_message"

Push your committed changes to the remote repo.

git push origin <your_branch_name>

Go to your forked repository on GitHub and click on Compare & pull request.
Add an appropriate title and description to your pull request explaining your changes and efforts done.
Click on Create pull request.
Congrats! 🥳 You've made your first pull request to this project repo.
Wait for your pull request to be reviewed and if required suggestions would be provided to improve it.
Celebrate 🥳 your success after your pull request is merged successfully.

(back to top)

Increase Lighthouse score (Performance, Accessibity and SEO)

Use modern image formats like WebP, which offer better compression than JPEG or PNG.
Use lazy loading techniques to defer loading images until they come into view.
Minify your JavaScript and CSS files to remove unnecessary characters, white spaces, and comments, reducing file sizes. This will be done automatically when you build the react app.
Utilize code splitting techniques to load only the necessary code for each page, reducing the initial bundle size and improving load times.
Remove all the console.log messages.
Remove all the unused javascript codes.
Only include li tags directly inside ul tags
Add proper associated labels to all form elements