A well-organised project structure is crucial for managing your Flask application effectively. It makes collaboration easier, simplifies debugging, and allows for easier expansion of your project.
Here's a recommended folder structure for your Flask project:
/your_project_name
|-- /static
| |-- /css
| |-- /js
| |-- /images
|-- /templates
| |-- index.html
| |-- base.html
|-- models.py
|-- views.py
|-- app.py
|-- .gitignore
/static/: Contains static assets like CSS, JavaScript, and images.
/css/: Store your CSS files here (e.g., main.css, forms.css).
/js/: JavaScript files go here (e.g., script.js).
/images/: Place your image files in this directory.
/templates/: Holds all HTML templates (e.g., base.html, index.html, edit.html).
models.py: Contains your database models
views.py: Stores route handlers
app.py: The main application file where you initialize Flask and bring everything together.
.gitignore: Specifies which files and directories Git should ignore.
Clone the empty repository provided through GitHub Classroom:
git clone <repository-url>
cd <your-project-name>
Lets setup the virtual environment and install dependencies.
Create Virtual Environment:
python -m venv venv
Mac: source venv/bin/activate
Windows: venv\Scripts\activate
Install Dependencies:
pip install flask flask_sqlalchemy
A well-designed database schema is the foundation of any data-driven web application.
For this guide, we'll design an example schema for a Task Manager application.
For the Task Manager example, we'll need to store information about tasks. Here's a suggested schema:
id (integer): A unique identifier for each task.
title (text): The title or brief description of the task.
description (text): A more detailed description of the task (optional).
due_date (date): The deadline for the task.
priority (integer): The priority level of the task (e.g., 1 for high, 2 for medium, 3 for low).
In your models.py file, use SQLAlchemy to define your database schema.
Here's an example for the Task Manager application - showing various data types in use:
from flask_sqlalchemy import SQLAlchemy
from datetime import datetime
db = SQLAlchemy()
class Task(db.Model):
id = db.Column(db.Integer, primary_key=True)
title = db.Column(db.String(100), nullable=False)
description = db.Column(db.Text)
due_date = db.Column(db.Date, nullable=False)
priority = db.Column(db.Integer, nullable=False)
completed = db.Column(db.Boolean, default=False)
created_at = db.Column(db.DateTime, default=datetime.utcnow)
def __repr__(self):
return f'<Task {self.title}>'
Using a separate models.py file offers several benefits:
Separation of Concerns: It keeps database logic separate from route handling.
Reusability: Models can be easily imported and used in different parts of your application.
Maintainability: Changes to your data structure are centralized in one file.
To use your models, import them in your views.py or wherever you define routes:
from models import db, Task - Rename 'Task' to your model name
Effective screen design ensures that your application is user-friendly and visually appealing.
Let's plan the main screens for our Task Manager application:
To plan your screens, you should create wireframes for the main pages of your application. Here are some suggestions:
Home Page
Add Item Form
Edit Item Form
Single Item View
Tools for creating wireframes:
Figma (free for up to 3 designs)
Wireframe.cc (simple, browser-based tool)
Go simple: Paper, Google Drawings, MS Paint
Responsive design ensures your application looks good and functions well on both desktop and mobile devices. When creating your wireframes or mockups, you need to design layouts for both desktop and mobile views. Bootstrap makes it easy to create responsive designs that work well on both desktop and mobile devices. We will discuss this more in detail later, but for now have a plan for how you would like it to look.
When creating your designs:
Start with either desktop or mobile layout first, then adapt for the other.
Consider how elements will reflow or resize between desktop and mobile layouts.