Web App From Scratch @cmda-minor-web 2020 - 2021

Link to live version

Creating the perfect roadtrip playlist based on your music taste.

Index

• Getting started
• Folder structure
• APIs used
• Features
• Future prospects
• Actor diagram
• Interaction diagram
• Design patterns used
• References

Getting started

Before you get started, I advice you to read the APIs used section, as you need a Client ID for Spotify as well as an API key for Mapquest.

This project doesn't use any bundlers or dev servers. I would advice you to install Browsersync to serve the web content in this project. You install Browsersync either through NPM, Yarn or any other NPM package manager of choice with global installation functionality.

$ npm install --global browser-sync || yarn global add browser-sync

Then proceed to clone this repository.

$ git clone https://github.com/theonejonahgold/web-app-from-scratch-2021 web-app
$ cd web-app
$ browser-sync -w -s --port 5000 # Starts a browser-sync server on port 5000 that watches for file changes in the current directory

Folder structure

• scripts: Where all JavaScript goes
  • constants: Constant values, like API URIs and keys.
  • helpers: Functions used in specific use cases, like the Spotify or Bing Maps API.
  • modules: Function compisitions applicable in multiple projects. They're separated over files named after their main concern, e.g. objects.
  • routes: Route functions used in this app.
  • stores: Stores created for this app.
  • utils: Single-purpose functions that can be used on their own or combined. They're separated over files named after their main concern.
  • main.js: The start of the application
• styles: Where all CSS goes
  • main.css: Where all the styling comes together.
• templates: Where all Handlebars templates live.
• assets: For images and other types of media assets.
• index.html: The entrypoint for the application.

APIs used

The APIs used both have API keys. You can put these inside the constants folder, where all constant values reside.

Spotify Web API

The Spotify API is extremely expansive. From user information to the devices they can connect to, from artists to recommendations based on a certain song and artist. You can grab almost everything from this API, without any explicit rate limits.

This page gives you information on how to create a Spotify Application on the Developer Platform.

If you have created one, be sure to set the redirect URIs to 'http://localhost:5000' and the URL you are hosting this app on.

Bing Maps API

The Bing Maps API is quite large, and has a lot of features related to mapping. We are only using the Route Data API to see how long a trip takes.

This API has a rate limit of 125,000 transactions per year before you have to pony up, so keep that in mind.

Follow this guide to get started.

Features

• A feature list
• Log in to Spotify
• Search addresses
• Get estimated time for a trip
• Choose songs from top songs for seeding
• Save playlist
• Swap songs from recommended playlist
• Preview songs
• Beautiful design
• Change length of playlist

Future prospects

• Add more music streaming services
• Generate popular songs from the countries you're driving through
• Generate movies that span the length of the trip
• Maybe make it a general travel preparation tool

Actor diagram

Interaction diagram

Design patterns used

• Pure functional pattern
• PubSub pattern
• Composition pattern
• Hash routing

References

• Handlebars documentation
• Svelte store as inspiration for my own store system
• Object.defineProperty for use in my state function