diff --git a/README.md b/README.md
index 0335ea7..241a497 100644
--- a/README.md
+++ b/README.md
@@ -1,16 +1,37 @@
+# Exportify
[](https://travis-ci.com/watsonbox/exportify)
-
+⭐ Star us on GitHub — it motivates us a lot!
+
+[Exportify](https://watsonbox.github.io/exportify/) is a web-application which allows you to export your Spotify playlist to [CSV](https://en.wikipedia.org/wiki/Comma-separated_values).
-Export your Spotify playlists to [CSV](https://en.wikipedia.org/wiki/Comma-separated_values) by clicking on the link below:
+Try it out now by clicking on the link below:
[https://watsonbox.github.io/exportify/](https://watsonbox.github.io/exportify/)
+
+
+
+
As many users have noted, there is no way to export/archive/backup playlists from the Spotify client for safekeeping. This application provides a simple interface for doing that using the [Spotify Web API](https://developer.spotify.com/documentation/web-api/).
**No data will be saved - the entire application runs in the browser.**
+## Table of Contents
+
+- [Usage](#usage)
+ - [Re-importing Playlists](#re-importing-playlists)
+ - [Export Format](#export-format)
+ - [Playlist Search](#playlist-search)
+- [Development](#development)
+ - [Tech Stack](#tech-stack)
+ - [How to Run](#how-to-run)
+ - [Project Structure](#project-structure)
+- [Notes](#notes)
+- [Error Monitoring](#error-monitoring)
+- [Contributing](#contributing)
+
## Usage
1. Fire up [the app](https://watsonbox.github.io/exportify/)
@@ -28,54 +49,63 @@ Once playlists are saved, it's also pretty straightforward to re-import them int
Track data is exported in [CSV](http://en.wikipedia.org/wiki/Comma-separated_values) format with the following fields from the [Spotify track object](https://developer.spotify.com/documentation/web-api/reference/tracks/get-several-tracks/):
-- Track URI
-- Track Name
-- Artist URI(s)
-- Artist Name(s)
-- Album URI
-- Album Name
-- Album Artist URI(s)
-- Album Artist Name(s)
-- Album Release Date
-- Album Image URL (typically 640x640px jpeg)
-- Disc Number
-- Track Number
-- Track Duration (ms)
-- Track Preview URL (mp3)
-- Explicit?
-- Popularity
-- ISRC ([International Standard Recording Code](https://isrc.ifpi.org/en/))
-- Added By
-- Added At
+#### Default
+
+- `Track URI`
+- `Track Name`
+- `Artist URI(s)`
+- `Artist Name(s)`
+- `Album URI`
+- `Album Name`
+- `Album Artist URI(s)`
+- `Album Artist Name(s)`
+- `Album Release Date`
+- `Album Image URL (typically 640x640px jpeg)`
+- `Disc Number`
+- `Track Number`
+- `Track Duration (ms)`
+- `Track Preview URL (mp3)`
+- `Explicit?`
+- `Popularity`
+- `ISRC` ([International Standard Recording Code](https://isrc.ifpi.org/en/))
+- `Added By`
+- `Added At`
By clicking on the cog, additional data can be exported.
+
+#### Artists Data
+
By selecting "Include artists data", the following fields will be added from the [Spotify artist object](https://developer.spotify.com/documentation/web-api/reference/artists/get-several-artists/):
-- Artist Genres
+- `Artist Genres`
+
+#### Audio Features
And by selecting "Include audio features data", the following fields will be added from the [Spotify audio features object](https://developer.spotify.com/documentation/web-api/reference/tracks/get-several-audio-features/):
-- Danceability
-- Energy
-- Key
-- Loudness
-- Mode
-- Speechiness
-- Acousticness
-- Instrumentalness
-- Liveness
-- Valence
-- Tempo
-- Time Signature
+- `Danceability`
+- `Energy`
+- `Key`
+- `Loudness`
+- `Mode`
+- `Speechiness`
+- `Acousticness`
+- `Instrumentalness`
+- `Liveness`
+- `Valence`
+- `Tempo`
+- `Time Signature`
+
+#### Album Data
Additionally, by selecting "Include album data", the following fields will be added from the [Spotify album object (full)](https://developer.spotify.com/documentation/web-api/reference/object-model/#album-object-full)
-- Album Genres
-- Label
-- Copyrights
+- `Album Genres`
+- `Label`
+- `Copyrights`
Note that the more data being exported, the longer the export will take.
@@ -92,7 +122,9 @@ Searching is _case-insensitive_.
## Development
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). Please carefully read the next few sections to get a better understanding of the development environment before beginning any contributions.
+
+### How to Run
In the project directory, first run `yarn install` to set up dependencies, then you can run:
@@ -113,7 +145,59 @@ See the section about [running tests](https://facebook.github.io/create-react-ap
Builds the app for production to the `build` folder.
-### Stack
+### Project Structure
+
+Here is a simplified folder structure so that you can understand some of the fundamental directories & files:
+
+```bash
+src/
+├── components/
+│ ├── Login.jsx
+│ ├── Logout.tsx
+│ ├── Paginator.jsx
+│ ├── PlaylistExporter.jsx
+│ ├── PlaylistRow.tsx
+│ ├── PlaylistSearch.tsx
+│ ├── PlaylistTable.tsx
+│ └── data/
+│ ├── PlaylistsData.tsx
+│ ├── TracksAlbumData.tsx
+│ ├── TracksArtistsData.tsx
+│ ├── TracksAudioFeaturesData.tsx
+│ └── TracksBaseData.tsx
+├── App.tsx
+└── index.tsx
+```
+
+#### Components/
+
+Contains essential components used throughout the entire application
+
+- `Login.jsx` - Handles the login logic + UI of the application
+- `Logout.tsx` - Handles the logout logic + UI of the application
+- `Paginator.jsx` - Component responsible for the paging system for playlist display on main screen
+- `PlaylistExporter.jsx` - Takes care of the details of the "Export All" option
+- `PlaylistRow.tsx` - Primary component to show each individual playlist + its respective data (each row within the main list)
+- `PlaylistSearch.tsx` - Handles the search of playlists through user's input
+- `PlaylistTable.tsx` - Main component for user's playlists display. Calls upon sub-components for total functionality
+
+#### Components/data/
+
+- `PlaylistData.tsx` - Calls Spotify API for retrieval of user's playlist data
+- `TracksAlbumData.tsx` - Additional calls for the extra data filter "Include album data"
+- `TracksArtistsData.tsx` - Additional calls for the extra data filter "Include artists data"
+- `TracksAudioFeaturesData.tsx` - Additional calls for the extra data filter "Include audio features data"
+- `TracksBaseData.tsx` - Manages the default playlist data, and its format
+
+#### App.tsx
+
+Principal screen responsible for the entire application's base logic, such as login, playlist display etc.
+
+#### index.tsx
+
+Application entry point, calls upon App.tsx for main content
+
+### Tech Stack
In addition to [Create React App](https://github.com/facebook/create-react-app), the application is built using the following tools/libraries: