⇦ Back

WDX-180

Web Development X

Planning, Architecture & Diagrams

From “Code That Works” to “Code That Scales”

Most beginners think software development is writing code.

Professional developers know software development is designing systems.

Yesterday, we built a small Express application.

Today, we’re going to answer a more important question:

“How do we stop this project from becoming a disaster in three weeks?”

Learning Objectives

By the end of this lesson, students will be able to:

Understand software architecture fundamentals
Explain separation of concerns
Understand MVC architecture
Design a relational database schema
Understand primary keys and relationships
Organize an Express application into modules
Use Express Router
Design route structures before implementation
Create architecture diagrams
Plan a CRUD application before writing code

Why Planning Matters

Imagine building a house.

Would you:

Create blueprints first?
Start randomly placing bricks?

Most developers choose option #2 and then wonder why their application resembles a haunted shed.

Software Engineering Reality

A typical project spends:

Activity	Time
Planning	20%
Coding	30%
Debugging	50%

Good architecture dramatically reduces debugging.

Part 1 — Understanding Our CMS

Before writing more code, let’s define the problem.

Our CMS manages products.

Each product contains:

ID
Name
Description
Price
Created Date

Example:

ID	Name	Price
1	Keyboard	49.99
2	Mouse	19.99

What Operations Do We Need?

Our CMS needs CRUD operations.

flowchart LR

A[Create Product]
B[Read Products]
C[Update Product]
D[Delete Product]

A --> E[(Database)]
B --> E
C --> E
D --> E

Part 2 — Database Fundamentals

What Is a Database?

A database is simply a system for storing information.

Think of Excel.

But:

Faster
More reliable
Supports millions of records
Multiple users can access it simultaneously

Why SQLite?

We’ll use SQLite because:

Zero configuration
Single file database
Fast
Great for learning
Used in real-world products

Examples:

Android
iOS
Chrome
Firefox

All use SQLite internally.

Understanding Tables

A table is like a spreadsheet.

Products Table:

id	name	description	price
1	Keyboard	Mechanical	49.99
2	Mouse	Wireless	19.99

Primary Keys

Every table needs a unique identifier.

id INTEGER PRIMARY KEY

Example:

id	name
1	Keyboard
2	Mouse
3	Monitor

The ID uniquely identifies a record.

Think of it as a database passport number.

Product Database Schema

Our first schema (using SQL):

CREATE TABLE products (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    name TEXT NOT NULL,
    description TEXT,
    price REAL NOT NULL,
    created DATETIME DEFAULT CURRENT_TIMESTAMP
);

Understanding the Schema

Column	Purpose
id	Unique identifier
name	Product name
description	Product details
price	Product price
created	Creation timestamp

Visualizing the Database

erDiagram

PRODUCTS {
    INTEGER id PK
    TEXT name
    TEXT description
    REAL price
    DATETIME created
}

Part 3 — Thinking Like an Architect

Most beginners create this:

index.js

And then add code until the file reaches 4,000 lines.

At this point the file becomes sentient and starts generating bugs.

Better Organization

Instead:

project/
  ├── routes/
  ├── views/
  ├── db/
  ├── public/
  ├── config/
  └── index.js

Each folder has a single responsibility.

Separation of Concerns

One of the most important principles in software engineering:

A module should have one reason to change.

Bad:

// route
// html
// sql
// css
// validation

// all mixed together

Good:

Route handles requests

Database handles storage

View handles presentation

Part 4 — MVC Architecture

Most web frameworks are based on MVC.

MVC means:

Model
View
Controller

Model

Responsible for:

Data
Database
Business Logic

Examples:

Product.findAll(); // <-- Read 
Product.create(); // <-- Create
Product.update(); // <-- Update
Product.delete(); // <-- Delete

View

Responsible for:

HTML
UI
Templates

Examples:

EJS
React
Vue
Angular

Controller

Responsible for:

Requests
Responses
Coordination

Example:

app.get('/products', controller);

MVC Diagram

flowchart LR

A[Browser]

B[Controller]

C[Model]

D[(Database)]

E[View]

A --> B
B --> C
C --> D

D --> C
C --> B

B --> E
E --> A

MVC in Our Project

Model

Later:

Product

View

Current:

EJS Templates

Controller

Current:

app.get(...)
app.post(...)

Part 5 — Express Router

Yesterday everything lived in:

index.js

That won’t scale.

Router Concept

Instead of:

app.get(...)
app.get(...)
app.get(...)
app.get(...)
app.get(...)

We create route modules.

Example Structure

└── routes/
   ├── products.js
   ├── users.js
   └── admin.js

Product Router

const express = require('express');

const router = express.Router();

router.get('/', (req, res) => {
    res.send('All Products');
});

module.exports = router;

Register Router

index.js:

const productsRouter = require('./routes/products');

app.use('/products', productsRouter);

Result:

/products

is handled by:

routes/products.js

Visualizing Route Flow

flowchart LR

A[Request]

B[index.js]

C[Products Router]

D[Route Handler]

A --> B
B --> C
C --> D

Part 6 — Designing Routes Before Coding

Good developers design routes first.

Product Routes

Method	URL	Purpose
GET	/products	List all
GET	/products/:id	View one
GET	/products/create	Show form
POST	/products/create	Save
GET	/products/edit/:id	Edit form
POST	/products/edit/:id	Update
POST	/products/delete/:id	Delete

Route Diagram

flowchart TD

A[Products]

A --> B[List]

A --> C[Single Product]

A --> D[Create]

A --> E[Update]

A --> F[Delete]

Part 7 — Planning Views

Before creating templates, define them.

├── views/
│   └── products/
│       ├── list.ejs
│       ├── single.ejs
│       ├── create.ejs
│       └── edit.ejs

Why This Structure?

Without structure:

views/
├── index.ejs
├── index2.ejs
├── productPage.ejs
├── newProduct.ejs
└── test.ejs

Nobody knows what’s happening.

Not even the person who wrote it.

Especially not the person who wrote it.

Part 8 — Planning Database Access

Soon we’ll add:

db/
├── db.js
└── setup.js

db.js

Responsible for:

Connecting to SQLite

setup.js

Responsible for:

Creating tables
Seeding sample data

Future Database Flow

flowchart LR

A[Route]

B[Database Module]

C[(SQLite)]

A --> B
B --> C
C --> B
B --> A

Part 9 — Node.js SQLite

Node.js now includes a built-in SQLite module.

Documentation:

Node.js SQLite Documentation

We’ll begin with SQLite fundamentals first and later compare:

Raw SQL
SQLite APIs
Sequelize ORM

Understanding SQL before ORM is critical.

Otherwise ORMs become magic spells rather than tools.

Architecture Review

Current:

Browser
   ↓
Express
   ↓
EJS

Soon:

Browser
   ↓
Express
   ↓
Router
   ↓
Controller
   ↓
Database
   ↓
SQLite

Assignment

Exercise 1

Create the following folder structure:

project/
├── routes/
├── views/
├── public/
├── db/
└── config/

Exercise 2

Read about Route Parameters in Express.JS and create placeholder routes:

GET /products
GET /products/create
GET /products/1
GET /products/edit/1

Return simple text responses.

Example:

Product List

Create Product

etc.

Exercise 3

Create a database design document.

Example:

Column	Type
id	INTEGER
name	TEXT
description	TEXT
price	REAL

Bonus Challenge

Design the schema for a future Users table:

users

Think about:

username
email
password
created date

What fields should be required?

What fields should be unique?

Key Takeaways

Today you learned:

Why architecture matters
Separation of concerns
MVC fundamentals
Database schema design
Primary keys
Express Router
Route planning
View planning
Application structure

Tomorrow we stop drawing diagrams and start storing real data in SQLite.

The database will finally enter the chat. 😄

⚠️ A large part of the content of this module was created using Generative AI (ChatGPT). The synthetic (AI-generated) content was reviewed and curated by Kostas Minaidis.

Project maintained by in-tech-gration Hosted on GitHub Pages — Theme by mattgraham