A React.js Skeleton born with redux & redux-saga on mind

spotify-exercise

A Frontend developer exercise

This exercise is made to test your abilities to solve a typical frontend issue.

Context

Basically, you'll need to connect to spotify api to be able to do album searchs, then from our backend show the current comments, allowing the user to put a comment on a album. The application should be fully responsive, as target from iphone 5 to desktop (1080p).

Features

• Webpack Configured with a bunch of loaders of common use

  • NODE_ENV and API_URL Variable Replacement for a fast environment switching
  • HMR Configured as Development
  • Webpack Dev Server Configured for Development
  • Babel6, Babel-Polyfill and whatwg-fetch to being able to use latest ES6+ Features
  • Image Optimization with image-webpack-loader
  • Sass and PostCSS, with style-loader on development
  • react-toolbox & material-icons assets
  • normalize.css
  • React Router v4

• Use Redux as State Manager, and Redux-Saga as Side Effect Manager

• Unit Test Stack:

  • Jest, as Test Runner
  • Chai, as assertion Manager
  • Sinon, as Stub/Spy/Mock Library
  • redux-saga-tester, To run smart test under sagas

• Dev

  • Eslint configured with common good practices
  • Prettier to control the code styling
  • Jest will run the test for the affected files on each commit
  • All will be validated by a git pre commit hook

  How to run (With Docker, Recommended)

1. Install Docker in your computer.
2. Run docker-compose up and open your browser pointing to http://localhost:3000
   • If you want to make it run in any other port, create a .env file with this data: APP_PORT=3000, Replace 3000 with the desired port

Designs

Ask for permissions of the designs, Zeplin is required. There is a Preview of the Zeplin Design