Beyond Frontend: Full Stack Overview

contain

What We've Learned

Frontend Development:

  • HTML (structure)
  • CSS (styling)
  • JavaScript (interactivity)
  • APIs (fetching data)

This is just one part of web development!

Frontend vs Backend

The Big Picture

┌─────────────────────────────────────────────┐
│           Frontend (Client-Side)             │
│  What users see and interact with            │
│  - HTML, CSS, JavaScript                     │
│  - Runs in the browser                       │
└─────────────────┬───────────────────────────┘
                  │
                  │ HTTP Requests
                  │
┌─────────────────▼───────────────────────────┐
│           Backend (Server-Side)              │
│  The "brain" behind the scenes               │
│  - Python, Node.js, Java, etc.               │
│  - Handles data, logic, authentication       │
└─────────────────┬───────────────────────────┘
                  │
                  │
┌─────────────────▼───────────────────────────┐
│              Database                        │
│  Stores all the data                         │
│  - User accounts, posts, products            │
└──────────────────────────────────────────────┘

Frontend vs Backend

Frontend Backend
What you see What you don't see
Runs in browser Runs on server
HTML, CSS, JavaScript Python, Node.js, Java, PHP
User interface Business logic, data processing
This course focuses here OIM3640, other courses

Real-World Example: Instagram

Frontend (what you see):

  • Feed of photos
  • Like button
  • Comment box
  • User profile

Backend (behind the scenes):

  • Store uploaded photos
  • Track who liked what
  • Recommend posts
  • User authentication

What is an API (Revisited)

APIs: The Bridge

API = Application Programming Interface

The contract between frontend and backend:

Frontend: "Give me user's posts"
    ↓
API: "Here's the data as JSON"
    ↓
Frontend: "Display the posts"

You've been using APIs. Backend developers build them.

RESTful APIs

Most common API style:

HTTP Method Purpose Example
GET Retrieve data Get user profile
POST Create data Create new post
PUT Update data Edit post
DELETE Delete data Delete post

Databases

Why Databases?

Problem with Local Storage:

  • Only works on one device
  • Limited storage (~10MB)
  • No sharing between users

Solution: Database

  • Centralized storage
  • Unlimited* storage
  • Shared across all users

SQL (Relational) Databases

Structured, like Excel tables:

Users Table:
| id | name    | email             |
|----|---------|-------------------|
| 1  | Alice   | alice@example.com |
| 2  | Bob     | bob@example.com   |

Posts Table:
| id | user_id | content           |
|----|---------|-------------------|
| 1  | 1       | Hello world!      |
| 2  | 1       | My second post    |

Examples: MySQL, PostgreSQL, SQLite

NoSQL (Document-based) Databases

Flexible, like JSON:

{
  "id": 1,
  "name": "Alice",
  "email": "alice@example.com",
  "posts": [
    { "content": "Hello world!", "date": "2026-01-15" },
    { "content": "My second post", "date": "2026-01-16" }
  ]
}

Examples: MongoDB, Firebase, DynamoDB

SQL vs NoSQL

SQL NoSQL
Structured (tables, rows) Flexible (documents)
Strict schema Schema-less
Relationships (joins) Nested data
Good for: Banking, inventory Good for: Social media, IoT

Both are valid - depends on use case!

Backend Technologies

Popular Backend Languages

Language Pros Used by
Node.js Same as frontend (JavaScript) Netflix, Uber
Python Easy to learn, powerful Instagram, Spotify
Java Enterprise-ready Amazon, LinkedIn
PHP Web-focused WordPress, Facebook
Go Fast, modern Google, Uber

You already know JavaScript - Node.js is a natural next step!

Node.js Example

Frontend JavaScript:

const button = document.getElementById('myButton');
button.addEventListener('click', () => alert('Hello!'));

Backend JavaScript (Node.js):

import express from 'express';
const app = express();

app.get('/hello', (req, res) => {
  res.json({ message: 'Hello from server!' });
});

app.listen(3000);

Same language, different environment!

Authentication

How Login Works

Frontend:

const response = await fetch('/api/login', {
  method: 'POST',
  body: JSON.stringify({ email, password })
});
const data = await response.json();
if (data.token) {
  localStorage.setItem('token', data.token);
}

Backend:

  • Check if email/password match database
  • Create a token (like a temporary password)
  • Send token back

Future requests: Include token to prove you're logged in

Sessions vs Tokens

Sessions:

  • Server remembers you
  • Session ID stored in cookie
  • Traditional approach

Tokens (JWT):

  • Self-contained data
  • No server memory needed
  • Modern approach (what most APIs use)

Modern Frameworks

Frontend Frameworks

Why plain HTML/CSS/JS isn't always enough:

Challenges:

  • Managing complex state
  • Updating UI efficiently
  • Code organization at scale

Solution: Frameworks!

Popular Frontend Frameworks

Framework Who made it Learning curve
React Facebook Medium - Learn JSX
Vue Community Easy - Most like vanilla JS
Angular Google Hard - Full framework
Svelte Community Easy - Compiles away

All solve similar problems, different approaches!

Why Frameworks?

Plain JavaScript:

function updateUI(todos) {
  const list = document
    .getElementById('todos');
  list.innerHTML = '';
  todos.forEach(todo => {
    const li = document
      .createElement('li');
    li.textContent = todo.text;
    list.appendChild(li);
  });
}

React:

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map(todo =>
        <li>{todo.text}</li>
      )}
    </ul>
  );
}

When to Use Frameworks

Use Plain JavaScript when:

  • Simple, small projects
  • Learning the fundamentals
  • Static content with light interactivity

Use Frameworks when:

  • Complex, large applications
  • Lots of dynamic updates
  • Team collaboration
  • Job requirements (most companies use frameworks)

Full Stack Development

What is Full Stack?

Full Stack Developer = Can work on both frontend and backend

Frontend Skills:
✓ HTML, CSS, JavaScript
✓ React/Vue/Angular
✓ Responsive design

Backend Skills:
✓ Node.js/Python/Java
✓ Databases (SQL/NoSQL)
✓ APIs, authentication

DevOps:
✓ Git/GitHub
✓ Deployment (Vercel, Heroku, AWS)
✓ CI/CD

Common Full Stack Combinations

Stack Technologies
MERN MongoDB, Express, React, Node
MEAN MongoDB, Express, Angular, Node
LAMP Linux, Apache, MySQL, PHP
JAMstack JavaScript, APIs, Markup
T3 TypeScript, tRPC, Tailwind, Prisma

You've learned most of the "RN" in MERN!

Next.js: The Modern Way

What is Next.js?

Next.js = React framework with backend built-in

Key features:

  • Write frontend and backend in one project
  • File-based routing
  • Server-side rendering
  • API routes built-in
  • Easy deployment (Vercel)

Fastest growing way to build full stack apps!

Next.js Example

File structure:

my-app/
├── app/
│   ├── page.js          ← Frontend (home page)
│   └── api/
│       └── users.js     ← Backend (API endpoint)

Same project, both frontend and backend!

Static vs Server Rendering

Static (what we've done):

  • HTML generated at build time
  • Fast, but not dynamic
  • GitHub Pages

Server Rendering (Next.js, etc.):

  • HTML generated per request
  • Can personalize per user
  • Needs a server (not just static hosting)

References