Setting up Our Project Structure

In this lesson we’ll prepare the project structure for the Image Optimizer application: a Flask backend and a React frontend. We’ll scaffold a simple Flask backend, create recommended directories and files, initialize a Git repository, and generate a requirements.txt file so others can reproduce the environment.

Overview — what we’ll do

Create and activate a Python virtual environment (venv).
Scaffold the Flask application layout.
Install Flask and export dependencies to requirements.txt.
Initialize a Git repository and add a sensible .gitignore.

Quick checklist

Step	Description
1	Create and activate a virtual environment
2	Scaffold the backend folder layout and files
3	Install Flask and capture dependencies to `requirements.txt`
4	Initialize Git, add remote, add `.gitignore`, and commit

1) Create and activate a virtual environment

Create a virtual environment (recommended) to isolate dependencies:

python3 -m venv venv
source venv/bin/activate   # On Windows use `venv\Scripts\activate`
python --version

Optional: verify the Python REPL briefly:

python
# >>> quit()

Keeping your dependencies isolated with a virtual environment prevents version conflicts when running or deploying the app.

2) Change into the backend project directory and scaffold the app

From your project root, switch into the backend folder. In this course the backend is called imageoptimizer.app:

# from your project root
cd imageoptimizer.app

Create the recommended directory layout and files. You can create directories and files manually, or run the following to scaffold everything at once:

mkdir -p app/templates instance
touch app/__init__.py app/routes.py app/models.py app/forms.py app/templates/base.html instance/config.py run.py requirements.txt .gitignore

A typical Flask-style layout we’re following looks like this:

my_flask_app/
├── app/
│   ├── __init__.py
│   ├── routes.py
│   ├── models.py
│   ├── forms.py
│   └── templates/
│       └── base.html
├── instance/
│   └── config.py
├── venv/
├── requirements.txt
└── run.py

Notes on files/folders

app/ — application package containing blueprints, routes, models, forms, templates, etc.
instance/ — holds configuration that should not be checked into VCS (e.g., secret keys).
run.py — simple entrypoint to start the Flask app in development.
requirements.txt — pinned dependencies for reproducible installs.

Do not commit sensitive secrets (API keys, DB passwords) to the repository. Put them in instance/config.py or use environment variables, and ensure they are excluded by your .gitignore.

3) Install Flask and record dependencies

Install Flask into your activated virtual environment and export installed packages to requirements.txt:

pip install Flask
pip freeze > requirements.txt

A minimal example of what requirements.txt might contain (versions will vary per environment):

blinker==1.9.0
click==8.1.7
Flask==3.1.0
itsdangerous==2.2.0
Jinja2==3.1.4
MarkupSafe==3.0.2
Werkzeug==3.1.3

Maintain requirements.txt by running pip freeze > requirements.txt whenever you add or update Python packages. When collaborators or CI need to recreate the environment, they can run pip install -r requirements.txt.

4) Initialize Git and add a .gitignore

Initialize a new Git repository and add a remote (example remote shown here). Then create a .gitignore so virtual environments and sensitive local files are not committed. Initialize the repository and add the remote:

git init
git remote add origin https://github.com/JeremyMorgan/Super-Image-Optimizer.git

Example .gitignore for a Python/Flask project:

# Byte-compiled / optimized / DLL files
__pycache__/
*.py[cod]
*$py.class

# C extensions
*.so

# Distribution / packaging
.Python
env/
venv/
ENV/
env.bak/
venv.bak/
*.egg-info/
dist/
build/
eggs/

# Flask specific
instance/
.webassets-cache

# IDEs and local config
.vscode/
.idea/

# Testing caches and caches
.mypy_cache/
.dmypy.json
dmypy.json
.pyre/

After creating .gitignore, add and commit the initial code:

git add .
git commit -m "initial commit"
git branch -M main
git push -u origin main

If the remote already has commits and your push is rejected, pull remote changes first using rebase and then push:

git config pull.rebase true
git pull --rebase origin main
git push -u origin main

5) Next steps

Implement Flask routes and API endpoints that the React frontend will consume (we’ll cover creating endpoints and request/response formats next).
Add basic tests and a simple CI workflow (GitHub Actions or similar) to validate API behavior on push.
When integrating the frontend, plan CORS, authentication, and how images are uploaded/served.

References and further reading

Flask Documentation: https://flask.palletsprojects.com/
Python venv docs: https://docs.python.org/3/library/venv.html
Git documentation: https://git-scm.com/doc

That’s it — the project structure and repository are ready. In the next lesson we’ll build the Flask API endpoints and wire them up to the React frontend.

Course Introduction

Introduction to AI-Assisted Development

Planning Phase

Development Phase - Backend

Development Phase - Frontend

Project Completion

Setting up Our Project Structure

1) Create and activate a virtual environment

2) Change into the backend project directory and scaffold the app

3) Install Flask and record dependencies

4) Initialize Git and add a .gitignore

5) Next steps

Watch Video

​1) Create and activate a virtual environment

​2) Change into the backend project directory and scaffold the app

​3) Install Flask and record dependencies

​4) Initialize Git and add a .gitignore

​5) Next steps

Watch Video

1) Create and activate a virtual environment

2) Change into the backend project directory and scaffold the app

3) Install Flask and record dependencies

4) Initialize Git and add a .gitignore

5) Next steps