SPOTIFY TOP TRACKS

App that get your top tracks and recommendations based in track(s) selected using Spotify Web API and oAuth.

Project stack:

• Webpack 4
• React 16.6
• Redux
• Sass
• Lint (Eslint, Prettier e Stylelint)
• Express
• Spotify Web API
• Precommit Lints
• Visual Studio Code config like Lint Integration

What you need?

• Node.js 8.4.0 or more
• NPM
• Yarn

Install

After clone the repo execute:

$ yarn install

Setup of your IDE

To maintain code quality and always have a standard across all of the team's project has rules defined for javascript and css / scss. We use the Eslint / Prettier for Javascript / React and Stylelint for SCSS. It is necessary to integration of these rules with your favorite IDE. We recommend using Visual Studio Code with the following plugins:

Plugin	README
ESlint	check plugin
Prettier	check plugin
stylelint	check plugin

Pre-commit

Before running git commit, the rules of ESLint and Stylelint are executed. If there is an error or some non-default code of the site will generate an error and you will not be able to commit.

Environments

Basically the project has two environments:

• Development
• Production (used only for build and simulate production mode)

Configuration

The webpack configurations and environments that are shared within are in the "config" directory at the root of the project. Below a description of each file:

File	Description
common.json	Common infos that can be shared in application
webpack.common.js	Default webpack settings that are shared across all environments
webpack.config.js	Default file that is called by the webpack that manages the loading of the settings according to the environment
webpack.development.js	Webpack settings that are only valid in "Development" mode
webpack.production.js	Webpack settings that are valid only in "Production" mode

To read the entries that are in the configuration files via javascript use: For example your common.json file looks like this:

{
  "namespace": "spfy"
}

Retrieves the information as follows:

console.log(common.namespace);

Running the project

Here are the commands that are used in the project:

Command	Description
yarn run dev-api	Run the project in development mode with express webpack and your settings. The webpack runs on port 8080.

Build

For run the build execute:

$ yarn build