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