Adding token

.gitignore

@@ -1,3 +1,4 @@
 /node_modules
 /static/bundle.js
 /static/bundle.js.map
+.env

README.md

@@ -1,32 +1,51 @@
-# Your own project
-
-Build an app of your choice.
-
-- You are free to use any technologies covered so far. You are welcome to try new technologies you find interesting.
-- Keep it simple. Aim to get the basic functionality working on day one. You can then extend it on days two and three.
-- Feel free to use an external API to provide additional functionality to your app. Avoid APIs that use complex authentication mechanisms.
-- Use pen and paper to draw a diagram of the webpage layout before starting to code. Have a think about what components you will need in advance.
-- Think about how to organise your data in advance
-- Make sure your app is responsive
-- Commit frequently
-- Create pull request at the end
-- Keep it simple
-
-## Technical notes
-
-* Run `npm install` after cloning to download all dependencies
-* Use `npm run dev -- --watch` to build React
-* Use `node server.js` to run the Node server in another tab
-* You can view the site at [http://localhost:8080](http://localhost:8080)
-* If you would like to user `nodemon` to automatically rebuild your server, run `npm run server`
-* The node server file is `/server.js`
-* The index home page is in `/views/index.hbs`
-* Place all static files such as images and CSS in the `static` folder.
-
-## README
-
-* Produce a README.md which explains
-  * what the project does
-  * what technologies it uses
-  * how to build it and run it
-  * any unresolved issues the user should be aware of
+# Spotify Dashboard
+
+Welcome to Spotify Dashboard. This project aims to provide a useful companion to Spotify by displaying interesting and useful information about the artist that you are currently listening to.
+
+## Prerequistes
+
+This application is built using Node.js and React.
+
+## Installing Dependencies
+
+- Use `npm run dev` or `npm run dev -- --watch` to build React
+- Use `node server.js` to run the Node server
+- View the site at [http://localhost:8080](http://localhost:8080)
+- The node server file can be found at /server.js
+- The index home page can be found in /views/index.hbs
+
+## How To Use
+
+First of all, the Spotify SDK used by this application requires an SDK token to be generated using a Spotify Premium Account [here](https://developer.spotify.com/documentation/web-playback-sdk/quick-start/#). These tokens last for an hour before needing updating.
+
+Once you have input a usable SDK token, you will be instructed by Spotify Dashboard to go to your Spotify Device, open "Connect to a device" and connect to Spotify Dashboard. Once this happens, the songs that you are listening to will be represented on the app with the album cover, artist, song name and album name.
+
+When you change through the songs on your device, or load up a playlist and leave it to run, this is represented on screen. Information about the music/podcast you are listening to will change dynamically.
+
+Alongside this, the app uses the information about the artist and executes a fetch to Ticketmaster's Discover API to find information about upcoming events, including links to buy tickets. This information can be scrolled through on the page without affecting the view of your artist information.
+
+This device also works responsively at different views, allowing the user to read through upcoming events without spoiling the view of the song information.
+
+## Notable Features
+
+- This app has good responsivity for various devices, allowing for a minimalist sleek view while keeping the ability to navigate through a wide range of information.
+- I feel that this project has demonstrated my ability to create and maintain clean and human-friendly React components and data structure.
+- Information presented in the app changes based on whether the user has a device connected or not. This is implemented in `App.js` on lines 24-44.
+- Anyone with a Spotify Premium account can request an SDK token and input it to use the app.
+
+## Unresolved Issues/Un-implemented Features
+
+While I am very proud of the work I have done on this app, there are a number of issues that need resolving and should be kept in mind when using Spotify Dashboard. There were also a number of features that I was unable to implement which are listed below:
+
+- The Spotify SDK token only works for an hour. As a result, the project can stop working without warning. This is a nuisance in terms of usability and it would be nice to give some kind of indication as to how long you have left on the token/an alert when your time is about to expire.
+- The Ticketmaster API provides amazing information about an artist's upcoming events. Unfortunately, it often returns 429 response status codes for too many requests. Sadly, there is no `Retry-After` header attached indicating how often this would happen. This can provide some annoying user experiences as the Spotify SDK re-triggers a fetch about 1 minute into a song. It also re-triggers a fetch when the song is paused and then played again. This can happen quite a few times during a play through, which can provide some undesirable results from the API. It can also provide issues if, for example, you skip through a couple of songs and the app will tell the user that there are no upcoming events regardless of if this is true or not!
+- I would like to refactor the way the dates are presented as they are not very readable. For instance, instead of the format YYYY-MM-DD I would prefer something along the lines of "Tuesday 1st November 2018". I would also like to add a countdown feature that shows how far away we are from the show.
+- The Ticketmaster API results only say whether the tickets are onsale or offsale. This works when redirecting people to buy tickets to available events, but it would be preferable to have more information that the user could find useful. For instance, are the tickets unavailable because they have sold out or because they haven't been released yet?
+
+## Acknowledgements
+
+This application utilises [Spotify's Web Playback SDK](https://developer.spotify.com/documentation/web-playback-sdk/).
+
+This application utilises [Ticketmaster's Discovery API](https://developer.ticketmaster.com/products-and-docs/apis/discovery-api/v2/) to fetch upcoming event information.
+
+Inspiration for the layout came from [Music UI](https://dribbble.com/shots/4242093-Music-UI) by Giga Tamarashvili for Adjara Design on Feb 19, 2018 @ dribbble.

coverage/clover.xml

@@ -0,0 +1,86 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<coverage generated="1534943528993" clover="3.2.0">
+  <project timestamp="1534943528993" name="All files">
+    <metrics statements="46" coveredstatements="16" conditionals="18" coveredconditionals="8" methods="24" coveredmethods="9" elements="88" coveredelements="33" complexity="0" loc="46" ncloc="46" packages="3" files="8" classes="8">
+      <package name="src">
+        <metrics statements="25" coveredstatements="3" conditionals="2" coveredconditionals="0" methods="11" coveredmethods="1"/>
+        <file name="spotify.js" path="/Users/olliecrook/workspace/own-project/src/spotify.js">
+          <metrics statements="25" coveredstatements="3" conditionals="2" coveredconditionals="0" methods="11" coveredmethods="1"/>
+          <line num="1" count="2" type="stmt"/>
+          <line num="9" count="2" type="stmt"/>
+          <line num="12" count="2" type="stmt"/>
+          <line num="13" count="0" type="stmt"/>
+          <line num="14" count="0" type="stmt"/>
+          <line num="17" count="0" type="stmt"/>
+          <line num="22" count="0" type="stmt"/>
+          <line num="23" count="0" type="stmt"/>
+          <line num="25" count="0" type="stmt"/>
+          <line num="26" count="0" type="stmt"/>
+          <line num="28" count="0" type="stmt"/>
+          <line num="29" count="0" type="stmt"/>
+          <line num="31" count="0" type="stmt"/>
+          <line num="32" count="0" type="stmt"/>
+          <line num="36" count="0" type="stmt"/>
+          <line num="37" count="0" type="stmt"/>
+          <line num="40" count="0" type="stmt"/>
+          <line num="41" count="0" type="cond" truecount="0" falsecount="2"/>
+          <line num="42" count="0" type="stmt"/>
+          <line num="43" count="0" type="stmt"/>
+          <line num="48" count="0" type="stmt"/>
+          <line num="49" count="0" type="stmt"/>
+          <line num="53" count="0" type="stmt"/>
+          <line num="54" count="0" type="stmt"/>
+          <line num="58" count="0" type="stmt"/>
+        </file>
+      </package>
+      <package name="src.components">
+        <metrics statements="19" coveredstatements="11" conditionals="16" coveredconditionals="8" methods="13" coveredmethods="8"/>
+        <file name="App.js" path="/Users/olliecrook/workspace/own-project/src/components/App.js">
+          <metrics statements="14" coveredstatements="6" conditionals="12" coveredconditionals="6" methods="8" coveredmethods="3"/>
+          <line num="9" count="2" type="stmt"/>
+          <line num="11" count="2" type="stmt"/>
+          <line num="20" count="2" type="stmt"/>
+          <line num="21" count="2" type="stmt"/>
+          <line num="25" count="0" type="cond" truecount="0" falsecount="2"/>
+          <line num="26" count="0" type="stmt"/>
+          <line num="35" count="0" type="stmt"/>
+          <line num="42" count="0" type="stmt"/>
+          <line num="47" count="2" type="stmt"/>
+          <line num="51" count="0" type="stmt"/>
+          <line num="56" count="0" type="stmt"/>
+          <line num="57" count="0" type="stmt"/>
+          <line num="58" count="0" type="stmt"/>
+          <line num="62" count="2" type="stmt"/>
+        </file>
+        <file name="Event.js" path="/Users/olliecrook/workspace/own-project/src/components/Event.js">
+          <metrics statements="1" coveredstatements="1" conditionals="2" coveredconditionals="1" methods="1" coveredmethods="1"/>
+          <line num="4" count="2" type="stmt"/>
+        </file>
+        <file name="Events.js" path="/Users/olliecrook/workspace/own-project/src/components/Events.js">
+          <metrics statements="2" coveredstatements="2" conditionals="0" coveredconditionals="0" methods="2" coveredmethods="2"/>
+          <line num="5" count="2" type="stmt"/>
+          <line num="8" count="2" type="stmt"/>
+        </file>
+        <file name="Header.js" path="/Users/olliecrook/workspace/own-project/src/components/Header.js">
+          <metrics statements="1" coveredstatements="1" conditionals="2" coveredconditionals="1" methods="1" coveredmethods="1"/>
+          <line num="4" count="2" type="stmt"/>
+        </file>
+        <file name="PlayWindow.js" path="/Users/olliecrook/workspace/own-project/src/components/PlayWindow.js">
+          <metrics statements="1" coveredstatements="1" conditionals="0" coveredconditionals="0" methods="1" coveredmethods="1"/>
+          <line num="4" count="1" type="stmt"/>
+        </file>
+      </package>
+      <package name="tests">
+        <metrics statements="2" coveredstatements="2" conditionals="0" coveredconditionals="0" methods="0" coveredmethods="0"/>
+        <file name="mockEventsResults.js" path="/Users/olliecrook/workspace/own-project/tests/mockEventsResults.js">
+          <metrics statements="1" coveredstatements="1" conditionals="0" coveredconditionals="0" methods="0" coveredmethods="0"/>
+          <line num="1" count="1" type="stmt"/>
+        </file>
+        <file name="setup.js" path="/Users/olliecrook/workspace/own-project/tests/setup.js">
+          <metrics statements="1" coveredstatements="1" conditionals="0" coveredconditionals="0" methods="0" coveredmethods="0"/>
+          <line num="4" count="5" type="stmt"/>
+        </file>
+      </package>
+    </metrics>
+  </project>
+</coverage>