Full-stack Development

A full-stack developer works on every layer of a web app. The front end runs in the browser, the back end holds the rules and secrets, and the database keeps the data.

• Front end: HTML for structure, CSS for style, JavaScript for behaviour. Frameworks include React and Svelte.
• Back end: an API built with Node, Python, Java or similar.
• Database: stores data permanently, for example PostgreSQL.
• Validate on the server: browser checks help users, but anyone can bypass them.

// front end
const res = await fetch('/api/orders');
const orders = await res.json();

// back end
app.get('/api/orders', async (req, res) => {
  const rows = await db.query('SELECT * FROM orders WHERE user_id = $1', [req.user.id]);
  res.json(rows);
});

Authentication proves who you are, and authorisation decides what you may do. Passwords are never stored directly: you store a slow hash, then compare hashes when someone logs in.

• Hashing: use bcrypt or Argon2, which are built to be slow to attack.
• Session cookie: the server remembers you, and the browser holds an ID.
• JWT: a signed token that carries the user's details. Hard to revoke early.
• Cookie flags: HttpOnly, Secure and SameSite block common attacks.

A page can be built in the browser, on the server for each request, or ahead of time. The choice affects speed, search ranking and cost. This site is built ahead of time.

• CSR: client-side rendering. The browser gets JavaScript and builds the page itself.
• SSR: server-side rendering. The server builds fresh HTML for each request.
• SSG: static generation. HTML is built once, at deploy time.
• Hydration: JavaScript wakes up server-made HTML to make it interactive.