Tutorial
AI
Web Dev
Build Your First Website with AI: A Beginner's Guide
Welcome to IShowYou. Today, I will show you that you don't need to be a coding wizard to build a stunning website. You just need the right guide—and a little help from Artificial Intelligence.
In this tutorial, we will build a simple yet powerful web application together. We'll use React for the visuals, FastAPI for the logic, and deploy it all on Digital Ocean. And the best part? We will use an AI chatbot (like ChatGPT, DeepSeek, or Claude) to write most of the code for us.
New to coding tools? If you're feeling a bit lost with VS Code or the Terminal, check out our companion guide: Navigating Your First AI Project.
What You'll Need
- An account with an AI Chatbot (ChatGPT Plus recommended, or DeepSeek).
- A code editor (VS Code is perfect).
- Node.js and Python installed on your computer.
- A Digital Ocean account (for deployment).
- A cup of coffee (optional, but recommended).
Wait, do I always need a Backend?
Great question! The answer is no.
Think of a Static Website like a Flyer on a Bulletin Board. It looks the same to everyone who walks by. It's perfect for portfolios, blogs (like this one!), or landing pages. You don't need a backend (FastAPI) for this; you just need HTML/CSS/JS, and you can host it for free on GitHub Pages.
A Dynamic Web App (what we are building today) is like a Conversation. It changes based on who you are and what you say. If you want to save user data, process payments, or generate new content (like our random quotes), you need a backend to handle that logic.
1The Concept & Organization
Before we write a single line of code, we need a plan. We are going to build a "Quote of the Day" app. It's simple: the frontend asks the backend for a quote, and the backend delivers it.
Organization is key. Create a folder named my-first-ai-app. Inside, create two subfolders: frontend and backend.
I want to build a simple web app with a React frontend and a FastAPI backend. Please explain how I should structure my folders and files for this project. I am a beginner, so please be very clear.
2The Backend (FastAPI)
The backend is the brain of your application. We'll use FastAPI, a modern, fast (high-performance), web framework for building APIs with Python.
Setup Checklist
- Create a virtual environment:python -m venv venv
- Activate it:source venv/bin/activate # Mac/Linux
.\venv\Scripts\activate # Windows - Install FastAPI:pip install fastapi uvicorn
Act as a senior Python developer. Create a simple FastAPI application for me. \n\nRequirements:\n1. It should have a single endpoint '/quote' that returns a random inspirational quote (JSON format).\n2. Include CORS middleware to allow requests from localhost:5173 (Vite default).\n3. Provide the code for 'main.py'.\n4. Explain how to run the server locally using uvicorn.
Copy the code the AI gives you into backend/main.py. Then run the server with:
Open http://localhost:8000/quote in your browser. If you see a JSON quote, you're golden!
3The Frontend (React + MUI)
Now for the face of your application. We'll use React (via Vite) for the structure and Material UI (MUI) for beautiful, pre-made components.
Setup Checklist
- Create the React app:npm create vite@latest frontend -- --template react
- Go into the folder:cd frontend
- Install dependencies:npm install
- Install Material UI:npm install @mui/material @emotion/react @emotion/styled @mui/icons-material
Act as a senior Frontend developer. I have a React application created with Vite. \n\nI want to create a beautiful 'Quote of the Day' component using Material UI (MUI) in 'src/App.jsx'.\n\nRequirements:\n1. A centered card with a 'Get New Quote' button.\n2. Display the quote text elegantly.\n3. When the button is clicked, fetch a new quote from 'http://localhost:8000/quote'.\n4. Handle loading states and errors gracefully.\n5. Use a modern, clean design with a gradient background.
Running the Full App
To see your app in action, you need to run both the backend and the frontend at the same time.
source venv/bin/activate
uvicorn main:app --reload
npm run dev
Now open the "Local" URL shown in Terminal 2 (usually http://localhost:5173) and click the button. You should see a quote fetched from your Python backend!
4Deployment on Digital Ocean
It works on your machine, now let's share it with the world. We will use Digital Ocean App Platform because it's incredibly simple for beginners.
I have a project with a 'backend' folder (FastAPI) and a 'frontend' folder (React/Vite). I want to deploy this to Digital Ocean App Platform.\n\nPlease provide a step-by-step guide on how to configure the App Platform to host both services. Explain how to set the environment variables so the frontend can talk to the backend.
Pro Tip: Always make sure your environment variables (like API URLs) are correctly set in the production environment!
Want the Full Code?
I've prepared the complete, fully commented source code for this project. You can download it, explore it, and use it as a foundation for your own ideas.
Bonus Level: The Time Machine (Git)
Imagine if you could save your game at any point and go back if you made a mistake. That's exactly what Git does for your code. And GitHub? That's like the cloud save where you can share your progress with the world.
Why use it?
- Backup: Never lose your code.
- History: Undo mistakes easily.
- Showcase: Show off your work to future employers.
How to start?
You don't need to be an expert. Just 3 commands can save your day:
git init # Start tracking
git add . # Stage changes
git commit -m "My first app" # Save!
Pro Tip: You can deploy your static site (frontend only) to GitHub Pages for free directly from your repository! Ask your AI chatbot: "How do I deploy my React app to GitHub Pages?"
You Did It!
You've just built and deployed a full-stack web application using AI. This is just the beginning. The tools we used today—FastAPI, React, and AI—are powerful enough to build almost anything you can imagine.
"I show you the path, but you must walk it."
Happy coding, and see you in the next tutorial!