• Learn web structure and semantics through human vs. AI-written examples.

• Build your first static website, then compare it with an AI-generated version and enhance it.

• Outcome: Understand proper markup structure and identify flaws in AI-generated code.

• Explore visual design principles, CSS selectors, and responsive layouts.

• Use GitHub Copilot to suggest CSS refactors, then analyze and critique its output.

• Design a personal portfolio page with a style sheet that improves upon AI-generated CSS.

• Outcome: Create maintainable, accessible designs that outperform AI defaults.

• Become proficient in core JavaScript, DOM manipulation, asynchronous patterns, and debugging techniques.

• Compare and benchmark GitHub Copilot’s code snippets against your own, identifying and fixing inefficiencies.

• Analyze an AI-written UI component and rewrite it for better clarity and performance.

• Outcome: Write robust, efficient JavaScript and critically evaluate AI-generated logic.

• Evaluate human vs. AI-generated interfaces for accessibility, usability, and overall flow.

• Outcome: Apply UX best practices to every AI-assisted build, creating user-friendly, intuitive experiences.

• Take part in a creative coding sprint using AI as your pair programmer.

• Outcome: Develop intuition, speed, and confidence when collaborating and co-coding with AI.

• Become proficient in the full React ecosystem: JSX, hooks, context, routing, forms, Material UI, and Firebase.

• Use continuous AI prompts for component generation, optimization, and debugging.

• Analyze a public AI-based add-on, review its React code, and enhance or correct it.

• Outcome: Architect production-grade SPAs while serving as the AI’s critical reviewer.

• Deep dive into ChatGPT, the OpenAI API, and GitHub Copilot configuration.

• Build effective prompt chains to debug and optimize real code.

• Outcome: Integrate AI responsibly and efficiently into your daily development workflow.

• Get hands-on with a practical ML overview and integrate a simple prediction model into a web application.

• Outcome: Understand how AI data pipelines connect with full-stack development.

• Learn Node.js, Express, MongoDB/Mongoose, and SQL fundamentals.

• Audit server code written by an LLM to assess security, performance, and efficiency.

• Enhance and document an open-source AI API server.

• Outcome: Deliver secure, optimized back-end services and validate AI-generated logic with confidence.

• Build a professional portfolio highlighting your AI-collaboration projects and hands-on work.

• Outcome: Showcase your skills and stand out as an AI Full-Stack Developer ready for real-world opportunities.

Students independently plan, design, and develop a complete web application that integrates an AI-based API or service (e.g., OpenAI, Hugging Face, or other automation APIs). The project emphasizes effective and responsible use of AI tools within a production-level software environment.

Project Phases

• Planning: Define the concept, target users, and select the AI API to integrate.

• Development: Build the client (React) and server (Node.js), implement API calls, manage data flow, and ensure secure configuration.

• Presentation: Demonstrate the final project, explain the AI integration, and showcase working functionality to peers and partners.

Core Deliverables

• Functional full-stack web application (React + Node.js).

• Real AI integration (e.g., text generation, image creation, or intelligent recommendations).

• Professional documentation, testing, and deployment.

• Organized GitHub repository with clear commits and README.

Outcome
A complete, production-ready web application demonstrating practical AI use and professional full-stack development skills.