Full Stack - Saqib Tech

1. Introduction

Full-stack development refers to the practice of building both the frontend (client-side) and backend (server-side) parts of a web application. A full-stack developer handles everything from UI design to server logic and database operations.

2. Frontend (HTML, CSS, JavaScript)

The frontend is what users interact with. It includes:

HTML – Structure of web pages
CSS – Styling and layout
JavaScript – Interactivity and logic


<!DOCTYPE html>

<html>

<head><title>My Page</title></head>

<body>

  <h1>Hello World</h1>

  <script>

    alert("Welcome!");

  </script>

</body>

</html>

3. Backend (Node.js + Express)

The backend handles server logic, APIs, and business rules. Node.js is a runtime for JavaScript on the server.


// server.js
const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Server is working!');
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

4. Database (MongoDB)

MongoDB is a NoSQL database. Use mongoose to connect and perform operations.


const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost:27017/mydb');

const User = mongoose.model('User', { name: String });
const user = new User({ name: 'Ali' });
user.save();

5. REST API

REST APIs let frontend and backend communicate using HTTP methods (GET, POST, PUT, DELETE).


// Example POST API
app.post('/api/users', (req, res) => {
  const { name } = req.body;
  res.send({ success: true, name });
});

6. Deployment

Popular deployment platforms:

Frontend: Vercel, Netlify
Backend: Render, Railway, Heroku
Database: MongoDB Atlas