Demo 1: AI-Assisted Related Tables Application Build
Build a complete Flask application with related database tables using the CRUD F25 starter template, AI assistance, and MySQL database integration with cascade operations and full deployment to production.
Demo Objectives
- Set up projects with CRUD F25 template implementing two related database tables
- Design and implement Authors and Books relationship with foreign key constraints
- Use Claude AI for schema deployment, blueprint creation, and cascade operation setup
- Build dropdown functionality for related table CRUD operations with modal interfaces
- Deploy and test complete related table applications in production with proper testing
Step-by-Step Demonstration
Step 1: Objective
Create a Flask application with related database tables using the CRUD F25 starter template and Claude AI assistance. Build an Authors and Books relationship with foreign key constraints, implement cascade operations, create dropdown functionality for CRUD operations, and deploy to production with comprehensive testing.
Step 2: 1. Project Setup with CRUD F25 Template
- Create new repository from CRUD F25 template:
https://github.com/bamarshall06/starter-template-crud-f25 - Create matching Heroku app and connect to GitHub for auto-deployment
- Add JawsDB MySQL add-on to Heroku app
- Install and configure MySQL Workbench connection for related table verification
Step 3: 2. Local Development Environment Setup
- Clone repository locally and open in Cursor IDE
- Create and activate virtual environment:
python -m venv venv - Install dependencies:
pip install -r requirements.txt - Use Claude AI to create .env file from template with JawsDB credentials
- Configure Heroku config variables to match .env file
Step 4: 3. Related Database Schema Design and Deployment
- Use Claude AI to design Authors and Books two-table schema with foreign key relationship
- Configure CASCADE DELETE and UPDATE operations for data integrity
- Deploy schema and seed data using Claude AI automation
- Verify relationship setup in MySQL Workbench
- Test cascade operations manually in MySQL Workbench
Step 5: 4. Flask Blueprints and Template Creation for Related Tables
- Use Claude AI to create Authors blueprint with standard CRUD operations
- Use Claude AI to create Books blueprint with dropdown relationship functionality
- Generate HTML templates with dropdown selection for author relationships
- Update navigation system and register both blueprints
- Remove example files and clean up codebase
Step 6: 5. Testing Related Table Functionality
- Test Authors CRUD operations: create, edit, delete with modal interfaces
- Test Books CRUD operations with author dropdown selection functionality
- Verify cascade delete: deleting author removes all their books
- Verify cascade update: updating author name reflects in related books
- Test dropdown functionality ensures referential integrity
Step 7: 6. Production Deployment and Verification
- Use Claude AI to commit and push all changes to GitHub
- Monitor Heroku auto-deployment and build process
- Configure Heroku environment variables for database connectivity
- Test production application with all related table functionality
- Add bamarshall06 as collaborator on GitHub and Heroku
Step 8: Demo Completion Checklist
Before submitting, ensure your application meets all requirements:
🚀 Project Setup
- Repository created from CRUD F25 template
- Heroku app created and connected to GitHub with auto-deploy
- JawsDB MySQL add-on provisioned on Heroku
- MySQL Workbench connected to verify relationships
- Local development environment set up with virtual environment
🗄️ Related Database Schema
- Authors table created with primary key
- Books table created with foreign key to Authors
- CASCADE DELETE configured (deleting author removes books)
- CASCADE UPDATE configured (updating author updates books)
- Realistic seed data populated for both tables
⚙️ Flask Application Architecture
- Authors blueprint created with full CRUD operations
- Books blueprint created with dropdown relationship functionality
- HTML templates include dropdown selection for author relationships
- Navigation updated to include both Authors and Books
- Example files removed and codebase cleaned
🔗 Related Table Functionality
- Authors CRUD: Create, Read, Update, Delete with modals
- Books CRUD: Create, Read, Update, Delete with author dropdowns
- Dropdown shows all available authors when adding/editing books
- Cascade delete tested: removing author deletes their books
- Cascade update tested: updating author reflects in related books
🚀 Production Deployment
- Environment variables configured in Heroku
- Application deployed successfully to Heroku
- All related table functionality works in production
- Cascade operations verified in live environment
- No errors or broken features in production
📤 Collaboration & Sharing
- GitHub repository includes all related table code
- bamarshall06 added as collaborator on GitHub
- bamarshall06 added as collaborator on Heroku project
- Repository includes README with related table setup instructions
Step 9: 📋 Submission Instructions
Submit the following in GeorgiaView:
Required Submission Items:
- Heroku Project Name - Submit ONLY the project name (e.g., "my-demo4-app"), not the full URL
- PDF Reflection - Write a short reflection (1-2 paragraphs) covering:
- Your experience implementing related database tables with foreign key relationships
- How Claude AI helped with schema design, blueprint creation, and cascade operation setup
- Challenges you encountered with dropdown functionality and relationship management
- Key insights about cascade operations and data integrity in related tables
- What you learned about Flask blueprint architecture for complex database relationships
⚠️ Important Notes:
- Do NOT submit URLs - only the Heroku project name
- Ensure collaborator access is granted before submission
- Test cascade operations thoroughly in production
- Verify dropdown functionality maintains referential integrity
- Double-check that your PDF reflection addresses all required points