Listify - Project Overview

Description

The idea is to create a website that uses Spotify’s API in order to manage playlists (edit existing playlists and create a new playlist). The main target is to add functionality so that users have more options when editing their playlist. We identified that the typical user is someone who has multiple playlists and wants to manage them by categorizing songs based on their relatedness and editing each playlist to their specific needs. The secondary focus will be to have a gallery page where the user’s collections and preferences are displayed.

File structure

public/

Contains the files that will be served by the Node.js server, both in development and production mode.

src/

Contains all the code for the project.

• App.js - Routing logic of the App (effectively a Presenter).
• App.scss - SASS-styling of App (virtually unused).
• App.test.js - Generated by CRA (virtually unused).
• index.js - Script that combines the App, Redux store, and Router, then injects into the .html-file that is served.
• index.scss - Project-wide styling, including Bootstrap theme customization.
• reportWebVitals.js - Generated by CRA (virtually unused).
• setupTests.js - Generated by CRA (virtually unused).
• shared.scss - Global styling variables that can be imported anywhere in the project to ensure consistency.

src/api/

Contains code related to everything API related (Spotify + Firebase).

• firebaseAuth.js- API calls for authentication through Firebase.
• firebaseConfig.js - Config options for the Firebase app used for persistence.
• spotifyAuth.js - Everything required for authorizing through the Spotify Web API.
• spotifyPlaylist.js - API calls for managing playlists.
• spotifySearch.js - API calls for retrieving data from searches.
• spotifyUser.js - API calls for retrieving metadata about the user, e.g. username.
• spotifyUtil.js - Abstract function for handling all data retrieval from the Spotify Web API.

src/images/

Contains images that are used across the app, e.g. the Listify logo and some .svg-icons.

src/presenters/

Contains code for all Presenter components in our MVP-architecture.

• AuthorizedPresenter.js - Gets appropriate data for the authorized view. Redirects user to the landing page if no token has been retrieved.
• LoginPresenter.js - Handles authorization redirects from Spotify, i.e. when the user has logged in (or failed to do so). Redirects accordingly.
• PlaylistPresenter.js - Managing between the model and the PlaylistView.
• StartPresenter.js - Gets appropriate data for the landing page.
• SearchPresenter.js - Managing between the model and the SearchView.
• TracksPresenter.js - Managing between the model and the TracksView.

src/state/

Contains code for the Redux store.

• rootReducer.js - Combines the different modules and their handlers.
• rootSaga.js - Combines the different modules and their asynchronous actions/events.
• store.js - Combines the root reducer, the root saga, and when in development mode applies the Redux Devtools extension.
• utils.js - Helper functions for creating actions, action types, and reducers.

src/state/{module}/

Contains Redux code for a specific module with name module. Currently only auth actually does something.

• {module}Actions.js - Defines the actions as functions (also known as "action creators") to ensure that they get the correct arguments/payloads.
• {module}Reducer.js - Contains the initial state of the data in the module and the handlers for all the different action types for the module.
• {module}Sagas.js - Contains functions (sagas) that runs as middleware to handle all asynchronous logic of actions (i.e. API calls).
• {module}Types.js - Constants that define what actions that exist in the module. Acts as an interface to ensure handlers etc. use the correct string to refer to the action.
• {module}Util.js - General utility functions that are used within or in relation to the module.

src/views/

Contains code for all View components in our MVP-architecture.

• {Name}View.scss - Stylesheet for {Name}View.js.
• AuthorizedView.js - The View component for when the user is authorized through the Spotify API.
• LoadingView.js - A view component that provides a CSS loader.
• PlaylistView.js - The View component for showing the user's playlists and allows them to view/edit individual playlists.
• StartView.js - The View component for the landing page (where the user logs in).
• TracksView.js - The View component to show the individually saved tracks from search/playlists, to get an overview of the track's spread.

---

Development

Getting Started / Set up

0. • Make sure to have a working version of npm/Node.js
   • Clone the repo, e.g. git clone https://github.com/martinfalke/spotify-project.git and cd to its directory.
1. Run npm install at the project root.
2. Install "Redux DevTools Extension" in your browser (required for development mode)
3. Run npm run start at the project root to start hosting the app at localhost:3000 and localhost:3000/spotify-project.
4. Done!

Repeat step 3 whenever resuming development.

Git workflow

Branches

Create a branch from the latest version of dev. Commit on that branch. Regularly fetch the latest version of dev and run git merge dev from the separate branch.

• master - Used for course submissions (i.e. README).
• dev - Contains the latest version that developers use.
• gh-pages - Contains the compiled and deployed code to GitHub Pages (auto-generated by GitHub / gh-pages library)
• deploy - Used for tracking the code that is ran with npm run deploy and thus published to GitHub Pages.
• feat/{name} - Progress on feature described by name.

Deployment

1. Checkout the git branch that you want to deploy, should be the latest version of master.
2. Delete local copies of the gh-pages branch by running git branch -D gh-pages.
3. From the branch you want to deploy, create a new branch called "gh-pages": git checkout -b gh-pages.
4. Run npm run deploy at the project root.
5. Done!

---

(Auto-generated by create-react-app)

Getting Started with Create React App

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

npm run build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify