24G Video Player

A micro-website video player created with the Vue.js CLI and framework.

Live Site: https://24g-video-player.now.sh

Overview

💪 Challenge

Build a fully responsive micro-website to play videos using the Vue.js CLI and framework. Store all likes, comments, and views in a database. Create a REST API using ExpressJS to serve that data. Design according to the following desktop and mobile layouts:

💻 Tech Stack

• Frontend: A video player created with the Vue CLI and framework, BootstrapVue, Node Sass.
• Backend: A RESTFUL API built with NodeJS, Express, MongoDB, and Mongoose.
• Deployment:
  • Frontend: 24G Video Player deployed via Vercel.
  • Backend: 24G Video Server deployed via Heroku.

⏳ Project Status

The minimal viable product (MVP) requirements have been accomplished. Additional development is underway.

🚀 Getting Started

Prerequisites 📋

This project uses NodeJS, NPM and MongDB. To confirm if locally installed, run these commands in the terminal: node --version or npm --version for NodeJS and mongo --version for MongoDB. If not locally installed, you will need to install these via Homebrew (recommended) or check the links below for alternative download and install methods.

Homebrew Install

• Install Homebrew via the link above (if you do not have it already)
• Run brew install node to install both NodeJS and NPM
• Run brew tap mongodb/brew to add MongoDB's custom 'tap' (More Info)
• Run brew install mongo-community-shell for the latest version of the Mongo CLI only or run brew install mongodb-community to install the latest MongoDB Community Server plus command line tools

Homebrew Alternative Install

• NodeJS and NPM
• MongoDB

🔌 Dependencies

• Vue CLI
• Bootstrap
• BootstrapVue
• Vue2 Timeago
• Node Sass
• Sass Loader
• Express
• CORS
• Helmet
• Mongoose

💾 Project Setup & Installation

1. Open your terminal and in the desired directory, run git clone https://github.com/CodeMeKathy/24G-Video-Player.git to clone this project repository to the local machine.
2. Once cloned, in the terminal run cd 24G-Video-Player/client and npm install inside the client directory. You will have to do this again for the server directory.
3. From the client directory, run cd ../24G-Video-Player/server and run npm install.
4. In the 24G-Video-Player/server directory in your terminal, run node db/seed to create and seed the database.
5. In 24G-Video-Player/server run mongo in the terminal to start the MongoDB CLI.
6. Once the Mongo shell is initialized, run show dbs to double-check that your local database was created correctly. One of the results should be 24g-video-player.
7. Once all developer dependencies are downloaded, you are ready to get started.
   • In 24G-Video-Player/client run npm run serve to start the Vue.js dev server.
   • In 24G-Video-Player/server run npm run start to start the NodeJS dev server.
8. Visit locally running copy of the Vue.js project at http://localhost:8080 (or as indicated in the terminal).

🛠️ Technologies Used

• Vercel
• Heroku
• Real Favicon Generator
• Draw.io
• Insomnia

📂 Database Schema

📄 License

The code in this project is licensed under the MIT License © 2020 Kathy Lambert.