Frontend Prototype

[samuel-iseli]

Simple Frontend Prototype using React

• Display a product list

• Optimized for mobile devices

• Using already available REST endpoint buying/depot/<depot_uuid>/available-items

• @zuckerruebe refine and add endpoint description

[samuel-iseli]

Will implement the frontend using react.
Evaluation of react component libraries that facilitate creating mobile web apps:

• https://onsen.io component framework for mobile apps, supporting "native" look and feel for android and iOS. Comes with bindings for all the usual JS platforms (angular, vue, react)
• https://ionicframework.com complete component framework supporting native and webapps for android and iOS. Bindings fro angular, vue and react. comes with its own build-tools
• https://grommet.io quite lightweight component framework implemented as react components. good theme and responsive support.

I decided to start with grommet.io because of its simplicity and focus on react.

[samuel-iseli]

Implemented a raw prototype of a frontend. No data from back-end yet, just simulated article list.
Current prototype features:

• Navigation with menu and different pages
• Responsive design: Menu changes to overlay when unsing mobile (small) form factor
• Integration with django static files. index.html of frontend is delivered as django template, that allows to use django's static file features. Statics are server in development mode and collected when deploying
• managed to integrate frontend in heroku toolchain:
  • need to configure 2 buildpacks in heroku: 1. nodejs 2. python
  • nodejs must be first, because python build needs to find the build produced by nodejs

The current prototype is visible at https://depotcommun-sis.herokuapp.com/