Spinprops

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