Giter VIP home page Giter VIP logo

mcmakler's Introduction

Front-End Interview Test

Launching project

  1. Donwload nodejs (if you on mac use "brew install node" in terminal)
  2. In project path install dependencies npm install
  3. Start the project use npm start
  4. 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")

Technology which I use:

  1. Framework Reactjs (0.16), Redux, Javascript(ES6)
  2. For quick start I used create-react-app (basic setup for a small project)
  3. Added support scss for project (for my opinion better that pure css, nested list,variables, look more clear and understandable)
  4. Added Eslint to support code structure
  5. Bootstap for UI component and grid system

Explanation of my choice

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

mcmakler's People

Contributors

ipod4g avatar alabay avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.