🔗 Connecting React Frontend to Backend API

Now you connect React (Frontend) with Node.js/Express (Backend). This is the core of full-stack development. Frontend sends HTTP requests → Backend processes → Returns JSON data.

🧠 How Frontend and Backend Communicate

Flow:
1️⃣ React sends request (API call)
2️⃣ Backend receives request
3️⃣ Backend processes logic
4️⃣ Backend sends response
5️⃣ React updates UI

Example: React → GET /users → Express API → JSON → React UI

🌐 API Request Methods Used in React

- GET: Fetch data
- POST: Send data
- PUT: Update data
- DELETE: Remove data

⚡ Method 1: Fetch API

JavaScript has a built-in function called fetch().

📥 Example: Fetch users from backend

Backend endpoint: GET http://localhost:3000/users

React code:

import { useEffect, useState } from "react";

function App() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("http://localhost:3000/users")
      .then(res => res.json())
      .then(data => setUsers(data));
  }, []);

  return (
    <div>
      <h2>User List</h2>
      {users.map(user => (
        <p key={user.id}>{user.name}</p>
      ))}
    </div>
  );
}

export default App;

Result: React automatically displays backend data.

➕ Sending Data to Backend (POST)

Example: Add new user.

const addUser = async () => {
  await fetch("http://localhost:3000/users", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({ name: "Deepak" })
  });
};

Backend receives JSON and stores it.

✏️ Updating Data (PUT)

await fetch("http://localhost:3000/users/1", {
  method: "PUT",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({ name: "Updated Name" })
});

❌ Deleting Data (DELETE)

await fetch("http://localhost:3000/users/1", {
  method: "DELETE"
});

🧩 Common Full Stack Folder Structure

project/
├── client/ (React frontend)
│    └── src/
├── server/ (Node backend)
│    └── routes/
├── package.json

Frontend and backend run separately.

⚠️ Common Beginner Issues

1️⃣ CORS error
Backend must allow frontend.
Example:

const cors = require("cors");
app.use(cors());

Install: npm install cors

2️⃣ Wrong API URL
Frontend must call: http://localhost:3000/api/users

3️⃣ Missing JSON middleware
app.use(express.json())

🧪 Mini Practice Task

Build a simple React + Express full stack app
Tasks:
- Fetch users from backend
- Display users in React
- Add new user from React form
- Delete user from UI

➡️ Double Tap ♥️ For More

🗄️ Database Integration — MongoDB with Node.js

Now you move from temporary data (arrays) → real database storage.

Backend apps must store data permanently.

That's where databases come in.

🧠 What is a Database

A database stores data persistently.

Examples:
• E-commerce: Products, orders
• Social media: Users, posts
• Banking app: Transactions

Without database → data disappears when server restarts.

🍃 What is MongoDB

MongoDB is a NoSQL database.

Instead of tables → it stores documents (JSON-like data).

Example document:

{
  "name": "Deepak",
  "role": "Developer",
  "age": 25
}

Collection = group of documents 
Database = group of collections

📦 Why MongoDB is Popular

✅ JSON-like data 
✅ Flexible schema 
✅ Works perfectly with JavaScript 
✅ Scales easily

Common in MERN stack.

MERN = MongoDB + Express + React + Node

🔗 Connecting MongoDB with Node.js

We use a library called Mongoose.

Install:

npm install mongoose

⚡ Step 1 — Connect Database

Example:

const mongoose = require("mongoose");

mongoose.connect("mongodb://127.0.0.1:27017/myapp")
.then(() => console.log("MongoDB Connected"))
.catch(err => console.log(err));

Now Node server is connected to MongoDB.

🧩 Step 2 — Create Schema

Schema defines data structure.

Example:

const userSchema = new mongoose.Schema({
  name: String,
  age: Number
});

📄 Step 3 — Create Model

Model allows database operations.

const User = mongoose.model("User", userSchema);

➕ Step 4 — Create Data

app.post("/users", async (req, res) => {
  const user = new User({
    name: req.body.name,
    age: req.body.age
  });

  await user.save();
  res.json(user);
});

🔍 Step 5 — Fetch Data

app.get("/users", async (req, res) => {
  const users = await User.find();
  res.json(users);
});

❌ Step 6 — Delete Data

app.delete("/users/:id", async (req, res) => {
  await User.findByIdAndDelete(req.params.id);
  res.json({ message: "User deleted" });
});

✏️ Step 7 — Update Data

app.put("/users/:id", async (req, res) => {
  const user = await User.findByIdAndUpdate(
    req.params.id,
    req.body,
    { new: true }
  );
  res.json(user);
});

🔄 Full Backend Flow Now

React → API request 
Express → Handles route 
Mongoose → Talks to MongoDB 
MongoDB → Stores data

⚠️ Common Beginner Mistakes

• Forgetting to install mongoose
• Not using async/await
• Wrong MongoDB URL
• Not validating schema

🧪 Mini Practice Task

Build Product API with MongoDB

Routes:
• POST /products
• GET /products
• PUT /products/:id
• DELETE /products/:id

Fields: 
name 
price 
category

✅ Double Tap ♥️ For More

🚀 MERN Stack Architecture (End-to-End Flow)

Now you connect everything you learned into one complete system.

👉 MERN = MongoDB + Express + React + Node.js

This is the most popular full stack architecture.

🧠 What is MERN Stack

A full stack system where:
• React → Frontend (UI)
• Node + Express → Backend (API)
• MongoDB → Database

All using JavaScript 🔥

🔄 Complete MERN Flow (Very Important)

1️⃣ User interacts with UI (React)
2️⃣ React sends API request
3️⃣ Express receives request
4️⃣ Backend processes logic
5️⃣ Mongoose interacts with MongoDB
6️⃣ Database returns data
7️⃣ Backend sends JSON response
8️⃣ React updates UI
👉 This is the core interview explanation.

🧩 Architecture Diagram (Simple)
React (Frontend)
↓
API Request (fetch/axios)
↓
Node + Express (Backend)
↓
Mongoose
↓ MongoDB (Database) ↑
JSON Response
↑
React UI Updates

📁 Real MERN Project Structure
project/
├── client/ (React App)
│ └── src/
│ ├── components/
│ ├── pages/
│ └── App.js
│ ├── server/ (Backend)
│ ├── models/
│ ├── routes/
│ ├── controllers/
│ └── server.js
│ ├── package.json

📦 Frontend Responsibilities (React)
• UI rendering
• API calls
• State management
• Form handling

Example: fetch("/api/users")

⚙️ Backend Responsibilities (Node + Express)
• API creation
• Business logic
• Authentication
• Database interaction

Example: app.get("/users", ...)

🗄️ Database Responsibilities (MongoDB)
• Store data
• Retrieve data
• Update/Delete data

Example: User.find()

🔐 Where Authentication Fits

Flow: React → Login → Backend

Backend → Verify → Generate JWT

Frontend stores token
Frontend sends token in future requests

⚠️ Common Beginner Mistakes

• Mixing frontend and backend code
• Not handling errors
• No folder structure
• Not using environment variables

🧪 Mini Practice Task

Design a MERN app:

👉 Features to build:
• User signup/login
• Add products
• View products
• Delete products

🧪 Mini Task Solution: Try it yourself first

🧩 1. FRONTEND (React) – What goes here?

👉 Responsibility: UI + API calls + state

📁 Structure
client/src/
├── pages/
│ ├── Login.js
│ ├── Signup.js
│ ├── Dashboard.js
├── components/
│ ├── ProductForm.js
│ ├── ProductList.js
├── services/
│ └── api.js

⚙️ What it does:
• Login/Signup forms
• Store JWT (localStorage)
• Call APIs
• Display products

🧠 Example API Calls:
// Login
fetch("/api/auth/login", {
method: "POST",
body: JSON.stringify({ email, password }),
});

// Get Products
fetch("/api/products", {
headers: {
Authorization: Bearer ${token}
}
});

⚙️ 2. BACKEND (Node + Express) – What goes here?

👉 Responsibility: Logic + API + Auth

📁 Structure
server/
├── models/
│ ├── User.js
│ ├── Product.js
├── controllers/
│ ├── authController.js
│ ├── productController.js
├── routes/
│ ├── authRoutes.js
│ ├── productRoutes.js
├── middleware/
│ └── authMiddleware.js
└── server.js

🔑 APIs You’ll Build

🔐 Auth APIs
POST /api/auth/signup
POST /api/auth/login

📦 Product APIs
GET /api/products
POST /api/products
DELETE /api/products/:id

🧠 Example Controller Logic
// Get Products
exports.getProducts = async (req, res) => {
const products = await Product.find({ user: req.user.id });
res.json(products);
};

🔐 Authentication Flow
1. User logs in
2. Backend verifies user
3. Backend sends JWT
4. React stores token
5. Token sent in headers for protected routes
Authorization: Bearer <token>

🗄️ 3. DATABASE (MongoDB) – What goes here?
👉 Responsibility: Store manage data

👤 User Schema
{
name: String,
email: String,
password: String
}

📦 Product Schema
{
name: String,
price: Number,
user: ObjectId // reference to user
}

🔄 Complete Flow (End-to-End)

👉 Example: User adds a product
1. React form submit
2. API call → POST /api/products
3. Express route receives request
4. Auth middleware verifies JWT
5. Controller saves product in MongoDB
6. Response sent back
7. React updates UI

Double Tap ❤️ For More