Skip to content
abdelelbouhy edited this page Jun 3, 2018 · 28 revisions

Goal:

Create react components to view the data for the user with a front-end, to view their bookings, itineraries, and other important info along with a simple UI for the user to view that information.

What technologies is needed

  • Reactjs Main library
  • Jest Unit test framework
  • Enzyme Assert, manipulate, and traverse components
  • enzyme-to-json Creates components snapshots
  • Chart.js Charts library to display data
  • Sass CSS preprocessing
  • Webpack Build tool
  • Babel ECMA6 compiling

Breaking down the wireframe into components

  • Layout component that contains all sub components Create top level component to render all sub components
  • Top section has 4 components that displays small image, title and description Create reusable component and sample data and use it to display all the 4 parts
  • The next section is the line chart controllers that fetch data with different date ranges Create a component contains these controllers
  • The next section is line chart displaying data to the user Create a component and sample data and use it to build the line chart component
  • The next section contains 2 sections Bar chart and Doughnut charts
    1. Bar chart Create sample data and use it to build the bar chart
    2. Doughnuts contains 3 charts displaying different data Create component and sample data and use it to display all the 3 parts

Timeline

Should be done on Saturday maximum by Sunday morning.