Code Monkey home page Code Monkey logo

mern_youtube_clone's Introduction

Mern_Youtube_Clone

⭐Youtube Clone built with Mern Stack⭐

GitHub stars GitHub forks GitHub watchers Repo. Size GitHub Maintained PRs Welcome

GitHub contributors GitHub Closed issues GitHub PR Open GitHub PR closed GitHub language count GitHub top language GitHub last commit

A beginner friendly project to help you in open source contributions.

Visit the Official Website »
Report Bug · Documentation Request . Feature Request

📌Table of Contents :

(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.

(back to top)

Open Source programs this repo has been part of



(back to top)

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

Javascript React MaterialUI Firebase NPM NodeJS React Redux Express.js MongoDB

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

image

image

image

(back to top)

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 and 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.

     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

(back to top)

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

(back to top)

Contributors


Thanks to these amazing people

(back to top)

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:

Feedback

If you have any feedback or suggestions please reach out to maintainers.

Or you can create a issue and mention there , which features can make this Project more good.


Show some ❤️ by starring this awesome repository!

Typing SVG

mern_youtube_clone's People

Contributors

mnnkhndlwl avatar sowham-3098 avatar arjunchoudhury07 avatar singhalaman23 avatar beingfarazkhan avatar mecivil avatar abhipatel10 avatar awesomeasma avatar learning-repo1 avatar pooranjoyb avatar rubyseher avatar tushar-go avatar vaibhavtalkhande avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.