Background image
logologo symbol

3 - The fundamentals

Introduction to the back-end

Description

Now that you have gotten familiar with the front end it is time to give you a bit of an overview of how it differs from the bck-end. The back end is a whole beast in it self and it is a bit interesting because a back-end developer never thinks about the UI, colors, fonts, forms or how anything looks. Their only job is to think about the data.
  • Who has access to it?
  • Who can change it?
  • Who can delete it?
  • Who can edit it?
These concerns are so common that they even have their own name, CRUD or Create, Read, Update and Delete.
There are areas where back-end developers and front-end developers have shared concerns and that is mostly about questions like:
  • What kind of data do we need?
  • Does ths data belong on the server or on the client?
  • When do we need to load the data?
  • Can it be cashed?
The slides for this guide can be found here: slides Now it is time for you to put yourself into the shoes of the back-end developer and try to develop a back-end for your website and get a real feel of what the back-end does for a website.
fron-tend vs back-end

Topics

Use these topics as Google searches or starting points for a conversation with your AI. Add the technology and version you are using, ask for a small example from your own project, and check the explanation against the official documentation.
  1. Front end, back end and design — What does each role do, and how do the browser, HTTP, server and database work together?
  2. Browser or server: the boundary map — For each piece of data and action, ask: is it shared, must it survive, must it be trusted, or is it secret? What can stay in the browser?
  3. From localStorage to shared, persistent data — Why is browser storage different from a database? How can I prove that a change on my laptop appears on my phone and survives a server restart?
  4. HTTP requests, responses and JSON — What happens between calling fetch() and displaying the result? Identify the URL, method, headers, request body and response.
  5. CRUD and API routes — How do Create, Read, Update and Delete map to routes and HTTP methods such as POST, GET, PATCH/PUT and DELETE?
  6. HTTP status codes and debugging — What do 200, 201, 400, 401, 403, 404, 429 and 500 tell me? How do I connect a failed request in the Network tab to an error in the server logs?
  7. Choosing a back-end technology with AI — Compare options such as Next.js, Node.js with Express, or Bun. Which fits my existing app, hosting needs and experience, and what assumptions is the AI making?
  8. Choosing a database — Compare document databases such as MongoDB with relational databases such as PostgreSQL or SQLite. How would each store and query the same data in my app?
  9. Loading data, caching and the user experience — When should data be fetched or refreshed? What can be cached, when could it become stale, and how should the UI show loading, empty, success and error states?
  10. Environment variables and secrets — How do .env, .gitignore, .env.example and hosting settings work together? Why must secret keys stay out of Git and variables prefixed with VITE_ or NEXT_PUBLIC_?
  11. Calling an AI service through the server — How can the browser request an AI feature without receiving the provider key? How can I check the browser code and Network tab for accidental exposure?
  12. Server-side validation and trust — Why can the browser lie? How should the server check input, permissions and ownership, limit repeated requests, and avoid exposing secrets in errors?
  13. Authentication vs authorization — What is the difference between who you are and what you may do? How do sessions or tokens support server-side checks? Implementing authentication is an optional extra challenge.
  14. Deployment and hosting — How does a running back end differ from a static site on GitHub Pages? Compare access to logs, environment variables, database persistence, costs and account requirements before choosing a host.
  15. Reviewing AI-generated code and fixing security issues — How can I test CRUD and invalid input, check for leaked secrets, and verify a proposed fix? What must happen if a key leaks? Keep peer testing within the agreed classroom scope.
  16. An interactive report with evidence — Explain the stack choices and boundary map, annotate one real request, show what was found and fixed, and describe how the back end changed the UX and UI. Link to the live app and relevant documentation, and explain what the AI got wrong.

Goals

Knowledge

  • Understand the roles of the browser, server and database, and why shared data and trusted decisions may require a back end.
  • Understand CRUD and the HTTP request–response cycle, including API routes, JSON and common status codes.
  • Understand the difference between browser storage and persistent databases, and the basic trade-offs between document and relational databases.
  • Know how to compare back-end technologies and hosting options with AI, checking its assumptions against project needs and official documentation.
  • Understand server-side trust and security, including input validation, secret management, authentication, authorization and rate limiting.
  • Understand how back-end decisions affect the user experience, including shared data, loading, caching, errors and access permissions.

Skills

  • Be able to create a boundary map that explains which data and actions belong in the browser or on the server and why.
  • Be able to use AI to add a back end and database to an existing app, implement and test Create, Read, Update and Delete, and justify the technology choices.
  • Be able to deploy and verify a working back end, configure server-side environment variables and demonstrate shared, persistent data using two devices.
  • Be able to inspect a request in the Network tab and use server logs to investigate errors, explaining the request, response and status code in your own words.
  • Be able to review AI-generated code for security issues and verify fixes, keeping secrets out of the browser and Git and checking input and applicable access rules. Implementing authentication is an optional extension.
  • Be able to create an interactive HTML report with evidence, explaining decisions, difficult concepts, security fixes and the effect on UX/UI, and use peer feedback to improve the app.

Idea for return

Use the AI to add a back end. Have a talk with it about what kind of technology will help your project the most, ask it the something like:
  • What database would fit best to this project MongoDB or Postgres or maybe something else?
  • What kind of back end technology would be best Nextjs, Nodejs with express, Bun or maybe even Rust, Ruby or PHP?
  • Tell me a bit more about the database you chose and why it is better (take some of it's earlier reasoning and ask more about it)
  • In the same way ask it to explain about the technology. If it makes assumptions that you don't agree with, correct it
  • Make sure that all the opperations are possible on your app (Create, Read, Update and Delete)
  • Ask it to make a security review and if it finds something ask it to fix it
Extra challence - Authentication (not needed but a great experience):
  • Ask the AI what kind of authentication would be best for your app
  • Ask it to help you implement the best authentication method to your app
  • Ask it what are the main things to keep in mind when it comes to security
  • Ask it to do a security audit and fix all issues that it finds
Finally when you are happy with how the back-end works, ask the AI to make an interactive, easy to read report about every decision that you made together in a new HTML file, linking to all relevant documents. Add any explanations for hard topics that you encounter to that same file (keep the interactive and easy to read). Finally ask it to explain (in that same file) how the back-end addition effected the UX and UI of the website

Materials

MDN lesson — Introduction to the server side: browser, server and databaseNode.js — introduction to running JavaScript on the serverExpress — basic routing: GET, POST, PUT and DELETEPostgreSQL — official tutorial: relational databases and SQLMongoDB — introduction to documents, collections and CRUDChrome DevTools — inspect requests and responses in the Network panelWhere does it live? — lecture slides, interactive examples and assignmentMDN — HTTP overview: requests, responses and the client–server modelMDN — HTTP response status codesMDN — Using Fetch: sending JSON and handling responses and errorsNode.js — environment variables and .env filesNext.js — Backend for Frontend: routes, data access and securityOWASP — REST security: access control, input validation and safe error handlingRender — deploy a web service with environment variables and logs (one hosting option)OWASP — authentication guidance for the optional extra challenge