Using AI in the Design to Full-Stack Development Life Cycle

1h 2mIntermediate2025-03-11

Authors

Dakota Fabro

Course details

Learn how to use AI tools throughout the full stack web development process while building a full stack web application in this course with instructor Dakota Fabro. Dakota shows you how to build a full stack ecommerce platform that leverages AI at every stage of development, from design to deployment and maintenance. This e-commerce platform—in the form of a pet adoption website—includes AI-generated pet care instructions based on pet breed, a content management system, a responsive user interface, and real-time analytics.

Learning objectives
Leverage AI to increase your efficiency and productivity as a developer.
Recognize the different methods of leveraging AI tools in each stage of the design to development process.
Build a pet adoption site using the AI tools leveraged throughout the dev process.

Skills covered

FirebaseWeb Development ToolsFull-Stack Web DevelopmentDatabase DevelopmentFront-End Web DevelopmentArtificial Intelligence FoundationsDatabase ManagementSoftware Development ToolsGoogleArtificial Intelligence (AI)Web DevelopmentSoftware DevelopmentOne-Off

Concepts

0. Introduction

01 - Leaning into AI - Reframing what we know and how we build
02 - AI - Common hesitations, curiosities, and unknowns
03 - What to expect
04 - Using the project files

1. Wireframing

05 - Leaning into AI - Introduction to AI in wireframing
06 - Exploring Figma AI tools
07 - Generate your wireframe
08 - AI as a partner - Refining the AI output wireframe
09 - Make it useful - Annotate your wireframe

2. Frontend Development

10 - Using AI to brainstorm your frontend approach
11 - Leveraging AI tools for frontend brainstorming
12 - Writing effective AI prompts for frontend development
13 - AI as a partner - Refining the AI output wireframe to code
14 - Make it real - First frontend iteration

3. Backend Development

15 - Coming up with your backend approach
16 - Analyzing benefits and tradeoffs
17 - AI as a partner - Refining the AI output backend brainstorm
18 - Make it real - Frontend meets the backend

4. Testing Your Full Stack Project

19 - Testing your code with AI
20 - Leveraging AI when writing tests
21 - Effective prompting for testing your project
22 - Troubleshooting with AI
23 - It's time to run it - Testing your tests

5. Deployment and Documentation

24 - Streamlining handoff and delivery
25 - AI-assisted delivery and handoff in the real world
26 - Generating useful documentation
27 - Documentation for devs
28 - Preparing your documentation for client delivery

Conclusion

29 - Overview of design to dev stages and AI
30 - How might you integrate AI into your personal workflow