Urban Drive Sim: Building a Browser-Based 3D Driving Simulator with AI
Students will learn how to use AI and modern development tools to help design and build a working browser-based application. Using the Urban Drive Sim…
Students will learn how to use AI and modern development tools to help design and build a working browser-based application. Using the Urban Drive Sim concept, they will explore how real ideas become real products by combining planning, interface design, 3D environments, physics concepts, AI-assisted coding, and testing.
GOAL: To produce a browser-based 3D driving simulator where players select real cars, customize every mechanical component — engine, transmission, suspension, brakes, tires, exhaust — and immediately feel those upgrades on real city streets rendered from live map data. No install required. Fully web-native.
8-Week Curriculum ──────────────────────────────────────── Week 1 — Introduction to the Project Topic: What are we building? Students learn the Urban Drive Sim concept, what makes it unique, and how AI can support the app-building process. Learning Outcomes: • Understand the simulator idea • Identify key app features • Learn the overall development roadmap ──────────────────────────────────────── Week 2 — Breaking Down an App Idea into Features Topic: From concept to components Students break the simulator into pieces such as garage, car selection, upgrades, city map, physics, and AI coach. Learning Outcomes: • Learn feature planning • Understand how large apps are organized • Create a simple feature map ──────────────────────────────────────── Week 3 — Designing the User Experience Topic: What the user sees and does Students sketch or mock up major screens such as the home screen, garage, car selector, and driving HUD. Learning Outcomes: • Understand UI/UX basics • Build simple wireframes • Learn how design guides development ──────────────────────────────────────── Week 4 — AI-Assisted Development Workflow Topic: Using AI to plan and build Students see how AI tools can help generate ideas, refine features, explain code, and accelerate development. Learning Outcomes: • Learn practical AI use cases in development • Practice prompting AI for technical help • Understand the limits of AI and the need for human review ──────────────────────────────────────── Week 5 — Building the Web App Foundation Topic: Browser-based apps and core tools Students are introduced to the core technologies behind the simulator such as React/Vite, Three.js, Mapbox, physics tools, and browser workflows. Learning Outcomes: • Understand the major technologies used • Learn what each tool does • Set up the basic project environment ──────────────────────────────────────── Week 6 — Cars, Customization, and Game Logic Topic: How upgrades affect behavior Students explore how engine, brakes, tires, suspension, and transmission upgrades change the driving experience. Learning Outcomes: • Understand simple game logic • Connect upgrades to outcomes • Think about how systems interact ──────────────────────────────────────── Week 7 — Testing, Feedback, and Improvement Topic: Making the application better Students learn how to test features, identify bugs, and use feedback to improve the application. Learning Outcomes: • Learn testing basics • Identify usability issues • Use AI to troubleshoot and refine ──────────────────────────────────────── Week 8 — Presentation and Demo Day Topic: Show what we built and learned Students present their ideas, mockups, workflows, or prototype elements and explain how AI supported the project. Learning Outcomes: • Strengthen presentation skills • Demonstrate understanding of the build process • Reflect on what was learned
Who it is for: <p>Middle school students</p> Learning outcomes: <p>Understand the workflow for turning a game idea into a browser-based application. Use AI responsibly to brainstorm, explain, debug and refine work. Build confidence with design, feature planning, testing and simple game logic. Communicate ideas through sketches, diagrams, demos and presentations.</p>