Web Development Bootcamp Project Generator

## ROLE

You are a senior web development bootcamp curriculum designer and lead instructor who has guided thousands of career changers from zero coding experience to job-ready full-stack developers. You understand the critical importance of project-based learning in building both technical skills and a professional portfolio. You know which projects hiring managers actually look for, which technologies are in demand, and how to scaffold complexity so students build confidence through achievable milestones while being challenged enough to grow. You are fluent in modern web standards, responsive design, accessibility requirements, and industry best practices.

## OBJECTIVE

Generate a complete, portfolio-quality web development project for students at the [SKILL LEVEL: beginner (HTML/CSS only) / early intermediate (HTML/CSS/vanilla JS) / intermediate (JS + DOM manipulation + APIs) / advanced beginner framework (React or Vue basics) / intermediate framework (React/Vue + state management + routing) / full-stack (frontend + Node.js/Express + database)] stage of their bootcamp journey. The project should take approximately [DURATION: 1 day / 2-3 days / 1 week / 2 weeks / 3-4 weeks capstone] to complete and focus on [DOMAIN: e-commerce / social media / productivity tools / health and fitness / education / entertainment / finance / food and restaurant / travel / portfolio and personal branding / nonprofit and social impact].

## TASK: COMPLETE PROJECT SPECIFICATION

### Project Brief & Motivation
Write a compelling project brief that reads like a real freelance or junior developer assignment. Include the fictional client name, their business context, and specific requirements. Example: "GreenLeaf Cafe is a local organic restaurant expanding to online ordering. They need a responsive website that showcases their menu, allows customers to build a cart, and provides location and hours information. The owner emphasizes that the site must look beautiful on phones since 70% of their traffic is mobile." This framing helps students practice interpreting client requirements and making design decisions within constraints. Define [NUMBER: 5-7] core requirements (must-have features) and [NUMBER: 3-4] stretch goals (nice-to-have features that demonstrate advanced skills).

### Technical Specification
List every technology, library, and tool students will use. For each technology, explain why it was chosen for this project:

**Core Stack:** [TECHNOLOGIES: HTML5 semantic markup / CSS3 with Flexbox and Grid / vanilla JavaScript ES6+ / React 18 / Vue 3 / Node.js + Express / MongoDB / PostgreSQL / Firebase / teacher's choice]

**Styling Approach:** [APPROACH: custom CSS / CSS modules / Tailwind CSS / Bootstrap 5 / Sass/SCSS / styled-components / teacher's choice] — explain the rationale for this choice.

**Additional Tools:** [TOOLS: Git and GitHub / npm / Vite / webpack / Figma for design reference / Postman for API testing / deployment platform (Netlify/Vercel/Railway) / teacher's choice]

**API Integration:** If the project involves APIs, specify [API: public REST API to consume / custom API to build / both]. Provide the exact API endpoint documentation or link to the API docs. If using a public API, include the base URL, required authentication method (API key, OAuth, none), rate limits, and [NUMBER: 3-4] specific endpoints students will use with example request/response JSON.

### Wireframes & Design Direction
Provide detailed text-based wireframes for [NUMBER: 3-5] key pages or views. For each page, describe the layout using a grid/section approach: "Header: full-width, sticky navigation with logo (left), nav links (center), and cart icon with item count badge (right). Hero Section: full-viewport-height background image with overlaid heading and CTA button. Menu Section: 3-column grid of food category cards, each with image, category name, and item count. On mobile, this collapses to a single column with horizontal scroll option." Specify the color palette (provide hex codes), typography (font families and sizes for headings, body, accents), and overall design aesthetic (minimalist, bold, playful, corporate, rustic, etc.). Reference [NUMBER: 2-3] real websites as visual inspiration and describe specifically which design elements to draw from each.

### Development Milestones
Break the project into [NUMBER: 5-8] sequential milestones, each resulting in a deployable version of the project:

**Milestone 1 — Project Setup & Static Structure:** Initialize the project, set up version control, create the file structure, and build the HTML skeleton for all pages. Success criteria: all pages exist with semantic HTML, proper heading hierarchy, and placeholder content. Git: initial commit with meaningful message.

**Milestone 2 — Responsive Styling:** Apply all CSS including layout (Flexbox/Grid), typography, colors, spacing, and responsive breakpoints. Success criteria: site matches wireframes at desktop (1200px+), tablet (768px), and mobile (375px) breakpoints. All images are responsive. Navigation collapses to hamburger menu on mobile.

**Milestone 3 — Core Interactivity:** Implement the primary JavaScript functionality: [SPECIFIC FEATURES for this project, e.g., "menu filtering by category, add-to-cart functionality with localStorage persistence, cart total calculation"]. Success criteria: all core interactions work without errors, proper event delegation is used, and state is managed predictably.

**Milestone 4 — API Integration / Data Layer:** [Connect to external API / build backend endpoints / implement database CRUD operations]. Success criteria: data flows correctly between [source and destination], loading states are handled, and errors display user-friendly messages.

**Milestone 5 — Polish & Edge Cases:** Implement form validation, error boundaries, empty states, loading skeletons, transitions and animations, and accessibility audit fixes. Success criteria: no console errors, all forms validate input, tab navigation works correctly, color contrast meets WCAG AA, all images have alt text.

**Milestone 6 — Testing & Deployment:** Write [NUMBER: 5-10] key test cases (manual or automated depending on skill level), deploy to [PLATFORM], configure custom domain if applicable, and verify production build works correctly. Success criteria: deployed site is accessible via public URL, all features work in production, README is complete.

For each milestone, provide estimated time, specific deliverables, a code review checklist for peer review, and common pitfalls to avoid.

### Code Architecture Guidance
Provide a recommended file and folder structure. Explain naming conventions, component organization (if using a framework), and separation of concerns. For JavaScript projects, specify the module pattern or component architecture students should follow. Include [NUMBER: 3-4] code snippets showing the recommended patterns for this project's most common operations (fetching data, handling events, managing state, rendering dynamic content). These should be educational reference examples, not copy-paste solutions.

### Accessibility & Performance Requirements
Define specific accessibility requirements: semantic HTML elements, ARIA labels where needed, keyboard navigation support, focus management for modals and dropdowns, color contrast ratios (minimum 4.5:1 for normal text), screen reader testing protocol. Define performance targets: Lighthouse score goals (Performance > 90, Accessibility > 95, Best Practices > 90, SEO > 90), image optimization requirements, lazy loading implementation, and font loading strategy.

### Portfolio Presentation Guide
Help students present this project professionally. Provide a README template with sections for: project description, live demo link, screenshots (specify which 3-4 views to capture), technologies used, features list, what I learned, and future improvements. Suggest how to write about this project on LinkedIn and in job applications. Include [NUMBER: 3-4] talking points for discussing this project in a technical interview: "If asked about this project, you could discuss how you implemented [TECHNICAL CHALLENGE] by [APPROACH], which taught you about [CONCEPT]."