MERN Streaming

A minimal video streaming application with media upload and stream features - developed using React, Node, Express and MongoDB.

Pictorial View of the Application

Application Features

• Uploading videos
• Listing, displaying, updating, and deleting media file
• Storing and retrieving video details
• Streaming videos from cloud database to a basic media player

I am also currently doing refactoring of the application and improving more on the design and functionality.

How to use the application

Table of Contents

• Getting Started

  • Tools Required
  • Installation

• Development

• Running the App

• Deployment

• Authors

Getting Started

The project has two branches: main, dev.

• main contains the full source code on the solution I have developed for this project
• dev contains code under development and refactoring

Project Folder Structure

  project-title

  ├── README.md
  ├── package.json
  ├── yarn.lock
  ├── nodemon
  ├── .babelrc
  ├── .gitignore
  ├── template
  ├── client
  │   ├── assets
  |   |   ├── images
  │   ├── auth
  |   |   ├── api-auth.js
  |   |   ├── auth-helper.js
  |   |   ├── PrivateRoute.js
  |   |   ├── Signin.js
  |   ├── core
  |   |   ├── Home.js
  |   |   ├── Menu.js
  |   ├── media
  |   |   ├── api-media.js
  |   |   ├── DeleteMedia.js
  |   |   ├── EditMedia.js
  |   |   ├── Media.js
  |   |   ├── MediaList.js
  |   |   ├── MediaPlayer.js
  |   |   ├── NewMedia.js
  |   |   ├── PlayMedia.js
  |   |   ├── RelatedMedia.js
  |   ├── user
  |   |   ├── api-user.js
  |   |   ├── DeleteUser.js
  |   |   ├── EditProfile.js
  |   |   ├── Profile.js
  |   |   ├── Signup.js
  |   |   ├── Users.js
  |   ├── App.js
  |   ├── main.js
  |   ├── MainRouter.js
  |   ├── routeConfig.js
  │   └── theme.js
  ├── config
  |   ├── config.js
  ├── server
  |   ├── controllers
  |   |   ├── auth.controller.js
  |   |   ├── media.controller.js
  |   |   ├── user.controller.js
  |   ├── helpers
  |   |   ├── dbErrorHandler.js
  |   ├── models
  |   |   ├── media.model.js
  |   |   ├── user.model.js
  |   ├── routes
  |   |   ├── auth.routes.js
  |   |   ├── media.routes.js
  |   |   └── user.routes.js
  |   ├── devBundle.js
  |   ├── express.js
  |   └── server.js
  ├── webpack.config.client
  ├── webpack.config.client.production
  └── webpack.config.server

Tools Required

The following tools required to develop and run this application:

• A text editor (like VS Code) or an IDE
• Command Line

Installation

Installation steps:

1. Node JS and Yarn or NPM

   • Your computer must have Node.js and yarn/npm installed, to run this application. You can download Node.js from NodeJS and yarn from Yarn or npm from NPM.

2. Make sure you have MongoDB running on your computer.

Development server

3. Clone this repository

Running the App

4. Open command line in the cloned folder,
   • To install dependencies, run yarn or npm install
   • To run the application, run yarn dev or npm run dev
5. Open localhost:3000 in the browser

Deployment

You can deploy the application on any server. You can make use of Netlify for client,a git-based workflow and powerful serverless platform to build, deploy, and collaborate on web apps or Heroku for full-stack web apps. Visit Netlify or Heroku

Authors

Festus Ebin

• GitHub
• Linkedln

MERN Streaming App is a minimal YouTube clone web app

Technology used

I made use of these technology during the development process.

• React
• Material UI
• NodeJS
• Express Framework
• MongoDB
• Webpack

More Details

---

React combined with industry-tested, server-side technologies, such as Node, Express, and MongoDB, enables you to develop and deploy robust real-world full-stack web apps.