Building Your First Full Stack Python Application: A Step-by-Step Tutorial

 Python is one of the most popular programming languages for full stack development due to its simplicity, versatility, and powerful frameworks. A full stack Python application consists of both front-end and back-end components, working together to create a seamless user experience. In this tutorial, we will guide you through the process of building your first full stack Python application, covering key technologies such as Flask (for back-end development), React (for front-end development), and SQLite (for database management).

---

Step 1: Setting Up the Development Environment

Before we begin, make sure you have the following installed:

• Python (latest version)
• Node.js (for React)
• Flask (Python web framework)
• SQLite (lightweight database)
• React (front-end library)

You can install Flask using the following command:

bash

pip install flask flask-cors flask-sqlalchemy

For React, install Create React App by running:

bash

npx create-react-app my-app

---

Step 2: Creating the Back-End with Flask

The back-end is responsible for handling user requests, processing data, and interacting with the database.

1. Initialize Flask Application
   Create a new Python file (app.py) and set up a basic Flask server:

python

from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/')
def home():
    return jsonify({"message": "Welcome to Full Stack Python App!"})

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

2. Setting Up the Database
   We use SQLite and SQLAlchemy for database management:

python
from flask_sqlalchemy import SQLAlchemy

app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///database.db'
db = SQLAlchemy(app)

class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(80), nullable=False)

db.create_all()

3. Creating API Endpoints
   We create API routes to perform CRUD (Create, Read, Update, Delete) operations.

python

@app.route('/users', methods=['GET'])
def get_users():
    users = User.query.all()
    return jsonify([{"id": user.id, "name": user.name} for user in users])

Run the Flask app:

bash

python app.py

---

Step 3: Creating the Front-End with React

1. Initialize a React Project
   Navigate to the React folder and install Axios for API calls:

bash

cd my-app
npm install axios

2. Fetching Data from Flask API
   Modify App.js to fetch user data:

javascript

import React, { useEffect, useState } from "react";
import axios from "axios";

function App() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios.get("http://127.0.0.1:5000/users")
      .then(response => setUsers(response.data))
      .catch(error => console.error(error));
  }, []);

  return (
    <div>
      <h1>Users List</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

3. Running the React Application
   Start the React server:

bash

npm start

---

Step 4: Connecting Front-End and Back-End

To allow communication between React and Flask, enable CORS in app.py:

python

from flask_cors import CORS
CORS(app)

Now, your front-end React application can successfully fetch data from the Flask back-end.

---

Step 5: Deploying the Application

1. Deploy the Flask API using Heroku or Render.
2. Deploy the React App using Netlify or Vercel.

After deployment, your full stack Python application is live and accessible to users worldwide!

---

Conclusion

Building a full stack Python application involves setting up a back-end with Flask, managing data with a database, and creating a front-end with React. This tutorial covered the essential steps, from setting up the environment to deploying the application. With further enhancements like authentication, user management, and real-time updates, you can create powerful, scalable applications. Start coding today and take your full stack Python development skills to the next level!

Read more

Get Our Institute Location