Build Your First Full-Stack App: Digital Message Wall¶

What You'll Learn¶

By building this simple app, you'll understand the complete software engineering landscape illustrated in the engineering architecture diagram. You'll see firsthand how:

Frontend and Backend work together as separate but connected systems
HTTP Requests and Responses enable communication between client and server
Databases persist data beyond a single session
Modern development tools (Git, AI assistants) accelerate the building process

Time Required: 1-2 hours Difficulty: Beginner-friendly Tools: AI coding assistant (Claude Code, Cursor, or GitHub Copilot recommended)

What You're Building¶

A Digital Message Wall - a simple web application where users can: 1. Post short messages (like digital sticky notes) 2. View all messages posted by everyone 3. See messages persist even after refreshing the page

Why This App? It's the simplest possible example that demonstrates the full architecture: - Frontend: What users see and interact with (the browser window) - Backend: The server that processes requests and manages data - Database: Where messages are permanently stored

Architecture Overview¶

Before you start building, let's map what you're creating to the engineering landscape diagram:

Your App's Architecture¶

┌─────────────────────────────────────────────────────────────┐
│                         FRONTEND                             │
│  ┌──────────────────────────────────────────────────────┐  │
│  │  Browser Window (Vercel/Local Server)                │  │
│  │  - Input box for new messages                        │  │
│  │  - Submit button                                     │  │
│  │  - Display area showing all messages                 │  │
│  └──────────────────────────────────────────────────────┘  │
│                            │                                 │
│                    HTTP REQUEST (POST/GET)                  │
│                            │                                 │
└────────────────────────────┼─────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────┐
│                         BACKEND                              │
│  ┌──────────────────────────────────────────────────────┐  │
│  │  Server (Express.js/Flask/FastAPI)                   │  │
│  │  - Route: POST /messages (save new message)          │  │
│  │  - Route: GET /messages (retrieve all messages)      │  │
│  └──────────────────────────────────────────────────────┘  │
│                            │                                 │
│                    SQL DATABASE                             │
│  ┌──────────────────────────────────────────────────────┐  │
│  │  Table: messages                                      │  │
│  │  - id (auto-increment)                               │  │
│  │  - content (text of the message)                     │  │
│  │  - created_at (timestamp)                            │  │
│  └──────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────┘

Key Concept: Notice how this matches the diagram's Frontend ↔ Backend ↔ Database flow!

Requirements¶

Minimum Viable Product (MVP)¶

Your app must demonstrate these core concepts:

1. Frontend (Client-Side)¶

HTML page with a form containing:
Text input field for message content
Submit button
Display area that shows all messages
JavaScript to:
Send POST request when form is submitted
Send GET request to load existing messages
Update the display without page reload (optional: can reload page)

2. Backend (Server-Side)¶

Web server (choose one: Node.js/Express, Python/Flask, or Python/FastAPI)
Two API endpoints:
POST /messages - accepts new message and saves to database
GET /messages - returns all messages from database
Proper request/response handling with appropriate HTTP status codes

3. Database¶

SQL database (SQLite is perfect for this - it's simple and requires no setup)
Single table: messages
id: Primary key (auto-increment)
content: Text field (VARCHAR or TEXT)
created_at: Timestamp (defaults to current time)

4. Version Control¶

Initialize Git repository
Make at least 3 commits showing progression:
Initial setup
Frontend implementation
Backend and database integration

Building with AI Assistance¶

You'll use an AI coding assistant to build this app. The key is asking the right questions in the right order. Here's your step-by-step guide:

Step 1: Project Setup (10 minutes)¶

Prompt your AI assistant:

I want to build a simple message wall web app to learn about frontend/backend architecture.

Requirements:
- Frontend: HTML page with form to submit messages and display all messages
- Backend: Simple API server with two endpoints (POST and GET messages)
- Database: SQLite database with one table for messages
- Language: [Choose: JavaScript/Node.js OR Python]

Please set up the initial project structure with all necessary files and dependencies.

What to verify: - [ ] Project folder created with organized structure - [ ] Package manager files (package.json or requirements.txt) - [ ] Basic file structure (separate frontend/backend folders or files)

Step 2: Build the Database Layer (15 minutes)¶

Prompt your AI assistant:

Create the SQLite database setup:
1. Design a messages table with columns: id (primary key), content (text), created_at (timestamp)
2. Write a function to initialize the database and create the table if it doesn't exist
3. Write two functions: one to save a new message, one to retrieve all messages
4. Include basic error handling

Please explain what each part does so I can understand the database interaction.

What to verify: - [ ] Database file is created (usually messages.db or similar) - [ ] You can see the table creation SQL - [ ] Functions for database operations are clear and commented

Learning Checkpoint: - Where is your data actually being stored? (Answer: In the .db file on your hard drive) - What happens if you delete the database file? (Answer: All messages are lost - this is persistence!)

Step 3: Build the Backend API (20 minutes)¶

Prompt your AI assistant:

Create the backend server with these requirements:
1. Set up a basic web server (Express if Node.js, Flask/FastAPI if Python)
2. Create POST /messages endpoint that:
   - Accepts JSON with a "content" field
   - Saves the message to the database
   - Returns success/failure response
3. Create GET /messages endpoint that:
   - Retrieves all messages from database
   - Returns them as JSON array
4. Enable CORS so frontend can communicate with backend
5. Add console logging so I can see when requests come in

Please include comments explaining the request/response flow.

What to verify: - [ ] Server can start without errors - [ ] Console shows server running on specific port (e.g., "Server running on port 3000") - [ ] Code includes comments explaining requests and responses

Learning Checkpoint: - Test your API using the browser or a tool: - Visit http://localhost:3000/messages - what do you see? - This is a GET request! The backend sent a response. - Where does the "request" come from? (Answer: Your browser/client) - Where does the "response" come from? (Answer: Your server/backend)

Step 4: Build the Frontend (25 minutes)¶

Prompt your AI assistant:

Create a simple HTML frontend:
1. HTML file with:
   - Title: "Digital Message Wall"
   - Form with text input (id="messageInput") and submit button
   - Div to display messages (id="messageList")
2. JavaScript that:
   - Listens for form submission
   - Sends POST request to http://localhost:3000/messages with the message content
   - Fetches and displays all messages when page loads
   - Fetches and displays messages after submitting (to show the new message)
3. Basic CSS to make it readable (simple styling, nothing fancy)

Add comments explaining what each JavaScript function does.

What to verify: - [ ] HTML file opens in browser - [ ] Form is visible and functional - [ ] Console shows no errors (open browser DevTools)

Learning Checkpoint: - Open your browser's Developer Tools (F12) → Network tab - Submit a message and watch the network activity - You'll see the POST request going out and the response coming back! - This is the frontend ↔ backend communication in action

Step 5: Connect Everything & Test (15 minutes)¶

Prompt your AI assistant:

Help me test the complete application:
1. Provide step-by-step instructions to run both frontend and backend
2. Create a simple test checklist to verify everything works
3. If there are any CORS or connection issues, help me debug them

Your Testing Checklist: - [ ] Backend server is running (check console) - [ ] Frontend page loads in browser - [ ] Can submit a new message - [ ] Message appears in the display area - [ ] Refresh the page - message is still there (persistence!) - [ ] Open in a different browser/incognito - message is still there (it's in the database!)

Step 6: Version Control (10 minutes)¶

Prompt your AI assistant:

Help me set up version control:
1. Initialize a Git repository
2. Create an appropriate .gitignore file (exclude node_modules, database file, etc.)
3. Guide me through making commits at these stages:
   - Initial project setup
   - Backend and database implementation
   - Frontend implementation
   - Final working version

Explain what each Git command does.

What to verify: - [ ] Git repository initialized (git status works) - [ ] Multiple commits showing progression - [ ] .gitignore prevents unwanted files from being tracked

Verification & Understanding¶

Once your app is working, demonstrate your understanding by answering these questions:

Architecture Questions¶

Frontend/Backend Separation
Can you identify which code runs in the browser vs. on the server?
What would happen if you turned off the backend server and tried to submit a message?
Request/Response Flow
Trace the journey of a message from when you click "Submit" to when it appears on screen
What HTTP method is used for submitting? For retrieving?
Database Persistence
Where exactly is your data stored?
What's the difference between data in memory (variables) vs. in a database?
The Landscape Diagram
Point to where your frontend lives in the diagram
Point to where your backend lives
Point to where your database lives
Can you identify the "Request/Response" arrows?

Extension Challenges¶

If you finish early or want to explore further:

Level 1: Enhanced Features¶

Add a username field so messages show who posted them
Add a delete button for each message
Show timestamps in a human-readable format
Add simple CSS styling (colors, fonts, layout)

Level 2: Architecture Exploration¶

Add a message character limit (implement on both frontend AND backend - why both?)
Add input validation (what happens if someone submits an empty message?)
Add error handling (what if the database connection fails?)

Level 3: Deployment¶

Deploy your frontend to Vercel (free tier)
Deploy your backend to a service like Render or Railway
Update your frontend to point to the deployed backend URL
Now your app is live on the internet!

Key Concepts Reinforced¶

By completing this project, you've learned:

Frontend/Backend Architecture - How client and server are separate systems that communicate HTTP Protocol - Requests (GET, POST) and Responses (status codes, JSON data) APIs - Your backend exposes endpoints that the frontend consumes Databases - Persistent storage that survives beyond program execution Full-Stack Development - You've touched every layer of the stack Modern Tooling - AI assistants, version control, local development

Reflection Questions¶

After completing the app, reflect on these questions (discuss with your team or write brief answers):

What surprised you most about how frontend and backend communicate?
Where did you get stuck? How did you overcome it?
If you were to add user authentication (login/logout), which parts would you need to modify?
How does this simple app relate to complex apps like Instagram or Twitter?
What role did the AI assistant play in your learning? Did it help or hinder your understanding?

Submission¶

Share the following:

Working Application - Demonstrate your app running locally
Code Repository - Link to Git repository or ZIP file with code
Architecture Diagram - Annotate the eng-landscape image with labels showing where each part of YOUR app fits
Brief Reflection - 3-5 sentences answering: "What did you learn about software architecture from building this app?"

Tips for Success¶

Start simple - Get the basic version working before adding features
Test frequently - Run your code after each small change
Use the AI wisely - Ask it to explain concepts you don't understand
Check the console - Browser DevTools and server console show helpful error messages
Don't just copy/paste - Read the AI's code and comments to understand what's happening

Getting Help¶

If you get stuck:

Check the console - Both browser DevTools (F12) and terminal show error messages
Ask your AI assistant - Paste the error message and ask for help debugging
Trace the flow - Use console.log() statements to see where data is going
Ask classmates - Collaboration is encouraged for debugging (not copying code)
Ask the instructor - Come with specific questions about what you've tried

Remember: The goal isn't just to get a working app - it's to understand HOW and WHY it works. Take time to read the code, experiment with changes, and connect what you're building to the concepts in the engineering landscape diagram.

Happy building!