Basic { Flask + React } App

This is an app made with Flask (backend) and React (frontend)

1# First thing first, set up the backend:

• Create the backend folder in the app-folder
• Then install Flask, SQLAlchmy and Flask-cors

\backend> Pip install Flask
\backend> Pip install Flask-SQLAlchemy
\backend> Pip install Flask-cors

• After this, you can start building your backend API

Check out the files : config.py, main.py and model.py in the backend folder.

Here's the config.py :

from flask import Flask
from flask_sqlalchemy import SQLAlchemy
from flask_cors import CORS

# create the app
app = Flask(__name__)
CORS(app)

# configure the SQLite database, relative to the app instance folder
app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///flapp01.db"

app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False

# create the extension
db = SQLAlchemy(app)

---

2# Set up the Frontend:

• Create the frontend folder in the app-folder by installing React JS

\> pnpm create vite frontend --template react

Note that: I used Vite Js and PNPM, feel free to use whatever you like.

• Then get in the frontend folder/directory and install the node package

\> cd frontend
\frontend> pnpm install

---

3# Add some styling tools (optional):

• Still in the frontend side, install Tailwind Css

\frontend> pnpm install -D tailwindcss
\frontend> npx tailwindcss init

• The same again, install Framer Motion

\frontend> pnpm install framer-motion

$${\color{#00cec9}Enjoy ~ !}$$

Why do I use PNPM instead of NPM ? Well.. It's simply because it is -better- faster and lightweight.

---

X: @Momodo241