Technologies Used

FR8

Fleet Management

FR8 is a San Francisco based startup company that offers technology solutions for the freight industry. Through their online application the hassles of managing a fleet operation has never been so easy. Through fr8.guru you can find loads, optimize schedules and manage dispatch in one single place.

US

In our participation of the TechCrunch Disrupt event in San Francisco, we got in contact with FR8 representatives where they approached us looking for a team to help them build their next generation of their online application. They wanted us to take care of the front end design and development with a fresh new user interface.

Requirements

  • Reusable components: FR8 wanted to make build the user interface with reusable components. This way everything that was built in the front could later on be reused in other views. This would make the development modular and faster to implement new stuff towards the future.
  • Agile and easy to use back office: The idea was to create an easy to use application. The final users of the app would need a screen, with no scroll, and where everything was reached out easily. Avoid the use of an edit mode when entering or updating the information was a big plus.
  • Improve user interaction with the platform: The platform had to look modern, be fluent and appealing.

Challenges

  • Beta technology: React and its set of tools are still an emerging technology.
  • Cross browser: The application needs to be cross browser.
  • Tablet and desktop compatible resolution. As an online tool for an industry, we had to design the interfaces to be viewable and operative for tablets and small desktop screens. At the same time adapt gracefully for big screens.
  • Integrate Google Maps and Street view: All addresses in the application must be shown in street view where available and positioned in Google maps as part of the freight route.

Implementation of the solution

  • Designed new look and feel: We started defining the look and feel of the new platform. We decided to use material-ui design that offers clean and neat interactions with users.
  • Designed technical solution: For the implementation we used react material-ui components, with mobX as state management. A node API would serve as a data management layer that would send the data coming from the API flattened to the view. The idea is that the react front would make a single call to the node layer and this one would make any additional call to the API looking for any additional data that the view requests.
  • Quick filters: The use of quick filters and multiple search options allow the user to find the information easy and fast.
  • Same form to view and edit the data: No need to enter an edit mode to save the information. Also, if the user cancel’s the form edition, the data is reverted back to its original state.
  • Fixed headers in all tables: All tables in the application feature a fixed header. This way the user always know what is the information they are looking in tables. We implemented the tables with infinite scrolling, so no need to be paging for more information.
  • Detail information always reachable: Screens were split into two sections. The data tables and the row details. The details are always visible to the user and the details pane is fixed to the bottom of the screen, independently of the user monitor size or resolution.

© 2018 Copyright capicua

Our Terms of Use and Privacy Policy
Slinky® is product from Alex Brands. © 2018 Alex Brands. All rights reserved.