Fullstack Assignment
Fullstack Reservation CRUD App with ExpressJS, ReactJS, PostgreSQL, Docker and nginx
Table of Contents
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
GIVEN waiting for network
WHEN page loads
THEN display loading indicator
No reservations
GIVEN there are no reservations
WHEN page loads
THEN display a message to the user
Reservations
GIVEN there are reservations
WHEN page loads
THEN list reservation items
Scenario: Create Reservation
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
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.