Combining CoreUI + React with Python + Flask to create a simple website (Part 1)

Open Source CoreUI and React with Python and Flask to create WebSite

Dring this weekend my 6th grader son asked me if I could teach him creating a website from scratch using open-source content. He knows a little Python, JavaScript, and HTML. So I decided to create a YouTube series showing him how he can learn by himself and many other young aspirants worldwide. The whole series is divided into multiple steps and source code is shared from my GitHub.

Step 1: Creating Front End using CoreUI and React

1. Cloning CoreUI repo for React
2. Installing and updating Packages
3. Building to code
4. Testing/Running the code
5. Adding Environment setting
6. Changing its running port
7. Cleaning the code by removing extra template code
8. Updating the navigation menu and new pages

Here is the detailed step by step video to explain the above steps:

The source code for step 1 exercise is located below:

https://github.com/Avkash/300seconds/tree/master/coreui_react_starter

Step 2: Creating backend using Python and Flask

1. Get Python (2.7 or 3.7) ready
2. Make sure we have both Flask and flask_restful
3. Creating base app.py
4. Adding GET and POST API handler
5. Running the server
6. Testing API using CURL
7. Parsing and Handling API parameters
8. Packaging and sending API response

Here is the detailed step by step video to explain the above steps:

The source code for step 2 exercise is located below:

https://github.com/Avkash/300seconds/tree/master/python_flask_server_starter

Step 3: Combining CoreUI and React-based front end with Python and Flask based backend

1. Cloning CoreUI React Starter Code as base UI code
2. Create a simple python server with flask
3. Setting Proxy server in UI to connect with flask server
4. Add GET and POST RESTful support to UI
5. Add simple API in python server
6. Connect python API from UI using GET and POST
7. Review & Understanding the code altogether

Here is the detailed step by step video to explain the above steps:

The source code for step 3 exercise is located below:

https://github.com/Avkash/300seconds/tree/master/coreui_react_python_flask_starter

I am working on the second and third parts of this multi-steps tutorial series to show how to add visual content to the UI and support data from the backend server. Finally, package the solution as one and host it to a cloud provider.

Thank you so much.

Avkash Chauhan