Python Flask API With React Js

This was my first time messing around with Flask. At first, I thought Python was just used for data science or robotics, but it provides another feature to use it for the web as well. Flask is a lightweight web application framework. It is designed to make getting started quick and easy, with the ability to scale up to complex applications. However, not only I using Flask, but I’m going to API as well and all of the features are used for the backend to collect data.

The good thing with Flask is that you don't have to create a separate folder outside of react js, you can just install all the files into the frontend of the react folder. In order to make this work, you need to have a list of python tools by installing it into the into your terminal in your front-end of the project. IMPORTANT: make sure you Flask API into your front-end folder.

- mkdir api
- python3 -m venv venv
- source venv/bin/activate
- (venv) $ pip install flask python-dotenv

Flask is also used to build CRUD methods. CRUD stands for create, read, update, destroy. It allows us to change any information or data in the back-end.

The code below shows my friends backend code. My partner and I were working together at a Hackathon competition. It shows us “@hackathon.route(‘/v1/add’, methods=[“POST”])” wich allows us to connect our project mae called hackathon and connect to the location of your API folder using the “POST” method. After that the rest of the codes shows that it’s going to store the data to the backend.

@hackathon.route('/v1/add', methods=["POST"])
@cross_origin()
def add():
    try:
        json_data = request.get_json()
        file_id = uuid.uuid4()
        with open(os.path.join(UPLOAD_FOLDER, f"{file_id}.json"), 'w') as outfile:
            json_data['ProductId'] = str(file_id)
            json.dump(json_data, outfile)
        return jsonify({"status": "success", "ProductId": file_id})
    except requests.exceptions.RequestException as e:
        print(e) # TODO: change this to logging
        return jsonify({"status": "failed"})