mern_youtube_clone

KO | EN

gitlite — search

#javascript #python #llm #go #machine-learning #rust #deep-learning #linux #docker #java #windows #awesome #kubernetes #mcp

mern_youtube_clone

(★ 10)

Youtube Clone built with Mern Stack and Firebase

mern_youtube_clone 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h1 align="center"> Mern_Youtube_Clone </h1>
<h3 align="center"> ⭐Youtube Clone built with Mern Stack⭐ </h3>

![GitHub stars](https://img.shields.io/github/stars/mnnkhndlwl/mern_youtube_clone?)
![GitHub forks](https://img.shields.io/github/forks/mnnkhndlwl/mern_youtube_clone?)
![GitHub watchers](https://img.shields.io/github/watchers/mnnkhndlwl/mern_youtube_clone?)
![Repo. Size](https://img.shields.io/github/repo-size/mnnkhndlwl/mern_youtube_clone?)
![GitHub Maintained](https://img.shields.io/badge/Maintained%3F-yes-brightgreen.svg?)
![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?)
    
![GitHub contributors](https://img.shields.io/github/contributors/mnnkhndlwl/mern_youtube_clone?)
![GitHub Closed issues](https://img.shields.io/github/issues-closed-raw/mnnkhndlwl/mern_youtube_clone?)
![GitHub PR Open](https://img.shields.io/github/issues-pr/mnnkhndlwl/mern_youtube_clone?)
![GitHub PR closed](https://img.shields.io/github/issues-pr-closed-raw/mnnkhndlwl/mern_youtube_clone?)
![GitHub language count](https://img.shields.io/github/languages/count/mnnkhndlwl/mern_youtube_clone?)
![GitHub top language](https://img.shields.io/github/languages/top/mnnkhndlwl/mern_youtube_clone?)
![GitHub last commit](https://img.shields.io/github/last-commit/mnnkhndlwl/mern_youtube_clone?)

</div>

<p align="center">
 <strong> A beginner friendly project to help you in open source contributions. </strong>
   <br>
 
  <br />
    <strong> <a href="https://youtube-clone-z4tb.onrender.com/">Visit the Official Website » </strong></a> 
    <br />
    <a href="https://github.com/mnnkhndlwl/mern_youtube_clone/issues/new?assignees=&labels=bug%2CPriority-High%2Cwant+fix%2CReview+Required&template=bug_report.yml&title=%5BBug%5D%3A+">Report Bug</a>
    ·
    <a href="https://github.com/mnnkhndlwl/mern_youtube_clone/issues/new?assignees=&labels=documentation%2Cenhancement%2Cgood+first+issue&template=doc_report.yml&title=%5BDoc%5D%3A+">Documentation Request</a>
	.
	<a href="https://github.com/mnnkhndlwl/mern_youtube_clone/issues/new?assignees=&labels=feature%2CReview+Required&template=feature_request.yml&title=%5BFeature%5D%3A+">Feature Request</a>
  </p>

### 📌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)

<p align="right">(<a href="#Bottom">Bottom</a>)</p>

<br>

## What is Open Source?
  
  <p align="center">   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 <a href="https://www.digitalocean.com/community/tutorial_series/an-introduction-to-open-source"> here. </a>

</p>
  
 <p align="right">(<a href="#top">back to top</a>)</p>

## Open Source programs this repo has been part of
<a href="https://github.com/mnnkhndlwl/mern_youtube_clone"><img src="https://badges.frapsoft.com/os/v2/open-source.svg?v=103"></a>

<div align="center">
    <a href="https://jwoc.tech/">JGEC Winter of Code</a>

</div>

<div align="center">
    <a href="https://hacktoberfest.com/">Hacktoberfest 2023</a>

</div>

<br>

## Overview of Project

<p align="center">   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.
</p>

### Tech Stacks used

![Javascript](https://img.shields.io/badge/JavaScript-323330?style=for-the-badge&logo=javascript&logoColor=F7DF1E)
  ![React](https://img.shields.io/badge/React-323330?style=for-the-badge&logo=react&logoColor=F7DF1E)
  ![MaterialUI](https://img.shields.io/badge/Material--UI-0081CB?style=for-the-badge&logo=material-ui&logoColor=F7DF1E)
  ![Firebase](https://img.shields.io/badge/firebase-%23039BE5.svg?style=for-the-badge&logo=firebase)
  ![NPM](https://img.shields.io/badge/NPM-%23000000.svg?style=for-the-badge&logo=npm&logoColor=white) 
  ![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white) 
  ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) 
  ![Redux](https://img.shields.io/badge/redux-%23593d88.svg?style=for-the-badge&logo=redux&logoColor=white) 
  ![Express.js](https://img.shields.io/badge/express.js-%23404d59.svg?style=for-the-badge&logo=express&logoColor=%2361DAFB) 
  ![MongoDB](https://img.shields.io/badge/MongoDB-%234ea94b.svg?style=for-the-badge&logo=mongodb&logoColor=white)

### 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
# ![image](https://user-images.githubusercontent.com/75252077/224484912-899b97b9-c8e5-4e06-9dc6-1677ff190c20.png)
# ![image](https://user-images.githubusercontent.com/75252077/215504244-3c88e023-4749-4366-99f5-b50575440c94.png)
# ![image](https://user-images.githubusercontent.com/75252077/215592578-6ba38684-3016-45c9-9c5f-05e620f91227.png)

# ![image](https://user-images.githubusercontent.com/75252077/215592676-c3456e26-73e0-4b17-9236-ae1199ddc4c1.png)

# ![image](https://user-images.githubusercontent.com/75252077/215592772-3840835c-d298-41b8-9f12-a23c0d633f47.png)

## Contribution Guidelines

<a href="https://github.com/mnnkhndlwl/mern_youtube_clone"><img src="https://img.shields.io/static/v1.svg?label=Contributions&message=Welcome&color=royalblue"></a>
<a href="https://github.com/mnnkhndlwl/mern_youtube_clone"><img src="https://img.shields.io/github/contributors/aman34503/Go-Airbnb?color=royalblue&style=flat-square"></a>
<a href="https://github.com/mnnkhndlwl/mern_youtube_clone"><img src="https://img.shields.io/badge/Maintained%3F-yes-brightgreen.svg?color=royalblue&style=flat-square"></a>
#### 🔑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.<br/>

- 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 <your_branch_name>
        ```
- 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 <your_branch_name>
        ```
- 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
<div align="center">
<a href="https://github.com/mnnkhndlwl/mern_youtube_clone"><img src="https://forthebadge.com/images/badges/built-by-developers.svg"  ></a> 
<a href="https://github.com/mnnkhndlwl/mern_youtube_clone"><img src="https://forthebadge.com/images/badges/built-with-love.svg"  ></a> 
</div>
<br>
<div>
<h1 align="center">
 <b>Thanks to these amazing people
<h1>
<a href="https://github.com/mnnkhndlwl/mern_youtube_clone/contributors">
  <img src="https://contrib.rocks/image?repo=mnnkhndlwl/mern_youtube_clone&&max=817" />
</a>
</div>

## 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)
	
	 
	 <p align="right">(<a href="#top">back to top</a>)</p>

## Feedback

If you have any feedback or suggestions please reach out to maintainers.  
* [Manan khandelwal](https://github.com/mnnkhndlwl) 
  
Or you can create a  <a href="https://github.com/mnnkhndlwl/mern_youtube_clone/issues/new?assignees=&labels=feature%2CReview+Required&template=feature_request.yml&title=%5BFeature%5D%3A+">issue</a> and mention there , which features can make this Project more good.

<br>
	 
<div align="center">
<h3>Show some ❤️ by starring this awesome repository!</h3>
</div>

### [![Typing SVG](https://readme-typing-svg.herokuapp.com/?lines=Thanks+for+contributing!;&size=30;align=center)](https://git.io/typing-svg)
  
  
<div id="Bottom"></div>

mern_youtube_clone

mern_youtube_clone 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

mern_youtube_clone

mern_youtube_clone 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README