/employer

A generic employer page built while learning Redux and react-dnd

Primary LanguageJavaScript

Employer

Summary

image

Employer is a made-up employees page for a made-up company called Employer.

Setup

  • Make sure to run npm install and webpack --watch to get Node packages installed and bundle the .js files
  • Serve the files locally or load index.html into your browser of choice

Usage

  • When the page loads, it fires off fetch requests to the [uifaces.com][uif-link] API to generate random employee images.
  • The faker package is used for generating random names and job titles for employees.
  • Hovering over an employee's image will animate the image.
  • Clicking on an employee's image will open up a modal with a short, cut-and-paste bio about that employee.
  • Dragging one employee's job and dropping it on another's will swap the two jobs with help from the react-dnd package.

Main Tools

  • React
  • Redux
  • ES6
  • HTML5/CSS3

Assorted NPM Packages

  • react-redux
  • react-dnd for drag and drop
  • redux-thunk to allow Redux actions to use async functions
  • babel for transpiling ES6 and JSX
  • faker for generating fake names and job titles
  • webpack for bundling .js files
  • isomorphic-fetch for a fetch polyfill
  • eslint for linting ES6

Other