Unit 3: Integration and deployment

The React app (for example on localhost:3000) calls the API (on localhost:5000) with fetch or axios. Because they run on different origins, the browser blocks the requests unless the server allows them — CORS (Cross-Origin Resource Sharing).

javascriptconst cors = require("cors");
app.use(cors({ origin: "http://localhost:3000" }));

jsxasync function handleSubmit(e) {
  e.preventDefault();
  const res = await fetch("/api/tasks", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ title }),
  });
  if (!res.ok) setError("Could not save");
}

A JWT (JSON Web Token) has three parts — header, payload and signature — and lets the server confirm a user's identity without storing sessions. Passwords must be hashed (bcrypt) at signup.

Best practices: validate input on the server, handle errors centrally, keep secrets in environment variables, and use Git.

• Frontend: build with npm run build and deploy to Netlify or Vercel.
• Backend: deploy to Render, Railway or a similar host; use a cloud database (MongoDB Atlas).
• Environment variables (process.env.MONGO_URI, JWT_SECRET) keep configuration out of the code and differ between development and production.