Introduction

Flask is a web framework. This means flask provides you with tools, libraries and technologies that allow you to build a web application. This web application can be simple web pages, a blog, a wiki or a big commercial website.

Flask is a micro-framework. Micro-frameworks are normally framework with little to no dependencies to external libraries. This has pros and cons. Pros would be that the framework is light, there are little dependencies to update and watch for security bugs, cons is that some time you will have to do more work by yourself or increase yourself the list of dependencies by adding plugins.

We want to build a full stack web application using React as front end and flask as the back end. Our full stack application is a simple todo+reminder app as a utility app. Our application takes and stores todo items which you can also add a reminder at a specific time. We'll be building this app in three parts/series.

Prerequisites

• A basic knowledge of python,
• A basic knowledge in ES6 javascript.
• A basic knowledge in React
• Flask is installed in your environment, if it isn't installed yet you can install it by

  pip install flask
  

• You have React and ReactDOM installed in your local repository, if you don't yet you can do that by pasting this in your command line or we could use create-react-app setup.

  npm install -g react react-dom
  

  The "-g" flag means it installs it globally, meaning we don't have to install it again in our system.

Set up

Now we want to setup our project, one thing we should put in min when doing this is separating the backend from the frontend, so all files relating to the frontend aren't in the same folder as backend files. There are various ways to setup a full stack project, I'll highlight two popular ways to structure your project folder.

• The First Folder Structure

  I call it a "separated" folder structure because both frontend (client) and backend (server) have folders to contain their files like below. Please note I'm using windows commands so may differ from other operating systems.

  Todo-app
  |-client
  |   ├── README.md
  |   ├── node_modules
  |   ├── package.json
  |   ├── .gitignore
  |   ├── public
  |   │   ├── favicon.ico
  |   │   ├── index.html
  |   │   ├── logo192.png
  |   │   ├── logo512.png
  |   │   ├── manifest.json
  |   │   └── robots.txt
  |   └── src
  |    ├── App.css
  |    ├── App.js
  |    ├── App.test.js
  |    ├── index.css
  |    ├── index.js
  |    ├── logo.svg
  |    └── serviceWorker.js
  |-server
    |--server.py
  

  Note that we're using create-react-app folder structure for client side. We can set this up by doing these step by step, first we make a directory called Todo-app by

  mkdir Todo-app
  

  then, we change our active directory to the folder we just created by

  cd Todo-app
  

  then, we make the backend folder by

  mkdir client server
  

  After this, I'll advise for beginners you should use create react app, as this helps us setup our client side React app easily, so we paste this in our command line.

  npx create-react-app client
  

  Note that create-react-app needs to be installed for this to work. You can easily install by,

  npm install -g create-react-app
  

  We can then navigate to the server folder by

  cd server
  

  then, we'll create a .py file called server, this will be our base backend file, we can easily do that by

  touch server.py
  

  We can manually open the folder Todo-app and check through the folders we've made, and check the files inside.

• The Second Folder Structure

  The second folder structure is very similar to the first, only that the server end or backend is in the base folder.

  Todo-app
  |-client
  |   ├── README.md
  |   ├── node_modules
  |   ├── package.json
  |   ├── .gitignore
  |   ├── public
  |   │   ├── favicon.ico
  |   │   ├── index.html
  |   │   ├── logo192.png
  |   │   ├── logo512.png
  |   │   ├── manifest.json
  |   │   └── robots.txt
  |   └── src
  |    ├── App.css
  |    ├── App.js
  |    ├── App.test.js
  |    ├── index.css
  |    ├── index.js
  |    ├── logo.svg
  |    └── serviceWorker.js
  |-server.py
  

  So instead of mkdir server && cd server, we just go straight to

  touch server.py
  

Editor

I have used quite a number of editors like sublime text, Atom, and Vs Code. I'll always recommend Vs Code as the size of the plugins and community is large and ever growing. In addition to this, you can easy stage and push to a github repository without directly using git commands. There are a lot of plugins you can used to make writing and debugging code easier for you, like emmet, ES7 React debugger, Night Owl, and much more. But if you're comfortable with other editors, then it is okay too.

What Next?

We need to start building our application, we'll be starting from building the back end in our next series/part.