Skip to content
vidNote 2.0 is an improved web app for sharing noteworthy moments from Youtube videos. It's new features include user accounts, twitter login, facebook login, saving videos and much more!
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Techdegree Project Twelve

vidNote 2.0

This project is an improved way of sharing noteworthy moments from Youtube videos.

Technologies Used

  • Backend - Node.js & Express

  • Frontend - Custom CSS + Bootstrap & React

  • Database - Document based: MongoDB

  • Heroku - Used to deploy the web app

APIs Used

  • YouTube

    This project uses YouTube's Iframe Player and Data API.

  • Twitter Login

    This project uses Twitter's API to login.

  • Facebook Login

    This project uses Facebook's API to login.

Be sure to have Node.js & MongoDB installed on your machine

How to get up and running locally

Clone the repo from github

git clone

Move into the project directory

cd vidnote-2.0

Run the following commands in the root of the project directory

Install main project dependencies

npm install

Install frontend dependencies

npm run install-client

Create a .env file

touch .env

Inside the .env file


In a new terminal tab

Before running the app be sure start MongoDB


Back in the previous terminal tab

Start the app

npm start

To view the app: Running npm start will run the project on port:5000 and build the frontend of the app. After the React build process has completed visit port 5000 in your browser.

Note: When using the login feature with Twitter be sure that the URL is and not localhost:5000.

When using the login feature with Facebook be sure that the URL is localhost:5000 and not

How to test

Start MongoDB in a new terminal tab


Run the test script

npm test

How to get a your developer keys

YouTube Data API key:

Visit YouTube's API docs for how to get the api key.

Twitter consumer key and consumer secret:

Head over to Twitter's Developer Platform and create a new app.

Facebook app id and app secret:

Create a new app on Facebook's Developer Platform.

You can’t perform that action at this time.