Frontend and Backend: The Full Picture

Before You Study (5 mins)

Lesson focus: Every major app is split into two parts: The Face (Frontend) and the Brain (Backend). To build a leaderboard, we need a Brain.

What you should have ready:

• Your Snake Game (Frontend)
• A new folder for your Backend

Quick Concepts

Think About

Before studying, consider:

1. Why can't the Frontend save high scores? (Because if I delete the app, the score is gone! We need a central place.)
2. How do they talk? (Through the language we learned in Ep 8 & 9: JSON and APIs!)

By the End

After this lesson, you'll:

• ✅ Understand Full-Stack Architecture
• ✅ Set up a simple Backend server
• ✅ Connect your Frontend to your Backend

Let's build the brain! 🧠

What We Learned

• separation of Concerns: Keep the "Looks" separate from the "Logic."
• The Backend: A piece of code that runs 24/7, waiting for the Frontend to ask for something.
• Node.js: The tool that lets us write Backend code using JavaScript (the same language we use for Frontend!).
• Full-Stack: Being able to work on both sides.

Architecture Diagram

[User's Laptop (Frontend)]
       |
       |  (JSON Request)
       v
[Cloud Server (Backend)]

Checklist

• I installed Node.js
• I created a generic server.js file
• I ran the server
• I saw "Server running on port 3000" in my terminal

Quick Quiz

Q1: Where does Frontend code run?

• A) On the Server
• B) In the User's Browser ✓
• C) In the Database

Q2: Where does Backend code run?

• A) In the User's Browser
• B) On the Server ✓
• C) In the Wi-Fi router

Q3: What language are we using for both?

• A) Python
• B) JavaScript ✓
• C) C++

Bonus Challenge

Change the "Welcome" message of your server to say "Hello Your Name!"

Next Lesson

Lesson 13: YOU Become the API Provider

You'll learn: How to create your OWN API endpoints (like /scores) that other people can call.

You are a Full-Stack Engineer now! 🏗️