A Video Sharing Website with React/Node

Circle

Circle is a video sharing web app, simple to view, shares and discover new videos...

Demo

Check out the Demo . N.B. If you try to upload new videos on the demo site and it fails it's probably because the filestack files upload quota is reached... This being just a demo i'm subscribed to their free plans... and it only allow 100 uploads per month.

Built With:

• React Js - A JavaScript library for building user interfaces.
• Node Js - A JavaScript runtime built on Chrome's V8 JavaScript engine.

Fan of Typescript ? check out the typescript version of the Restfull API

Documentation

Requirements

• ffmpeg - FFmpeg is a collection of libraries and tools to process multimedia content such as audio, video, subtitles and related metadata.
• A Subscrition to FIlestack API - The File Handling Service for Developers
• MongoDB - Database Solution

Installation

Clone the repo:

git clone https://github.com/ThalKod/react_video_sharing.git

Install and start the api

Create a .env file at the route of your api folder:

$ cd react_video_sharing/api/
 $ touch .env

Copy and Update this template:

#JWT
JWT_SECRET = YOUR_JSON_WEB_TOKEN-SECRET_KEY
JWT_REFRESH_TOKEN_SECRET = YOUR_REFRESH_TOKEN_SECRET_KEY

#Database
DB_URL = YOUR_DB-URL

#Filestack
FILESTACK_API_KEY= YOUR_FILESTACK_API_KEY

#API
API_BASE_URL = /api/v0

Install and start the API:

$ npm install
 $ npm run dev

The API should be running on localhost:3080

Install and start the client

Create a .env file at the root of your client folder:

$ cd react_video_sharing/
  $ touch .env

Copy and Update this template:

REACT_APP_API_URL = /api/v0

#Filestack
REACT_APP_FILESTACK_API_KEY  = YOUR_FILE_STACK_API_KEY

NODE_PATH=src

Install and start the React client:

$ yarn install
 $ yarn start

Client is running on localhost:3000

Contribution

Feel Free to contribute, PR are the most welcome :) , fork the development branch and start working...

TODO

I'll will keep working on :

• Adding banner image and profile photo upload on channel page.
• Adding Filter on Search result page.
• Add caching with redis.
• Refactor recursive coments logic
• Fix mobile responsive UI issue
• Add Like videos Feature
• More filter overall
• Add Like comment Feature
• Add more test
• And more...

License

MIT License

Copyright (c) 2019 Thal Marcelin

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.