warmsound / front-end-developer-exercise

Front-End Developer Exercise

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Lennd - Front-End Developer Exercise

Instructions

You are building a list of event team members using React.js.

alt text

Details

  • Use the JPG or Sketch file contained in this repository as your visual guide. If you'd like, you can download a trial of Sketch here: https://www.sketchapp.com/
  • You must consume this endpoint (http://jsonplaceholder.typicode.com/users) to get the users for the list. How you consume the endpoint is up to you.
  • You can use static CSS, setup a CSS precompiler + watching, or use inline styling
  • You should be able to filter the list by typing into the filter text input
  • Clicking on a row should expand it to reveal the user's address -- only one row should be able to be expanded at a time
  • You should demonstrate knowledge on how to construct and re-use components

Bonus points

  • Use ES6
  • Write tests for your components
  • Demonstrate knowledge of pure functions / components

For fun / if you want to get crazy

  • Find a way to incorporate Redux (We use it heavily)
  • Find a way to incorporate Radium (We use it heavily)
  • Add animation to the expanding rows
  • Output some location-relative information using the latitude / longitude returned by the API endpoint for each user
  • Add a "loading" indicator for when the users are being fetched
  • Use a Gravatar for displaying a user's avatar based on the user's email

To submit

Notes

Questions / problems / comments?

Contact Josh - josh@lennd.com


How to get up and running...

Step 1 - Install Webpack

> $ npm install webpack-dev-server webpack -g

Step 2 - Clone this repository and install modules

In the directory where you'd like this repository to live, run the following commands:

> $ git clone git@github.com:lennd/front-end-developer-exercise.git
> $ cd front-end-developer-exercise
> $ npm install

Step 3 - Run!

Run the development server:

> $ npm start

Step 3 - View in browser

Open up your browser to http://localhost:5000/ and voila!

Notes

  • The static CSS files you need are in public/css.
  • The React files you need are in src
  • When you edit CSS files, you will have to refresh the browser
  • When you edit React files, the browser will automatically reflect your changes

About

Front-End Developer Exercise


Languages

Language:JavaScript 86.3%Language:HTML 12.2%Language:CSS 1.5%