- Donwload nodejs (if you on mac use "brew install node" in terminal)
- In project path install dependencies npm install
- Start the project use npm start
- I added index.css file because github don't want added empty folder (this file created automaticly after you run npm run sass (but first you need install ruby and after "gem install sass")
- Framework Reactjs (0.16), Redux, Javascript(ES6)
- For quick start I used create-react-app (basic setup for a small project)
- Added support scss for project (for my opinion better that pure css, nested list,variables, look more clear and understandable)
- Added Eslint to support code structure
- Bootstap for UI component and grid system
I decided to use React and Redux because I am good familiar with it, and in React we can create reusable components and it is light and configurable framework. When I start worked on this task I had very tight deadlines, therefore I decided to use create-react-app and not waste my time tuning Webpack, Babel and other familiar tools. because they are pre-configured and hidden, so I can focus on the code and application. Also I added bootstrap because it can be usefull in future(different component) it also have a good grid system and mobile friendly. I added SCSS support and try to use BEM methodology for the naming convention. Also I added chrome extension (like workaround for No 'Access-Control-Allow-Origin') this https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi
Also I try to create a good project structure, I understand that I can create a separete mapData file where work with data and after that pass to component just what we need. But I done some simple work with data in component. Also I added eslint and eslint-fix to help support clean code.
I have just a picture, so it is not pixel perfect but I tried.
If you have any question, write me Thank you in advance