https://github.com/mnnkhndlwl/mern_youtube_clone
Youtube Clone built with Mern Stack and Firebase
https://github.com/mnnkhndlwl/mern_youtube_clone
beginner-friendly css database docker docker-compose firebase hacktoberfest javascript jwoc mongodb nodejs nosql reactjs styled-components website
Last synced: about 1 month ago
JSON representation
Youtube Clone built with Mern Stack and Firebase
- Host: GitHub
- URL: https://github.com/mnnkhndlwl/mern_youtube_clone
- Owner: mnnkhndlwl
- License: mit
- Created: 2022-07-22T18:55:34.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2025-06-30T09:31:29.000Z (4 months ago)
- Last Synced: 2025-06-30T10:36:06.696Z (4 months ago)
- Topics: beginner-friendly, css, database, docker, docker-compose, firebase, hacktoberfest, javascript, jwoc, mongodb, nodejs, nosql, reactjs, styled-components, website
- Language: JavaScript
- Homepage: https://youtube-clone-z4tb.onrender.com
- Size: 1.7 MB
- Stars: 12
- Watchers: 1
- Forks: 30
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
Mern_Youtube_Clone
⭐Youtube Clone built with Mern Stack⭐
A beginner friendly project to help you in open source contributions.
Visit the Official Website »
Report Bug
·
Documentation Request
.
Feature Request
### 📌Table of Contents :
- [](#)
- [](#-1)
- [](#-2)
- [](#-3)
- [](#-4)
- [Contribution Guidelines](#contribution-guidelines)
- [🔑Guidelines](#guidelines)
- [How to Contribute:](#how-to-contribute)
- [Usage](#usage)
- [Install dependencies](#install-dependencies)
- [Run Server](#run-server)
- [Contributors](#contributors)
- [Github Beginner Guide](#github-beginner-guide)
- [Are you a beginner in using Github?](#are-you-a-beginner-in-using-github)
- [Feedback](#feedback)
- [](#-5)
(Bottom)
## What is Open Source?
The open source community provides a great opportunity for aspiring programmers to distinguish themselves; and by contributing to various projects, developers can improve their skills and get inspiration and support from like-minded people. When you contribute to something you already know and love, it can have so much more meaning, because you know how the tool is used and the good it does for you. Being part of an open source community opens you up to a broader range of people to interact with.
Read more about it here.
## Open Source programs this repo has been part of
## Overview of Project
The goal of this project is to help the beginners with their contributions in Open Source. We aim to achieve this collaboratively, so feel free to contribute in any way you want, just make sure to follow the contribution guidelines.
### Tech Stacks used
### Key Features
```
# ReactJS in the frontend
# State management in the frontend using Redux & Redux Toolkit
# Styled components with more emphasis on custom CSS & little bit of Material UI & Icons
# Video & Image upload using firebase storage
# Search, Like & Dislike, Subscribe a channel & Comment a video features
# Video recommendations on the video page
# Light / Dark Mode toggling
# Axios http client
# JWT cookie authentication
# Hashed password saving in the MongoDB database
# Login & Signup with custom Email & Password, Google OAuth using firebase authentication
# RESTful API using ExpressJS and MongoDB with mongoose
# Error handler & Protected routes
```
### Screenshots of Website
# 
# 
# 
# 
# 
## Contribution Guidelines
#### 🔑Guidelines
Here are some set of guidelines to follow while contributing to `mern_youtube_clone` :
```
1. Welcome to this repository, if you are here as an open-source program participant/contributor.
2. Participants/contributors have to **comment** on issues they would like to work on, and mentors or the PA will assign you.
3. Issues will be assigned on a **first-come, first-serve basis.**
4. Participants/contributors can also **open their issues**, but it needs to be verified and labelled by a mentor. We respect all your contributions, whether
it is an Issue or a Pull Request.
5. When you raise an issue, make sure you get it assigned to you before you start working on that project.
6. Each participant/contributor will be **assigned 1 issue (max)** at a time to work.
7. Don't create issues that are **already listed**.
8. Please don't pick up an issue already assigned to someone else. Work on the issues after it gets **assigned to you**.
9. Create your file in an appropriate folder with appropriate name and extension.
10. Pull requests will be merged after being **reviewed** by mentor .
11. We all are here to learn. You are allowed to make mistakes. That's how you learn, right!.
```
### How to Contribute:
- Before Contribute Please read [CONTRIBUTING.md](https://github.com/mnnkhndlwl/mern_youtube_clone/blob/master/CONTRIBUTING.md) and [CODE_OF_CONDUCT.md](https://github.com/mnnkhndlwl/mern_youtube_clone/blob/master/CODE_OF_CONDUCT.md)
- Fork the repo to your Github.
- Clone the Forked Repository to your local machine.
```
git clone https://github.com/ mnnkhndlwl/mern_youtube_clone.git.
```
- Change the directory to mern_youtube_clone.
```bash
cd mern_youtube_clone
```
- Add remote to the Original Repository.
```
git remote add upstream https://github.com/mnnkhndlwl/mern_youtube_clone.git
```
- Check the remotes for this repository.
```
git remote -v
```
- Always take a pull from the upstream repository to your master branch to keep it at par with the main project(updated repository).
```
git pull upstream main
```
- Create a new branch.
```
git checkout -b
```
- Perform your desired changes to the code base.
- Track your changes:heavy_check_mark: .
```
git add .
```
- Commit your changes .
```
git commit -m "Relevant message"
```
- Push the committed changes in your feature branch to your remote repo.
```
git push -u origin
```
- To create a pull request, click on `compare and pull requests`. Please ensure you compare your feature branch to the desired branch of the repository you are supposed to make a PR to.
- Add appropriate title and description to your pull request explaining your changes and efforts done.
- Click on `Create Pull Request`.
- Voila! You have made a PR to this repo. Sit back patiently and relax while your PR is reviewed
## Usage
Create .env file in the server folder and add the following environment variables:
```
# MONGO =
# JWT =
# PORT = 3001
```
Create .env file in the client folder and add the following environment variables, values can be found from firebase project setup
```
# REACT_APP_FIREBASE_KEY =
# GENERATE_SOURCEMAP=false
```
### Install dependencies
```
# Backend deps
cd server
npm install
# client deps
cd client
npm install
```
### Run Server
```
# Backend Server (Local)
cd server
npm start
# client Server (Local)
cd client
npm start
```
you need to setup new project in firebase and enable storage and signin with google option
## Contributors
Thanks to these amazing people
## Github Beginner Guide
#### Are you a beginner in using Github?
You can refer to the following articles on the basics of Git and Github and also contact me, in case you are stuck:
- [Forking a Repo](https://help.github.com/en/github/getting-started-with-github/fork-a-repo)
- [Cloning a Repo](https://help.github.com/en/desktop/contributing-to-projects/creating-an-issue-or-pull-request)
- [How to create a Pull Request](https://opensource.com/article/19/7/create-pull-request-github)
- [Getting started with Git and GitHub](https://towardsdatascience.com/getting-started-with-git-and-github-6fcd0f2d4ac6)
- [Learn GitHub from Scratch](https://lab.github.com/githubtraining/introduction-to-github)
## Feedback
If you have any feedback or suggestions please reach out to maintainers.
* [Manan khandelwal](https://github.com/mnnkhndlwl)
Or you can create a issue and mention there , which features can make this Project more good.
Show some ❤️ by starring this awesome repository!
### [](https://git.io/typing-svg)