Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
87 lines (65 sloc) 3.75 KB


vReel reel-to-reel SVG logo

by Dan McKeown

Table Of Contents


This project provides the following features:

  • Upload videos

    • Rename copied video file using user input plus random hash
    • Add video information, including file name, using via LokiJS [a MongoDB-like database that persists to JSON] to vspotindex.json
    • Video files are saved to /public directory inside app directory
  • View videos

    • Playable latest video is shown in middle of home page
    • Twenty next most recent videos [with year metadata > 2000] are shown in column on the left
    • Clicking on video launches /thisvideo/ page with video player
    • Each video has a perma-link


Screencast 13 on Youtube walks through installing and using vReel.


  1. Do the installation steps on your system's terminal
  2. Upload videos from your computer


  • vReel is built with ReactJS components (the project actually uses Preact in React comptability mode) which make up the front-end of the project
  • the layout uses CSS grid
  • the videos are served from the ExpressJS server, and due to the prohibitive cost of streaming large files through NodeJS, the video perma-link web pages are served directly by the Express server instead of by the (compiled) React components via RESTful APIs like for the rest of the site's functionality
  • the latest video uses an iframe to serve the video via Express
  • the left column uses DOM storage to save info on what video links to put in the list, and since DOM operations like that are async there is a refresh button there
  • API calls to the backend are done by the Axios library


  • Mac, Linux or Windows computer or server
  • NodeJS and NPM


  1. Clone the project: git clone
  2. Change directory: cd vreel
  3. Build: npm install
  4. Serve the site: npm run vreel
  5. Visit the site in a browser: http://localhost:3004


  • vReel is designed to be a video file archiver
  • metadata about the video (name, description, year, actor 1, actor 2) is optional but it is recommended as it is added to the [JSON-file-based MongoDB-like LokiJS] database


  • video list will only populate with movies that have a year and when it is later than 2000
  • random-ish hash added to file names does not roll until app restarts
  • all files are asssumed by app to be videos; behavior when uploading other files untested
  • no accounts or security to speak of--currently targeting personal installs via command line + Chrome; or Electron or NWJS packages


vReel is copyright (c) 2017 Dan McKeown

Licensed under ISC License