nmijailovic / airport-list

Simple Web Application showing a list of Airports and Details

CMS Front End Application

The Front End Application was developed as a Single Page Application, and is performing client rendering (as opposed to Server Side Rendering).

Project is fetching data via fetch, for some devices we may need to use a polyfill

An alternative would be to use Axios but we would lose the ability to intercept requests in the Service Worker if required.

We are not employing any of the PWA (Progressive Web App) improvements at this stage of the project.

Architecture Diagram

Styling

Project is using Bulma for styling, which is based on Flexbox, providing responsiveness

Accessibility

Project does not specifically tackle Accessibility in this instance

Caching

At the moment, Project loads data on the first load, and stores API result into redux, via Redux Thunk

An alternative for Redux would be to use Redux Saga

Another, possibly better approach would be to cache the result by intercepting fetch API calls via the Service Worker via PWA.

CORS

We are using create-react-app proxy feature to work around CORS in the development mode.

Atomic Design

In general, Atomic Design works well with larger React Apps, in this instance we used minimal amount of components.

Dependencies

Project Assumptions: You already have yarn or npm installed already, you can view command comparison

We are showing yarn commands below, but npm can be also used.

Please run

yarn install

How to Run

yarn start

Navigate to http://localhost:3000 in your browser

How to Build

To build

yarn build

You can find the optimised bundle in the dist folder.

Testing

To test Components, please run tests as below

yarn test

Currently, only simple tests have been implemented, typically, we should do:

• TDD Test Driven Development
• BDD Behavior Driven Development