Fullstack Assignment

This project allows de Bijenkorf's Hiring Managers to screen potential Fullstack Developer applicants.

Table of Contents

• Folder structure
• Pre-requisites
• Goal
• Instructions
• Requirements
  • Scenario: Reservation Overview
    • Loading
    • No reservations
    • Reservations
  • Scenario: Create Reservation
    • Valid input
    • Invalid input
    • Cancel
  • Scenario: Delete Reservation
• Notes
• Submitting your code

Folder structure

The initial project structure looks like this:

client/
wireframes/
NOTES.md
README.md

Pre-requisites

You can open the wireframes in Draw.io in your browser or by using the Draw.io VSCode extension

Goal

Create a straight forward web application that demonstrates knowledge of the following:

• Containerization;
• Data storage;
• REST API implementation;
• API CRUD operations;
• Client state management;
• Client routing;
• Implementation of Web Client in React;
• Unit Testing

Instructions

You are asked to create a working application. Technology choice is mostly up to you, however we ask you to implement the Web Client in React. For that reason we have bootstrapped the client with Create React App. Implementation of routing, state management and networking is down to you. You are free to implement the API in any way you feel appropriate given it satisfies the above mentioned Goals.

Requirements

Implement the following wireframes to the best of your ability:

Scenario: Reservation Overview

Loading

Wireframe

GIVEN waiting for network
WHEN page loads
THEN display loading indicator

No reservations

Wireframe

GIVEN there are no reservations
WHEN page loads
THEN display a message to the user

Reservations

Wireframe

GIVEN there are reservations
WHEN page loads
THEN list reservation items

Scenario: Create Reservation

Wireframe

GIVEN user taps "Create reservation" button
WHEN on start screen
THEN show Create Reservation form

Valid input

All fields are required

GIVEN user taps "Create" button
WHEN valid user input in edit form
THEN create reservation
AND return to Reservation Overview

Invalid input

All fields are required

GIVEN user taps "Create" button
WHEN invalid user input on edit form
THEN mark fields as invalid

Cancel

GIVEN user taps "Cancel" button
WHEN on edit form
THEN return to Reservation Overview

Scenario: Delete Reservation

Wireframe

GIVEN user taps "Delete" button
WHEN on start screen
THEN show dialog

GIVEN user taps "Delete" button
WHEN dialog shown
THEN delete reservation item

GIVEN user taps "Cancel" button
WHEN dialog shown
THEN close dialog

Notes

If you have any remarks or observations while working on this assignment you are encouraged submit these along with the assignment in NOTES.md.

Submitting your code

When you complete the assignment, please push your code to a remote repository or email us a .zip file with your solution. Please do not fork this repository.