Full Stack Development Tutorial: Sending Pandas DataFrame as JSON to CoreUI/React template
In this tutorial, we are going to use a CoreUI React template as front end code and Python and Flask RESTful backend with Pandas to read a CSV and render in the UI as JSON Table.
Tutorial Technical Level: 100–200 (Require some experience with HTML, CoreUI, React, Python, Flask API)
Tutorial Objective:
By the end of this tutorial, you will be able to do the following:
- Core UI React Template
- Python with Flask RESTful API
- Using Pandas module to read a CSV from the web and collect rows as Pandas DataFrame
- Convert Pandas DataFrame to JSON
- Send JSON result in UI and render as HTML Table
Getting Starting code (Bootstrap code to start with):
https://github.com/Avkash/300seconds/tree/master/coreui_react_python_flask_starter
If you are interested in Full Stack Development — Getting Started (Part 1) tutorial to learn how we arrived here, please follow this Part1 tutorial.
Coding Exercise:
Here are the steps you would need to take on both (frontend and backend) sides to make this full code working:
FrontEnd Coding:
- Add a new page (CsvDataReader.js) to your core UI template
- Add routes, navigation and menu support in the layout to launch your page when clicked
- Add ts-react-json-table to your package.json and run “npm update”. This will let you use JsonTable react component to render a table from JSON data object.
Following the CsvDataReader.js code:
Backend Coding:
- Add support for API (/v1/datareader) by adding a resource
# app.py
api.add_resource(DataHandlerFunction, '/v1/datareader')2. Implement DataHandlerFunction in CsvDataHandler.py as below:
Final Source Code (Both CoreUI frontend and Python backend):
https://github.com/Avkash/300seconds/tree/master/coreui_react_python_flask_pandas_starter
YouTube Tutorial (00:43.30 Minutes)
That’s it, thank you.
