Home About Photography Projects
OneSpot
Real-time collaborative playlist building with Spotify

View the source on github

Preview

Background

This project was my first attempt at web development using Express as a server framework and React Components as a building block for the front-end. This page will briefly explain the structure of the web app and the justification behind the design choices.

The Server

Technologies used
  • Express: set-up using universal routing and ejs as a view engine.
  • Socket.io: used for real-time event-based communication.
  • React: server-side rendering and universal routing
  • MongoDB: database
The reason behind implementing universal routing was to simplify the structure of the app. With universal routing, all requests to the server would be handled by a single function. The function would then determine which view of the app to display and then use React to render the components into the markup string. For the view engine, I chose ejs simply because of familiarity with the syntax. Socket.io was used to implement the real-time aspect of the app. With it, multiple users can be modifying the same playlist and see each other's changes, similar to the collaborative aspect of Google Docs.

The Client

Technologies used
  • Redux: used to manage the state of the app
  • Socket.io
  • React

In order to simplify the development of the app, Redux was used to deal with changes to the state of the app. Every action performed by the user resulted in an action being dispatched. A reducer is attached to the root React component. It deals with each action by modifying the state of the user's view and relaying necessary information to the server. When the server receives information of any modifications, it then relays the information to other clients who share the same resource.