Contact me on Linkedin, send an email to [email protected], or create a pull request on this project.
A "music search" web application, using a few named techs, the app let users search for an Artist, then inspect this Artist's Albums and related Tracks.
Actually hosted on: http://spotify-search.s3-website.us-east-2.amazonaws.com
This project is currently developed in a Linux/GNU Ubuntu 16.04 LTS x86_64 OS, using Visual Studio Code as IDE.
- Node.js (8.9.1)
- npm (5.6.0)
- React (16.2.0)
- React Router DOM (4.2.2)
- Flow (0.66.0) for a static type checker for Javascript
- Spotify Web API JS (0.23.0)
- Webpack (3.8.1) for development and bundling
- Babel (6.26.0) transpiler for ES6 and ES7 magic
- ESLint (4.10.0) to maintain a consistent code style
- SCSS as CSS extension language
- Use Cutting-Edge Technologies
- Best Programming Techniques
- Babel 6 with Webpack and Hot Loader
- Fast testing with mocked-out DOM
- Separate Smart and Dumb components
- Use Flow to obtain a safe Javascript environment
- Use Spotify Web API JS as lightweight wrapper for the Spotify Web API
- Use only modern native CSS features to style the whole application. e.g. FlexBox, CSS Grid and etc.
This application consumes data from the following services:
| Page | URL | Description |
|---|---|---|
| Home | / | Main page of application to show the fetched group of artists |
| Artist | /artists/:artistId | Page that contains artist's details |
| Album | /albums/:albumId | Page that contains album's details |
Install yarn to a better package management
$ npm install --global yarnInstall application dependencies
$ yarn installFollow the official Spotify: API tutorial that shows how to create a application that accesses user-related data through the Spotify Web API.
During the tutorial you need add any Redirect URIs that the Spotify Accounts service could call when authentication process completes. For spotify-search in development you must add http://localhost:3000/login and http://<PRODUCTION_URL>/login for production environments.
After the tutorial you need to configure the .env file with the Spotify application's client ID.
In this current section you can find all commands to run the application in your machine. All the commands also are in the scripts section of package.json.
$ yarn startNavigate to http://localhost:3000/ to view the app.
$ yarn buildThe above command is used to build the production files.
Input: src/index.js and public/index.html
Output: build/
$ yarn lintThis above command is used to identifying and reporting on patterns in JavaScript on the specified directory.
$ yarn flowThis above command is used to identifying and reporting on patterns in Flow on the specified files.
$ yarn testThis above command is used to run all test in the entire project.
- Fork it
- Create your feature branch with specs (
git checkout -b my-new-feature) - Commit your changes (
git commit -am 'Add some feature') - Push to the branch (
git push origin my-new-feature) - Create new Pull Request
- Jaelson Carvalho (jcarva)
Some parts of this project follow the style guide from React Redux Universal Hot Example
This project is licensed under the terms of the GNU GENERAL PUBLIC license.
You can check out the full license here