# What is the difference between frontend and backend? > The frontend is the part of an app people see and click; the backend receives the data and does the work. How the split works in a Lovable + n8n build. Source: https://learn.ynteractive.com/content/glossary/frontend-vs-backend · Updated 2026-10-01 · Free from Stepthrough (https://learn.ynteractive.com) [Web apps](https://learn.ynteractive.com/content/glossary#topic-web-apps) · [AI glossary](https://learn.ynteractive.com/content/glossary) Updated October 1, 2026 · By [Robert Breen](https://learn.ynteractive.com/content/about) The frontend is the part of an app people see and click, like a form in a browser. The backend is the part that runs out of sight: it receives the data, applies the rules, saves records and sends emails. ## Why it matters for a small business Knowing the split tells you where to look when something breaks. If a button looks wrong or a field is missing, that's the frontend. If the form says thanks but no row appears in the sheet, look at the backend. Mixing them up wastes hours. It also tells you where things belong. Anything in the frontend can be seen by whoever opens the page, so secrets, internal rules and the work of saving and emailing belong in the backend. A clean split also means you can change one side without touching the other, like rewriting the confirmation email without editing the form. ## In a real lesson: Build an AI Emergency Request Form for Your Plumbing Company The [emergency request form lesson](https://learn.ynteractive.com/content/plumbing-emergency-request-form-ai-lovable-n8n) builds both halves for Blue Maple Plumbing, a made-up company. Lovable builds the frontend: a "Need a Plumber?" form with Name, Email, "What's the problem?" and "Service address", a "Sending..." state, and "Something went wrong. Please call us instead." when a request fails. When you switch apps, the step says it plainly: now you build the backend. The backend is the n8n workflow. A Webhook node set to **On webhook call** receives the JSON, an AI Agent reads it through a prompt template, and its System Message sets each request's priority: Emergency for an active leak or burst pipe, Same-day for no hot water, Scheduled for everything else. The agent saves the request to Google Sheets and emails the customer, and a **Respond to Webhook** node tells the form the work is done. The form never sees those priority rules. You could change what counts as Same-day in n8n tomorrow and leave the form untouched. [Try this lesson free](https://learn.ynteractive.com/modules/lovable-n8n-plumbing) or [read the step-by-step guide](https://learn.ynteractive.com/content/plumbing-emergency-request-form-ai-lovable-n8n). ## Common confusions ### Backend vs database The database (here, a Google Sheet) is where records live. The backend is the logic that writes to it. People often call both "the backend". ### Is n8n a backend? For these lessons, yes. n8n isn't a general-purpose server framework, but a webhook-triggered workflow does the backend's job: receive, decide, store, reply. ### Frontend validation vs backend checks Required fields in the form stop honest mistakes. They don't stop someone sending data straight to the backend, so rules that really matter belong in the backend too. ## Tips - When something breaks, test each half on its own: does the form send, and does the workflow run? - Keep secrets out of anything the browser loads. ## Related terms [Web app](https://learn.ynteractive.com/content/glossary/web-app) · [Lovable](https://learn.ynteractive.com/content/glossary/lovable) · [Webhook](https://learn.ynteractive.com/content/glossary/webhook) · [Secrets and environment variables](https://learn.ynteractive.com/content/glossary/environment-variables) · [Web form](https://learn.ynteractive.com/content/glossary/web-form) · [Respond to Webhook node](https://learn.ynteractive.com/content/glossary/respond-to-webhook) ## Where you use it: free lessons - [Build an AI Emergency Request Form for Your Plumbing Company](https://learn.ynteractive.com/content/plumbing-emergency-request-form-ai-lovable-n8n) (Lovable and n8n, 15 min) - [Lovable + n8n: Build a Web App with an AI Backend](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend) (Lovable and n8n, 15 min) - [Build an AI Maintenance and IT Request Form](https://learn.ynteractive.com/content/ai-maintenance-it-request-form-lovable-n8n) (Lovable and n8n, 15 min) ## Frequently asked questions **Is Lovable a frontend or a backend tool?** In Stepthrough's lessons it builds the frontend, the pages people see, and n8n is the backend. Lovable can also create backend functions of its own. **Why not put everything in the frontend?** Anything in the frontend can be seen and changed by visitors. Secrets, business rules and the work of saving and emailing are safer in the backend. **My form submits but nothing happens. Which part do I check?** The backend. Make sure the workflow is published, that the form has the production webhook URL, and check the workflow's executions for errors. [All AI glossary terms, A to Z](https://learn.ynteractive.com/content/glossary) · [Free prompt templates](https://learn.ynteractive.com/content/prompts)