FullStack Tutorial

In this fullstack tutorial, I will implement a simple CRUD App, including:

• A Frontend using JavaScript(React)
• A Backend using Python(Flask)

This CRUD App can manipulate a database which include a key and a pair of names, as follows:

Implementation

One of the fancy part of web app is that it is seperated by layers.

• The top layer is frontend, which utilises the APIs provided by backend. When implementing frontend, we can assume that all the APIs has already been implemented.
• The middle layer is backend, which utilises the functions in Model layer to manipuate database. When implementing backend, we assume that all the functions in Model layer has already been implemented.
• The bottom layer is Model layer, which includes the implementation of manipulating database. I have provided a few implementations, they all have the same fuction interface.

You may start from any layer you prefer. If not sure, I recommend you to look at APIs first.