Spinprops is an ongoing ambitious project that I started mid 2015.  At the time of writing it is currently still in development.  I still work on it in my spare time so it’s progress comes in waves.

The webapp’s purpose is a place where people can share videos of Circus and Fire arts.  It currently support content from Vimeo and Youtube, but eventually I’ll integrate Facebook and allow videos and a ‘like’ rating system through the Facebook API.

Major features of the site:

  • Isomorphic, it’s built in Javascript but turning off javascript will still allow pages to render making it SEO friendly
  • Responsive webapp using Material-ui and the Bootstrap grid
  • Modern workflow using Gulp, Webpack.
  • Parse a youtube or vimeo URL and grab the video’s metadata.
  • Administration system that allows moderation of user submitted data
  • Deep linking into individual pages
  • ‘Tag’ system
  • Filter and Search system
  • ‘Favorite’ system that allows an administrator to sticky video’s to the first results

Major technology used:

  • React – Facebook’s user interface library
  • Flux / Fluxxor – Facebook’s information architecture using for applications
  • React-starter-kit – The boiler plate template I used to start my application
  • Webpack – The module builder I used to bundle up all my assets, enabled me to write scoped CSS, this means my CSS is writen on a non-global scale and written for components. Also served as a local web sever that allowed rapid local development
  • Material-ui – A Set of React Components that Implement Google’s Material Design
  • Express / Node JS – Backend runtime environment that served the webapp
  • MongoDB / Mongoose– The document driven database I used store my information, Mongoose is the javascript middleware I used in conjunction with Express to interface with a database hosted on mongoLabs.
  • ES6 ( Babel ) – The application is written in ES6 which is the next generation version of JavaScript
  • PostCSS – Post processor for CSS.  Allow for modern CSS features such as variables, mixins and auto-prefixing for browsers

Minor technology/libraries used

  • JSON Web tokens – Authentication for administrator to moderate content
  • Heroku – Node web hosting
  • Gulp – JavaScript task runner, towards the end of the project I was using Webpack to do morethings however
  • GIT – Versioning control

I’m writing a more in depth blog post in the near future. But I have a log full of features I will be slowly implementing over time including

  • Facebook video integration
  • A ‘like’ system using facebook’s API
  • Code tests
sp1sp2sp5 sp4 sp3