Scribd
Upload
92 views4 pages

Fullstack Ai Slides

This document is a presentation titled 'How to Build with Code/AI: A Beginner’s Guide to Full Stack Development' by Dungji Zacks, aimed at introducing full stack development concepts and tools. It covers the components of full stack development, the integration of AI, a sample app walkthrough, and a beginner learning roadmap. Additionally, it provides resources and final tips for aspiring developers.

Uploaded by

Usman Muhammad
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
92 views4 pages

Fullstack Ai Slides

This document is a presentation titled 'How to Build with Code/AI: A Beginner’s Guide to Full Stack Development' by Dungji Zacks, aimed at introducing full stack development concepts and tools. It covers the components of full stack development, the integration of AI, a sample app walkthrough, and a beginner learning roadmap. Additionally, it provides resources and final tips for aspiring developers.

Uploaded by

Usman Muhammad
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

How to Build with Code/AI:

A Beginner's Guide to Full Stack Development

Slide 1: Title Slide

• Title: How to Build with Code/AI


• Subtitle: A Beginner’s Guide to Full Stack Development
• Presenter: Dungji Zacks
• Date / Venue: July 15, 2025 — University of Abuja

Slide 2: Welcome & Introduction

• Purpose of the talk


• Who this talk is for
• What to expect in the next 60 minutes

Slide 3: What is Full Stack Development?

• Building both frontend and backend of an app


• Examples: Twitter, WhatsApp, ChatGPT apps

Slide 4: Full Stack Breakdown

• Frontend: UI (HTML, CSS, JS)


• Backend: Server, logic, APIs
• Database: Store data
• Architecture diagram

Slide 5: Meet the Stack

• Frontend Tools: HTML, CSS, JS, React, Tailwind


• Backend Tools: Node.js, Express.js
• Database: MongoDB, PostgreSQL

Slide 6: What is an API?

• Bridge between frontend and backend

1
• REST or GraphQL
• Example endpoint: /api/user

Slide 7: Adding AI to the Stack

• Why add AI?


• Use cases: Chatbot, summarizer, recommender
• Tools: OpenAI, Hugging Face, LangChain

Slide 8: AI Example (OpenAI API)

const response = await openai.chat.completions.create({


model: "gpt-4",
messages: [{ role: "user", content: "Summarize this..." }]
});

Slide 9: Sample App Walkthrough

• App Idea: AI Note Taker


• Stack: React + Node + MongoDB + OpenAI
• Features: Create notes, summarize with AI

Slide 10: Hosting & Deployment

• Frontend: Vercel, Netlify


• Backend: Render, Railway
• DB: MongoDB Atlas, Firebase

Slide 11: Beginner Learning Roadmap

1. Learn HTML, CSS, JS


2. Build mini projects
3. Learn Git/GitHub
4. Pick a frontend & backend framework
5. Learn database
6. Integrate APIs
7. Deploy

2
Slide 12: Recommended Tools

Purpose Tool

Code Editor VS Code

Versioning Git, GitHub

Frontend React, Tailwind

Backend Node.js, Express

Database MongoDB, PostgreSQL

AI API OpenAI, Hugging Face, LangChain

AI Coding Tools Cursor, GitHub Copilot

Documentation Tools Notion, Docusaurus, Docsify

File Upload Tools Cloudinary, Firebase Storage, Uploadcare

Slide 13: Resources

• freeCodeCamp.org
• TheOdinProject.com
• OpenAI API Docs
• MongoDB Atlas
• Vercel.com
• Cursor.so
• GitHub Copilot
• Uploadcare.com
• Docusaurus.io

Slide 14: Final Tips

• Start small
• Build every day
• Learn in public
• Don’t be afraid to fail

Slide 15: Q&A + Thank You

• Ask your questions!


• Connect with me:
• 📧 Email: [email protected]
• 🔗 LinkedIn: linkedin.com/in/dungji-gotau-69a24311b

3
• 📸 Instagram: @zacksdungji
• Let’s build the future!

You might also like