REST = Representational State Transfer

A set of rules for building web services:

• Client-Server: Frontend and backend are separate
• Stateless: Each request is independent
• Cacheable: Responses can be cached
• Uniform Interface: Consistent URL structure

HTTP Methods

GET Read data
POST Create data
PUT Update data
DELETE Remove data

API Endpoint Design

{
  "success": true,
  "data": {
    "id": 1,
    "name": "Alice",
    "email": "alice@mail.com"
  }
}

GET Request

// Basic GET request
async function getUsers() {
    try {
        const response = await fetch(
            'https://api.example.com/users'
        );

        if (!response.ok) {
            throw new Error(`HTTP ${response.status}`);
        }

        const data = await response.json();
        console.log(data);
        return data;

    } catch (error) {
        console.error('Fetch error:', error);
    }
}

// Call it
getUsers().then(users => {
    users.forEach(user => {
        console.log(user.name);
    });
});

POST Request

// POST request with data
async function createUser(userData) {
    try {
        const response = await fetch(
            'https://api.example.com/users',
            {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(userData)
            }
        );

        const result = await response.json();

        if (!response.ok) {
            throw new Error(result.error);
        }

        console.log('Created:', result);
        return result;

    } catch (error) {
        console.error('Error:', error);
    }
}

// Usage
createUser({
    name: 'Bob',
    email: 'bob@mail.com'
});

PUT Request (Update)

async function updateUser(id, updates) {
    try {
        const response = await fetch(
            `https://api.example.com/users/${id}`,
            {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(updates)
            }
        );

        if (!response.ok) {
            throw new Error('Update failed');
        }

        const result = await response.json();
        console.log('Updated:', result);
        return result;

    } catch (error) {
        console.error('Error:', error);
    }
}

// Usage
updateUser(1, {
    name: 'Alice Updated',
    email: 'alice.new@mail.com'
});

DELETE Request

async function deleteUser(id) {
    try {
        const response = await fetch(
            `https://api.example.com/users/${id}`,
            {
                method: 'DELETE'
            }
        );

        if (!response.ok) {
            throw new Error('Delete failed');
        }

        console.log('User deleted');
        return true;

    } catch (error) {
        console.error('Error:', error);
        return false;
    }
}

// Usage
deleteUser(5).then(success => {
    if (success) {
        alert('User removed!');
    }
});

How Data Flows

1. User Action: Click "Add Student" button
2. Frontend: Sends POST request with student data
3. Backend: Validates data, runs SQL INSERT
4. Database: Stores the data, returns ID
5. Backend: Sends success response as JSON
6. Frontend: Updates the UI with new student

Project Structure

student-app/
  |-- frontend/
  |     |-- index.html
  |     |-- style.css
  |     |-- app.js
  |-- backend/
  |     |-- server.js
  |     |-- config/
  |     |     |-- database.js
  |     |-- models/
  |     |     |-- Student.js
  |     |-- routes/
  |     |     |-- students.js
  |     |-- package.json
  |-- README.md

What is CORS?

A security feature that blocks requests from different origins (domains).

The Problem

• Frontend runs on localhost:5500
• Backend runs on localhost:3000
• Different ports = different origins
• Browser blocks the request!

Access to fetch at 'http://localhost:3000'
from origin 'http://localhost:5500'
has been blocked by CORS policy

The Solution

Add CORS middleware to your Express backend:

npm install cors

const express = require('express');
const cors = require('cors');
const app = express();

// Option 1: Allow all origins (development)
app.use(cors());

// Option 2: Specific origins (production)
app.use(cors({
    origin: [
        'http://localhost:5500',
        'https://mysite.com'
    ],
    methods: ['GET', 'POST', 'PUT', 'DELETE'],
    allowedHeaders: ['Content-Type']
}));

// Serve static files from frontend folder
app.use(express.static('public'));

// Now frontend and backend share the
// same origin - no CORS needed!

Robust API Calls

// API helper with error handling
class ApiService {
    constructor(baseUrl) {
        this.baseUrl = baseUrl;
    }

    async request(endpoint, options = {}) {
        const url = `${this.baseUrl}${endpoint}`;

        try {
            const response = await fetch(url, {
                headers: {
                    'Content-Type': 'application/json',
                    ...options.headers
                },
                ...options
            });

            const data = await response.json();

            if (!response.ok) {
                throw new Error(
                    data.error || 'Request failed'
                );
            }

            return { success: true, data };

        } catch (error) {
            return {
                success: false,
                error: error.message
            };
        }
    }

    get(endpoint) {
        return this.request(endpoint);
    }

    post(endpoint, body) {
        return this.request(endpoint, {
            method: 'POST',
            body: JSON.stringify(body)
        });
    }
}

const api = new ApiService('http://localhost:3000');

Loading States in UI

async function loadStudents() {
    const container = document
        .getElementById('studentList');

    // Show loading state
    container.innerHTML = `
        <tr><td colspan="5"
            class="text-center">
            <div class="spinner-border"></div>
            <p>Loading students...</p>
        </td></tr>`;

    const result = await api.get('/api/students');

    if (!result.success) {
        // Show error state
        container.innerHTML = `
            <tr><td colspan="5"
                class="text-center text-danger">
                Error: ${result.error}
                <br>
                <button onclick="loadStudents()"
                    class="btn btn-sm btn-primary
                    mt-2">Retry</button>
            </td></tr>`;
        return;
    }

    if (result.data.length === 0) {
        // Show empty state
        container.innerHTML = `
            <tr><td colspan="5"
                class="text-center text-muted">
                No students found.
                Add one above!
            </td></tr>`;
        return;
    }

    // Show data
    renderStudents(result.data);
}

Free Public APIs

• JSONPlaceholder - Fake REST API for testing
• OpenWeather - Weather data
• GitHub API - Repository data
• REST Countries - Country information

Example: Fetch GitHub User

async function getGitHubUser(username) {
    const response = await fetch(
        `https://api.github.com/users/${username}`
    );
    const user = await response.json();

    document.getElementById('profile').innerHTML = `
        <img src="${user.avatar_url}"
             width="100">
        <h3>${user.name}</h3>
        <p>${user.bio || 'No bio'}</p>
        <p>Repos: ${user.public_repos}</p>
        <p>Followers: ${user.followers}</p>
    `;
}

getGitHubUser('octocat');

Example: Weather App

// Using OpenWeather API (needs API key)
async function getWeather(city) {
    const API_KEY = 'your_api_key';
    const url = `https://api.openweathermap.org/
        data/2.5/weather?q=${city}
        &appid=${API_KEY}&units=metric`;

    const response = await fetch(url);
    const data = await response.json();

    return {
        city: data.name,
        temp: data.main.temp,
        description: data.weather[0].description,
        humidity: data.main.humidity
    };
}

// Example: REST Countries API
async function getCountryInfo(name) {
    const response = await fetch(
        `https://restcountries.com/v3.1/name/${name}`
    );
    const [country] = await response.json();

    return {
        name: country.name.common,
        capital: country.capital[0],
        population: country.population,
        flag: country.flags.svg
    };
}

Where to Deploy?

Frontend (Static Sites)

• GitHub Pages - Free, from your repo
• Netlify - Free tier, CI/CD
• Vercel - Free tier, great for Next.js

Backend (Node.js)

• Render - Free tier, easy setup
• Railway - Free tier, database included
• DigitalOcean - $4/month VPS
• AWS/GCP/Azure - Enterprise options

Database

• PlanetScale - Free MySQL hosting
• Supabase - Free PostgreSQL
• MongoDB Atlas - Free NoSQL

Deployment Checklist

1. Use environment variables for secrets
2. Set NODE_ENV to 'production'
3. Enable CORS for your frontend domain
4. Use HTTPS (SSL certificate)
5. Set up error logging
6. Configure database connection pooling
7. Add health check endpoint

Environment Variables

# Production .env
NODE_ENV=production
PORT=3000
DB_HOST=db.planetscale.io
DB_USER=app_user
DB_PASSWORD=super_secret
DB_NAME=myapp_prod

# Frontend URL (for CORS)
FRONTEND_URL=https://myapp.netlify.app

Key Concepts

• REST APIs use HTTP methods (GET, POST, PUT, DELETE)
• Fetch API for making HTTP requests in JavaScript
• JSON is the standard data format for APIs
• CORS enables cross-origin requests
• Full-stack = Frontend + Backend + Database
• Handle loading, error, and empty states

Best Practices

• Use async/await for API calls
• Always handle errors gracefully
• Show loading states to users
• Keep API keys on the backend
• Validate data on both frontend and backend
• Use HTTPS in production