Module 17: Final Project — Build a Responsive Online Store

Course: Programming with Free AI Tools — Build Real Websites and Apps
Module: 17 of 17
Audience: Ages 15–25, beginners
Focus: A capstone project where you combine everything you learned (HTML, CSS/Bootstrap, JavaScript, PHP, MySQL, authentication, security, and deployment) to build and ship a real, responsive e-commerce store — with AI as your assistant, not your replacement.

Core principle: AI writes code fast, but you are the engineer. Read every line, test every feature, secure every input, and never paste AI output you cannot explain. Verify before you trust.

---

About This Capstone

Unlike earlier modules that are organized into short lessons, the Final Project is organized into 4 milestones. Each milestone is a chunk of the store you build over roughly one week. Instead of "theory then coding," each milestone gives you Requirements, Tasks, and a Checklist to complete, plus everything you need to succeed: learning objectives, instructor notes, a presentation outline, a live demonstration, AI prompts, starter and final code, exercises, homework, and a quiz.

What You Will Build

A responsive online store called AI Shop with:

• User login/registration (hashed passwords, sessions)
• A product catalog with categories, search, and detail pages
• A shopping cart and a checkout flow that saves orders
• An admin panel with full CRUD for products
• A MySQL database backing everything
• AI-assisted development with prompts shown and output verified
• A deployed live URL anyone can visit

The 4 Milestones

Milestone	Title	Duration
1	Project Setup and Database Schema	~1 week (8–10 hrs)
2	Product Catalog and User Authentication	~1 week (10–12 hrs)
3	Shopping Cart and Checkout Flow	~1 week (10–12 hrs)
4	Admin Panel and Deployment	~1 week (10–12 hrs)

---

Grading Rubric (Read This First)

Every milestone submission and your final store are graded on these five criteria. Keep them in mind at every step.

Criterion	Weight	What graders look for
Correctness	40%	Features actually work: login, catalog, cart, checkout, admin CRUD all function without errors.
Code readability and style	20%	Consistent indentation, clear names, small functions, separated config, no dead code.
Use of AI tools (prompts shown, output verified)	20%	You include the prompts you used and evidence you tested/verified the AI output.
Security awareness	10%	Prepared statements, hashed passwords, output escaping, validated input, protected admin.
Documentation and comments	10%	A clear README, helpful inline comments, and setup instructions.

Reminder shown in every milestone: save your AI prompts and note what you changed after verifying the output. "I asked, I read, I tested, I fixed" is the workflow graders reward.

Recommended Project Folder Structure

ai-shop/
├── config.php            # DB connection + app settings (never commit real secrets)
├── db/
│   └── schema.sql        # CREATE TABLE + seed data
├── includes/
│   ├── header.php        # shared top of page + nav
│   ├── footer.php        # shared bottom of page
│   ├── auth.php          # login helpers + require_login()
│   └── functions.php     # helpers: e(), money(), redirect()
├── public/               # pages users visit
│   ├── index.php         # catalog / home
│   ├── product.php       # product detail
│   ├── login.php
│   ├── register.php
│   ├── logout.php
│   ├── cart.php
│   └── checkout.php
├── admin/                # protected admin area
│   ├── index.php         # dashboard / product list
│   ├── product-form.php  # add/edit product
│   └── product-delete.php
├── assets/
│   ├── css/style.css
│   └── img/
└── README.md

---

Table of Contents

• Milestone 1: Project Setup and Database Schema
• Milestone 2: Product Catalog and User Authentication
• Milestone 3: Shopping Cart and Checkout Flow
• Milestone 4: Admin Panel and Deployment
• Final Submission Checklist

---

Milestone 1: Project Setup and Database Schema

Duration: ~1 week (8–10 hours of work)

Learning objectives

• Set up a clean project folder, a local server (XAMPP), and version control (Git).
• Design a relational database schema for a store (users, categories, products, orders, order_items).
• Create a reusable, secure database connection using PDO with error handling.
• Seed the database with sample categories and products for development.
• Establish shared includes (header, footer, helper functions) that every page reuses.

Requirements

• The project runs locally on http://localhost/ai-shop/public/.
• A MySQL database named ai_shop exists with all core tables and correct relationships.
• Prices use DECIMAL(10,2) — never FLOAT.
• Passwords will be stored hashed (schema uses a VARCHAR(255) column; hashing happens in Milestone 2).
• Database credentials live in a single config.php, not scattered across pages.
• A .gitignore excludes secrets and local artifacts.

Tasks

1. Install/confirm XAMPP; start Apache and MySQL.
2. Create the ai-shop/ folder structure shown in the overview.
3. Initialize a Git repo and add a .gitignore.
4. Write db/schema.sql with all tables + seed data and import it via phpMyAdmin.
5. Write config.php using PDO with exception mode enabled.
6. Create includes/functions.php, includes/header.php, and includes/footer.php.
7. Build a simple public/index.php that connects to the DB and prints "DB connected" to prove the wiring works.

Instructor notes

• Emphasize planning the schema before writing PHP. Draw the tables and relationships on a whiteboard.
• Push PDO over mysqli for the capstone: cleaner API, named placeholders, and consistent exceptions.
• Set PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION so mistakes surface loudly during development.
• Explain why money is DECIMAL: FLOAT causes rounding errors (0.1 + 0.2 != 0.3).
• Have students verify the schema with DESCRIBE products; and a SELECT on seed data before moving on.
• Warn against committing real passwords. Even locally, root/empty is a dev-only convenience.

Presentation outline

1. Capstone overview and the grading rubric (10 min)
2. Folder structure and separation of concerns (10 min)
3. Entities and relationships: users, categories, products, orders, order_items (15 min)
4. Choosing column types; DECIMAL vs FLOAT for money (10 min)
5. PDO connection pattern and error handling (15 min)
6. Shared includes and helper functions (10 min)

Demonstration

1. In phpMyAdmin, create database ai_shop.
2. Paste db/schema.sql, run it, and confirm 5 tables appear.
3. Run DESCRIBE products; and SELECT * FROM products; to verify seed data.
4. Create config.php, then load public/index.php to see "DB connected".
5. Break the DB password on purpose to show the caught PDO exception, then fix it.
6. Commit the project: git add . then git commit -m "Milestone 1: setup + schema".