codex-lv2-may-2025

🎯 Week 8: Capstone Project - OUTLINE

✅ Project Checklist

Core Functionality

API Integration: Successfully connects to external API and displays data
AI Integration: Implements AI model calls with proper response handling
User Interface: Clean, responsive Bootstrap UI with proper styling
Input Validation: Professional error handling and user feedback
Error Handling: Graceful handling of API failures and network issues

Technical Implementation

Code Organization: Clean, well-structured JavaScript with meaningful functions
Version Control: Regular commits with descriptive messages
Testing: Thoroughly tested across different scenarios and edge cases
Documentation: Complete README with setup instructions and feature descriptions
Polish: Professional presentation with attention to user experience

📋 Project Overview

Your capstone project is the culmination of everything you’ve learned in weeks 4-7. You’ll build a complete, professional web application that demonstrates mastery of modern web development skills including CSS frameworks, event-driven programming, API integration, and AI model integration.

🎯 Project Requirements

1. Bootstrap Framework Integration

Use Bootstrap CSS framework for responsive design
Use Bootstrap CSS for layout with row/cols
Implement Bootstrap components (cards, buttons, forms, navigation)
Apply Bootstrap utility classes for spacing, colors, and layout

2. Event-Driven User Interface

Create interactive elements that respond to user events (clicks, form submissions, input changes)
Implement proper event handling using JavaScript event listeners
Build dynamic user interfaces that update based on user interactions
Include form validation and user feedback systems
- For example: use an if statement to check if the user has input data before processing (e.g., if (userInput === "") { showError("Please enter a message"); })
Reference: Event-Driven Apps Guide

3. API Integration

Connect to at least one external API (weather, news, data, etc.)
Handle API responses
Challenge: Implement loading states and error handling for API calls in the callback to catch or by checking for response.ok is true in the callback for then.
Reference: Public APIs Collection

4. AI Model Integration

Integrate with an AI service (Hugging Face, OpenAI, or similar)
Create meaningful interactions with AI models
Handle AI responses and display them appropriately
Reference: Hugging Face Models

5. Professional Code Organization

Use proper file structure and name directories and files in a meaningful way
Have a README derived from the example README from Week 7.
All files should be indented properly. Remember the hotkey for formatting is ALT-SHIFT-F in Windows. See the official VSCode hotkey reference
Include comprehensive comments
- leave comments in your JS code with //
- leave comments in your HTML with <!– –>

6. Git Version Control

Maintain your Git history with frequent commits.
Always use a meaningful commit message when you commit.
- GOOD: git commit -m “added bootstrap classes to my buttons”
- BAD: git commit -m “updates”
Implement proper .gitignore to protect sensitive information
- your .gitignore should in include the line secret-variables.js

7. Input Validation & Error Handling

Validate user inputs before processing
Provide clear error messages and user feedback

8. Responsive Design & User Experience

Ensure your application works on desktop, tablet, and mobile devices
Create intuitive navigation and user flows
Implement proper loading states and visual feedback
- You may have a “Loading…” string after clicking the button, but before the data returns from the API.
Design with accessibility in mind
- use alt attributes in all images
- prefer semantic HTML like h1, article or section over div

9. Data Management & State

Properly manage application state and data flow
Handle asynchronous operations (API calls, AI responses)
Challenge: Implement proper data persistence with localStorage

10. Security & Best Practices

Protect API keys and sensitive information using secret-variables.js
Use a .gitignore file
Do not check your secrets into git.

11. Testing & Debugging

Use browser DevTools effectively for debugging
Test your application across different browsers and devices
Implement proper error logging and monitoring with console.log()
- For example in an event listener for a button: console.log("button clicked")
Test at every step. Do not write more than a few lines of code before reviewing the result in the browser.

12. Documentation & Presentation

Create and maintain a comprehensive project README
Document your API integrations and external dependencies
Include screenshots or demos of your application in the README
Challenge: Prepare a presentation demonstrating your project’s features

🚀 Project Ideas & Inspiration

AI-Powered Applications

Smart Recipe Generator - Input ingredients, get AI-generated recipes with nutritional info
Personal Study Assistant - AI tutor that helps with homework and explanations
Creative Writing Helper - AI-powered story generator with user input and editing
Language Learning Companion - AI conversation partner with progress tracking

Data-Driven Applications

Personal Finance Tracker - Budget management with spending analysis and AI insights
Local Event Finder - Discover events in your area with weather integration
Health & Fitness Dashboard - Track workouts with AI-powered recommendations
News Aggregator - Curated news feed with AI summarization

Interactive Tools

Code Snippet Manager - Organize and share code with AI-powered explanations
Project Management Tool - Task tracking with AI productivity insights
Social Media Dashboard - Manage multiple accounts with AI content suggestions
Learning Progress Tracker - Track educational goals with AI study recommendations

📅 Timeline & Milestones

Week 8 Schedule

Monday-Tuesday: Project planning, setup, and basic structure
Wednesday-Thursday: Core functionality and API integrations
Friday: Polish, testing, and presentation preparation

Key Milestones

Project Setup - Repository, planning document, basic structure
Core Features - Main functionality working with APIs
AI Integration - AI features implemented and tested
Polish & Testing - Error handling, responsive design, documentation
Presentation - Demo and code walkthrough

🎯 Success Criteria

Your capstone project will be evaluated on:

Technical Implementation (40%) - Code quality, API integration, functionality
User Experience (25%) - Design, responsiveness, usability
Innovation & Creativity (20%) - Unique features, creative problem-solving
Documentation & Presentation (15%) - README, code comments, demo quality

🛠️ Resources & Support

Technical Resources

Previous Week Materials

Week 4: CSS Frameworks & Bootstrap
Week 5: Event-Driven Apps
Week 6: APIs and Postman
Week 7: AI Models and APIs

🎉 Ready to Begin?

Choose your project idea from the suggestions above or propose your own
Create your project repository with proper structure
Plan your features using the requirements checklist
Start building and remember to commit regularly!

Remember: This is your chance to showcase everything you’ve learned. Be creative, be thorough, and most importantly, have fun building something amazing!

Good luck with your capstone project! 🚀