rvdleun / schiphol-frontend-assignment

My submission for the Schiphol Frontend Assignment

Schiphol Frontend Assignment

This is a frontend assignment for Schiphol. It is a simple web application that displays a list of flights and allows the user to filter the list by flight number.

The latest deployed version can be found here.

Getting Started

First, run the development server:

npm run dev

Open http://localhost:3000 to start developing.

Prettier is used to format the code. With the use of husky, the code will be formatted automatically on commit.

Environment variables

The following environment variables can be set to configure the application:

• NEXT_PUBLIC_FLIGHTS_URL
  • This URL will be used to retrieve the flights data. If none is set, the application will use the default /flights.json URL.
• NEXT_PUBLIC_STORYBOOK_URL
  • If set, this will display a storybook logo on the top left of the application with a link to the storybook page.

Storybook

Storybook is used to develop and test components in isolation. To run storybook:

npm run storybook

Open http://localhost:6006 to view the storybook.

Testing

Unit tests are available for the utility functions, using Jest. To run the tests:

npm run test

Docker

The project can be run in a docker container. To build the image:

docker build -t schiphol-frontend-assignment .

To run the container:

docker run -p 80:80 schiphol-frontend-assignment

The image will have both the project and Storybook available. Open http://localhost to view the application, and http://localhost/storybook/index.html for storybook.

Notable dependencies

• Next.js - Framework
• Storybook - Component development and documentation
• Prettier - Code format
• Jest - Unit testing
• SWR - Data fetching
• @mui/icons-material - Icons