Frontend vs Backend — The Two Halves of Every App

Imagine walking into a restaurant. You see the dining area: nice tables, a menu, decorations, plates of food. That's the FRONTEND — everything the customer sees and interacts with. But behind the kitchen doors, there's a whole other world: chefs cooking, ovens heating, fridges storing ingredients, recipes being followed. Customers never see any of this. That's the BACKEND — all the hidden work that makes the frontend possible. Every website and app works exactly like this! The pretty buttons and pages you see are the frontend. The servers, databases, and logic running behind the scenes are the backend.

The frontend (also called 'client-side') is everything that runs in your browser or on your phone. It's what users see, click, type into, and interact with. Frontend is built with: • HTML — The structure (headings, paragraphs, buttons, forms). Like the skeleton of a building. • CSS — The style (colors, fonts, spacing, animations). Like the paint and decorations. • JavaScript — The behavior (what happens when you click, type, or scroll). Like the electricity that makes things move. When you build a project on Lumora using the HTML editor, you're doing frontend development! The code runs right in your browser.

The backend (also called 'server-side') runs on powerful computers called servers, somewhere in a data center. Users never see backend code, but it does the heavy lifting: • Stores data — Saves your account info, posts, messages, and files in a database • Handles logic — Figures out what to show you (like your personalized feed) • Keeps secrets — Stores passwords safely, processes payments, manages security • Talks to other services — Sends emails, connects to maps, fetches weather data Backend languages include Python, Java, Go, Ruby, and JavaScript (Node.js). On Lumora, the AI tutor works because of backend code — your question goes to a server, the server processes it, and sends back a response.

Here's what happens when you log into a website: 1. FRONTEND: You see a login form (HTML/CSS) and type your email and password 2. FRONTEND: You click 'Login' and JavaScript sends your info to the server 3. BACKEND: The server receives your email and password 4. BACKEND: The server checks the database — do the credentials match? 5. BACKEND: If yes, the server creates a session and sends back 'success!' 6. FRONTEND: JavaScript receives 'success' and redirects you to your dashboard 7. FRONTEND: The dashboard page loads and shows your personalized data Frontend and backend are constantly passing information back and forth like a tennis match!

You might hear the term 'full-stack developer' — that's someone who can build BOTH the frontend and backend. They can create the whole restaurant, from the dining room to the kitchen! Many modern frameworks make full-stack easier. Next.js (which Lumora is built with!) lets you write frontend AND backend code in the same project using JavaScript.