Demo 1: AI-Assisted CRUD Application Build
Build a complete data-driven Flask application using the CRUD F25 starter template, AI assistance, and MySQL database integration with full deployment to production.
Demo Objectives
- Set up new projects using the CRUD F25 starter template with GitHub and Heroku integration
- Create local development environment with virtual environments and database connections
- Use Claude AI for environment setup, database schema deployment, and blueprint creation
- Build custom database schemas and Flask blueprints with full CRUD functionality
- Deploy and test complete applications in production with proper collaboration setup
Step-by-Step Demonstration
Step 1: Objective
Create a Flask application using the CRUD F25 starter template with Claude AI assistance for rapid development. Build a custom database schema, implement full CRUD operations using pre-built modals and templates, and deploy to production with proper environment configuration.
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
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. Database Schema Setup and Testing
- Run Flask application locally:
python app.py - Use Claude AI to deploy database schema and seed data automatically
- Verify database setup in MySQL Workbench
- Test starter template CRUD operations (add, edit, delete modals)
- Troubleshoot any phantom processes if needed using Claude assistance
Step 5: 4. Custom Schema and Blueprint Creation
- Design a custom database schema for your chosen topic (sports team, inventory, etc.)
- Use Claude AI to replace schema.sql and seed_data.sql with your custom design
- Have Claude create new blueprint and template based on the examples files
- Update navigation, register blueprints, and remove old example files
- Debug any errors by providing error messages to Claude
Step 6: 5. Production Deployment and Testing
- Test all CRUD operations locally (create, read, update, delete)
- Use Claude AI to commit and push all changes to GitHub
- Monitor Heroku auto-deployment and build process
- Test production application thoroughly
- Add bamarshall06 as collaborator on GitHub and Heroku
Step 7: 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 installed and connected to cloud database
- Local development environment set up with virtual environment
🗄️ Database and Environment Configuration
- .env file created using Claude AI with correct JawsDB credentials
- Heroku config variables configured to match .env file
- Custom database schema designed and deployed using Claude
- Seed data generated and populated using AI web research
- Database changes verified in MySQL Workbench
⚙️ Application Development and Testing
- Flask application runs without errors locally
- Custom blueprint created using Claude AI from examples template
- Navigation updated and old example files removed
- All CRUD operations work: Create (add modal), Read (data display), Update (edit modal), Delete (delete modal)
- Error debugging completed using Claude assistance
- Professional starter template styling maintained
🚀 Production Deployment
- Changes committed and pushed to GitHub using Claude AI
- Heroku auto-deployment completed successfully
- Production application tested thoroughly
- All CRUD operations work on live site
- Database operations persist correctly in production
📤 Collaboration & Sharing
- GitHub repository created and code pushed
- bamarshall06 added as collaborator on GitHub
- bamarshall06 added as collaborator on Heroku project
- Repository includes README with setup instructions
Step 8: 📋 Submission Instructions
Submit the following in GeorgiaView:
Required Submission Items:
- Heroku Project Name - Submit ONLY the project name (e.g., "my-demo3-app"), not the full URL
- PDF Reflection - Write a short reflection (1-2 paragraphs) covering:
- Your experience using the CRUD F25 template and AI-assisted development
- How Claude AI accelerated your development process (environment setup, schema creation, blueprints, deployment)
- Challenges you encountered and how Claude helped solve them
- Key takeaways about modern development workflows with AI assistance
- What you learned about database integration and production deployment
⚠️ Important Notes:
- Do NOT submit URLs - only the Heroku project name
- Ensure collaborator access is granted before submission
- Test your deployed application thoroughly
- Double-check that your PDF reflection addresses all required points