The FReMP Stack — Building a full stack web application

FReMP stack is a very powerful and highly scalable stack which reduces complexity of back-end code, deals with the database requests very quickly and brings a user friendly interface for front-end users.

This tutorial will go through the steps to build a simple full stack web application using the FReMP(Flask + ReactJS + Mongodb + Python3) stack. Before starting make sure you have the stack installed on your machine. If not, you can follow this article.

The app we are building

The app allows users to input their name on a form and submit the form. Upon submitting, their name is saved in a mongodb collection and at the same time, a list all names is fetched from the collection and displayed to the user. I know this application does not really makes sense, but this is the simplest idea I could think of, other than a to-do list and the one here.

Below is a GIF animation of the final version of the application.

Please note that I did not add much styling to the interface because I tried making it as simple as possible. You can, of course, add your styles when implementing yours.

ReactJS ← → Python3/Flask ← → Mongodb

1. Create root folder

$ mkdir FReMP
$ cd FReMP

We will create a folder and name it ‘FReMP’. This will contain both our frontend and backend source code.

2. Create React front-end folder

$ create-react-app frontend
$ cd frontend

At this point, your frontend code has been generated and you are good to start coding. However there is one slight change you need to need in the code. In the frontend folder, you will a file called ‘package.json’. You just need to specify a proxy in this file. Simply add the following line to package.json:

"proxy": "http://localhost:5000"

This will be needed when an unknown request hits localhost:3000, it will redirect it to localhost:5000, which will contain our backend logic. Carrying on, you can start creating the components on your front-end.

We will have two components on the page; one for the input field and other one for the list of names. Let’s start by creating a components folder inside src folder and create a component called NewName.js

> FReMP/frontend/src/components/App.js

import React, { Component } from 'react';
import './App.css';
import Results from './components/Results';
import NewName from './components/NewName';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      names: [],
      loading: true
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({ name: event.target.value });
  }

  async handleSubmit(event) {
    event.preventDefault();
    this.setState({
      loading: true,
    })
    await fetch('/addname/' + this.state.name, {
      method: 'GET'
    });
    this.getNames()
  }


  getNames() {
    fetch('/getnames/')
      .then(response => response.json())
      .then(json => {
        this.setState({
          name: '',
          names: json,
          loading: false
        })
      })
  }

  componentDidMount() {
    this.getNames();
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <NewName handleChange={this.handleChange} handleSubmit={this.handleSubmit} value={this.state.name} />
          {this.state.loading ? <h1>Loading</h1> : <Results {...this.state} />}
        </header>
      </div>
    );
  }
}

export default App;

> FReMP/frontend/src/components/NewName.js

import React, { Component } from 'react';

class NewName extends Component {
    render() {
        return (
            <div>
                <form onSubmit={this.props.handleSubmit}>
                    <input
                        type="text"
                        name="newName"
                        value={this.props.value}
                        onChange={this.props.handleChange}
                        placeholder="New Name"
                        autoFocus
                        autoComplete='off'
                    />
                    <button type="submit">Add</button>
                </form>
            </div>
        )
    }
}

export default NewName;

> FReMP/frontend/src/components/Results.js

import React, { Component } from 'react';

class Results extends Component {
    render() {
        return (
            this.props.names.map(row => 
                <div key={row.id}>
                    {row.name}
                </div>
            )
        )
    }
}

export default Results;

3. Create Flask back-end folder

$ mkdir backend
$ cd backend
$ touch app.py

> FReMP/backend/app.py

from flask import Flask, redirect, url_for
from pymongo import MongoClient
from flask_cors import CORS, cross_origin
import json

app = Flask(__name__)
cors = CORS(app)
app.config['CORS_HEADERS'] = 'Content-Type'


mongoClient = MongoClient('mongodb://127.0.0.1:27017')
db = mongoClient.get_database('names_db')
names_col = db.get_collection('names_col')

@app.route('/addname/<name>/')
def addname(name):
    names_col.insert_one({"name": name.lower()})
    return redirect(url_for('getnames'))

@app.route('/getnames/')
def getnames():
    names_json = []
    if names_col.find({}):
        for name in names_col.find({}).sort("name"):
            names_json.append({"name": name['name'], "id": str(name['_id'])})
    return json.dumps(names_json)

if __name__ == "__main__":
    app.run(debug=True)

Since we are connection Python with MongoDB, we will use pymongo and use the MongoClient function to establish the connection. MongoClient accepts a string as parameter, and the string is the url with the port that connects your pc to mongodb, i.e, mongodb://127.0.0.1:27017. In the cluster, we will create a database called names-db and inside the database, we will create a collection, names-col, which will contain a list of json objects. Each object will the name input by the user. After getting the collection name, we define two methods, namely, addname and getnames. When addname is called, it saves the name passed into the db. Then the second method calls all the names in the db and sends them to the frontend, on the component Results.

4. MongoDB

Well, we will not need to do much here, since we already have mongodb service installed and running on our machine. All we need is the url with the port number, which I have already defined in app.py. If your service runs on a different port, you will need to change it according to yours. Most of the time it’s mongodb://127.0.0.1:27017.

If you want to see the documents directly from your database, you can issue the following command:

$ mongo
$ use names_db
$ db.names_col.find()

5. Run the app

To run the app, we will need 2 terminals. One directed to frontend folder, and the other one, to the backend folder.

Run this on the terminal pointed to your frontend folder:

$ yarn start

Run this on the terminal pointed to your backend folder:

$ python3 app.py

Afterwards, open up localhost:3000 and you should be able to see the platform right there.

For the next tutorial, I will try to deploy this application on Heroku and see how it goes. Until then,

Cheers! (: