Full Stack Camp
144 subscribers
8 photos
16 files
89 links
Fullstack Camp | Learn. Build. Launch.
Welcome to the ultimate tech adventure!
Join us for a hands-on journey through HTML, CSS, JavaScript, React, Node.js, Express & MongoDB — all in one place.
Download Telegram
🌟 Week 7 — Day 4:  Middleware

Good morning  campers! 👋🔥

Today we step into one of the MOST IMPORTANT concepts in Express: middleware.
If Express was a restaurant, middleware is EVERYTHING that happens between a customer entering the door and receiving their food.

🧱 1. What is Middleware?

Middleware = “In-Between Processing”
In Express, middleware is:
A function that sits between the request and the response.
It can examine, modify, stop, or continue the flow.

🔍 The Formula:
(req, res, next) => { ... }

req → incoming request
res → outgoing response
next() → lets the request move to the next middleware or route

🍔 Restaurant Analogy
Imagine Express as a restaurant:
Customer enters → This is the ➤incoming request (req)
Security checks bag → Middleware
Waiter takes order → Middleware
Kitchen cooks food → Route handler
Waiter serves food → Response (res)
Each “step” is middleware.
Some steps check things, others prepare things, others add data, some reject requests.

🧠 2. Why Do We Need Middleware?

Middleware helps you:
➙Check if the user is logged in
➙Parse JSON sent from frontend
➙Log incoming requests
➙Serve static files
➙Handle errors
➙Validate data
➙Limit access (rate limiting)
➙Clean or modify requests
Without middleware, Express is basically a blank application that does… nothing.

⚙️ 3. Built-In Middleware in Express

Express gives you ready-made middleware out of the box.

💡 3.1 express.json()
This middleware reads JSON sent in the request body and makes it available at req.body.
Without express.json()
You can’t read JSON!
With express.json()

app.use(express.json());


Now when you do:

POST /login { "username": "megersa", "password": "1234" }
You can access it:

req.body.username
req.body.password


🎯 Analogy
This is like having a translator in a restaurant who takes what the customer says and converts it into your language.

💡 3.2 express.static()
Allows you to serve static files (images, CSS, HTML, JS).
app.use(express.static("public"));

This means:
➣/public/index.html → available at http://localhost:3000/index.html
➣/public/style.css → served automatically
🎯 Analogy:
Think of this as the restaurant’s self-service shelf.
Customers help themselves to menus, napkins, water… without the waiter.

🖌️ 4. Custom Middleware

You can make your own middleware functions.
Basic template:

function myMiddleware(req, res, next) {
    console.log("Middleware ran!");
    next();
}
app.use(myMiddleware);


Steps:
➙It runs on EVERY request
➙It prints something
➙It calls next() to let the request continue
🎯 Analogy
Custom middleware = a custom security guard or waiter procedure that you invent for your restaurant.

🧪 5. Real Examples of Custom Middleware

Example 1 — Logging Middleware

app.use((req, res, next) => {
  console.log(
${req.method} ${req.url});
  next(); });


What it does:
➤Logs the method (GET, POST)
➤Logs the path
➤Allows request to continue

Example 2 — Add Timestamp

app.use((req, res, next) => {
   req.requestTime = new Date().toISOString(); next(); });


Later in a route:

app.get("/", (req, res) => {
   res.send("Requested at: " + req.requestTime); });


🎉 Middleware can add new data to req!
Example 3 — Restrict Access (Simple Auth Check)

app.use((req, res, next) => {
   const token = req.headers["authorization"];
   if (!token){ return res.status(403).send("Access denied");}
next(); });


Middleware can ALLOW or BLOCK requests.
🚦 6. Application-level vs Router-level Middleware

Application-level (app.use)
Runs for EVERY route.
app.use(loggerMiddleware);
Perfect for:
➙logging
➙JSON parsing
➙authentication
➙rate limiting

Router-level Middleware
Middleware for a specific group of routes.

const router = express.Router();
router.use((req, res, next) => {
   console.log("Router-specific middleware");
  next(); });

router.get("/products", (req, res) => { ... });
app.use("/api", router);


Now this middleware runs only for /api/*
🎯 Analogy
Router-level middleware is like rules for a specific department in the restaurant (only for the VIP room).

🔁 7. What Does next() Do?

next() tells Express:
➡️ “I’m done. Move to the next middleware or route.”
If you forget next(), the request hangs forever.
Example of wrong code (missing next):

app.use((req, res) => { console.log("hi"); // no next(), no response → app freezes });


🎯 Analogy
If the security guard at the door forgets to allow the customer to enter the restaurant…
The customer stays stuck outside forever 😅

⚠️ 8. Common Middleware Mistakes
1. Forgetting next()
The app “freezes” and never responds.
2. Sending multiple responses
Example:
res.send("Done"); next(); // WRONG
Once you send a response, you CANNOT call next() anymore.
3. Not ordering middleware correctly
Order matters in Express:

app.use(logger); app.use(express.json()); app.post("/signup", handler);


If you place middleware after the route, it won’t run.
🧩 9. Putting It All Together (Mini Flow Example)

app.use(express.json()); // built-in app.use(logger); // custom app.use(authCheck); // custom app.get("/", (req, res) => { res.send("Home page"); });

Order of execution:
1️⃣ JSON parsed
2️⃣ Logger prints
3️⃣ Auth middleware checks
4️⃣ Route runs
🎯 Analogy
Like going through:
Entrance → Security → Reception → Restaurant table

📘 10. Learn More (Documentation)
Check out this for more on middlewares:
https://expressjs.com/en/guide/using-middleware.html
🧩🧩 Week 7 Day 4 Challenges- Middleware

🧩 Challenge 1 — Create a Full Request Logger Middleware

Create a middleware that logs:
➙HTTP method
➙URL
➙Timestamp
➙Response status code
➙How long the request took (in milliseconds)
Requirements:
➤The middleware should run for every request.
➤Store the start time at the beginning.
➤After the response finishes, log how long it took.
Hint: use res.on("finish", ...)
Goal:
Understand middleware flow and how to work with the response lifecycle.

🧩 Challenge 2 — Build an IP Blocker Middleware

➙Create a middleware called blockIP that:
➙Blocks one specific IP (your choice) Sends a message: "Access denied for IP: <ip>"
➙Allows all other requests to continue normally
Requirements:
➤Use req.ip
➤Use return res.status(403).send("message") to stop the chain
➤Everyone else passes with next()
Goal:
Learn to stop middleware flow intentionally.

🧩 Challenge 3 — Route-Level Middleware for Checking Query Password

➙Create a route:
GET /secret
➙The route should only respond if the user provides a query:
?password=camp2025
➙If correct → respond:
"Welcome to the secret page 😎"
➙If wrong →
"Invalid password!" with status 401
Requirements:
➤Create a middleware function checkPassword
➤Apply it only to the /secret route (router-level middleware)
➤Use req.query.password
Goal:
Master route-level middleware and securing routes.

🎯 After You’re Done
💥share your solutions in the group,
💥invite a friend,
      and as always —

💥stay well, stay curious, and stay coding ✌️
🚀 Want to Learn Python or Web Development?

Hey everyone 👋
I’m starting beginner-friendly PAID lessons for anyone who wants to learn Python basics or Web Development (HTML, CSS, JavaScript) from zero.

You can learn online or in person, whichever is comfortable for you.

If you're interested, just message:
“Python” or “Web Dev” to @Tarikey6

I’ll send you the full details and schedule.
Let’s level up your skills! 💻🔥
4
Forwarded from Edemy
We all wait for the “right moment” to start something a project, a skill, a change in life.

We tell ourselves: “I’ll begin when things are easier,” or “I’ll start when I feel ready.”

But waiting for the perfect moment only keeps you stuck.

Progress doesn’t wait for readiness it comes from taking the first step, even if it’s small and imperfect.

Momentum comes from action. You can figure things out along the way.

Every skill, every achievement, every opportunity comes from movement not perfect preparation.

Your journey will never feel perfectly organized.
Your schedule will never be completely free.
Your doubts will never fully disappear.

But if you start now, you evolve.
You learn.
You adjust.
You get better step by step.

So here’s the message for today:

Start while you’re uncertain.
Start while you’re busy.
Start while things feel messy.
Start with the small step you can take today.

Because the “perfect time” you’re waiting for?
It’s not coming.

But progress will as soon as you begin.

Have a productive week!

@edemy251
Week 7 Day 5 — Serving Static Files + File System (fs) APIs

👋 Hey Campers!
Hope you're doing amazing and still coding strong 💻🔥.
Today we’re diving into one of the most practical parts of Express:

This lesson is extra important because:
➤Every real web app needs static assets
➤Every backend eventually reads/writes data
➤Today you connect frontend + backend properly
It's the foundation for building your own mini-APIs
Let’s go deep! 🚀

🧱 Part 1 — Serving Static Files in Express

What Are Static Files?
These are files that don’t change automatically on the server.
They are sent “as they are” directly to the client.
Examples:
☑️HTML files
☑️CSS files
☑️JavaScript (frontend) files
☑️Images (png, jpg)
☑️Fonts
☑️Videos / audio
☑️PDFs
📌 Analogy:
Think of static files like food items already packaged on a supermarket shelf.
You don't cook them after the customer asks — you simply hand them over.

🗂️ What is the “public” folder?
Express uses a special folder (commonly named public) for all static assets.
Anything inside this folder becomes instantly accessible in the browser.

project/
├── server.js
└── public/
     ├── index.html
     ├── style.css
     └── script.js

This folder is like a “display window” of your app.

express.static() — The Magic Function
To let Express send static files, you use:
app.use(express.static('public'));

This tells Express:
“Hey, anything inside the public folder — give it to the user directly.”

🧪 Example: Serve an HTML Page
1️⃣ Create public/index.html

<!DOCTYPE html>
<html>
<head>
   <title>My App</title>
   <link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello Campers!</h1>
<script src="script.js"></script>
</body>
</html>


2️⃣ Create public/style.css

body { background: #fafafa; font-family: Arial; }


3️⃣ Create public/script.js

console.log("Frontend JS is working!");


4️⃣ Server (server.js)

const express = require('express');
const app = express();
app.use(express.static('public'));
app.listen(3000, () => console.log("Server running on port 3000"));


Now visit:
http://localhost:3000
Your HTML loads → CSS loads → JS loads → everything is connected 🎉
💡 Deep Understanding:
Frontend = runs in the browser
Backend = runs on your computer/server
Static files are your frontend, and Express gives them to the browser.

🔗 Part 2 — Connecting Frontend + Backend
Now that Express can serve a frontend, let’s connect it to backend routes.
Example folder:

public/ index.html
server.js


index.html

<button id="btn">Get Message</button>
<p id="msg"></p>
<script> document.getElementById("btn").onclick = async () => {
    const res = await fetch("/hello");
    const data = await res.json(); document.getElementById("msg").innerText = data.message; };
</script>


server.js

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


Click button → browser calls backend → backend sends data → page updates.
Congratulations — you just connected fullstack 🎉

🧾 Part 3 — File System (fs) in Express

You already learned about Node’s fs module in previous lessons,
but now we mix fs + Express to build real APIs.

Why Does Backend Use fs?
Because storing data in files is the simplest form of a “database”.
Before databases like MongoDB or MySQL, developers stored everything in files:
➙notes.json
➙books.json
➙users.json
This is PERFECT for beginners.

🧊 Analogy: fs as a Notebook
Think of fs as adding, editing, or erasing text in a physical notebook.
➤fs.readFile() → you open the notebook and read
➤fs.writeFile() → you erase a page and rewrite the content
➤fs.appendFile() → you add new notes
➤fs.unlink() → you tear out a page

Express will act as the “waiter” that responds to customers (frontend),
and fs acts as the “kitchen” where data is stored.
🍪 Part 4 — Building a Small JSON-based API
Let’s build a simple Notes API:

notes.json: [
  { "id": 1, "text": "Learn Express" },
  { "id": 2, "text": "Practice fs module" }
]


📘 1️⃣ Setup folder

project/
├── server.js
├── notes.json
└── public/

Make sure notes.json starts as:
[]

📥 2️⃣ Get All Notes (GET /notes)

const fs = require('fs');
app.get("/notes", (req, res) => {
    const data = JSON.parse(fs.readFileSync("notes.json", "utf8")); res.json(data); });

3️⃣ Add a Note (POST /notes)

Enable JSON body first:

app.use(express.json());
app.post("/notes", (req, res) => {
    const notes = JSON.parse(fs.readFileSync("notes.json"));
const newNote = { id: Date.now(), text: req.body.text };
notes.push(newNote);
fs.writeFileSync("notes.json", JSON.stringify(notes, null, 2));
res.json({ message: "Note added!", note: newNote }); });


🗑️ 4️⃣ Delete a Note (DELETE /notes/:id)

app.delete("/notes/:id", (req, res) => {
   const notes = JSON.parse(fs.readFileSync("notes.json"));
   const filtered = notes.filter(n => n.id != req.params.id);
  fs.writeFileSync("notes.json", JSON.stringify(filtered, null, 2));
   res.json({ message: "Note deleted" }); });

Boom 🔥 — You built a small backend API without databases.


🧪 Checkpoints — Are You Following?
Can you serve HTML, CSS, and JS from the public folder?
Can your frontend call your backend with fetch()?
Can you read a JSON file?
Can you add data and save it?
Can you delete data?
If yes → You're ready for the next level (Express CRUD apps!) 🚀

📘 Documentation for Further Study

☑️Express static → https://expressjs.com/en/starter/static-files.html
☑️fs → https://nodejs.org/api/fs.html
☑️Path → https://nodejs.org/api/path.html
Week 7 Day 5 challenges— Serving Static Files + fs module.

🔧 Challenge 1 — Make Your Own Mini Website With Express

Goal: Serve a small multi-page static website
Requirements:
Create a public/ folder with:
➙index.html
➙about.html
➙contact.html
➙A CSS file (styles.css)
Use express.static() to serve everything.
Add links between pages.
In index.html include a simple JavaScript file (main.js) that logs something to console.

What you must learn while solving:
➤How a server serves HTML/CSS/JS
➤Folder structure matters
➤Paths inside HTML (href, src)
➤That Express does NOT “touch” your HTML; it simply delivers files

📘 Challenge 2 — Build a “Notes API” with File Storage

Goal: Build an API that saves notes in a JSON file.
Requirements:
➙Create data/notes.json
➙Use fs.readFileSync and fs.writeFileSync
API Endpoints:
➙GET /notes → return all notes
➙POST /notes → add a new note Body contains { "title": "...", "content": "..." }
➙DELETE /notes/:id → delete a note by id
On server start:
➙If file does NOT exist, create it with [].

What you must learn:
➤How to read/write JSON files
➤How Express handles JSON bodies
➤How frontend (or Postman) interacts with an API
➤Error handling when reading broken JSON

📸 Challenge 3 — Create an Image Gallery (Static + Dynamic API)

Goal: Mix both static files AND APIs
Requirements:
➙Use a public/gallery/ folder that contains several images.
➙Serve them using express.static().
Make an API:
➙GET /api/images
→ return an array of image file names found in /public/gallery/
(Use fs.readdirSync to list files).
➙Create a frontend page (gallery.html) that:
➙Fetches /api/images
➙Displays all images dynamically using JavaScript

What you learn here:
➤How Express serves static assets
➤How to dynamically list files with fs
➤How frontend uses fetch() to get data from backend
➤Combining static HTML with dynamic API data

💥share your solutions in the group,
💥invite a friend,
      and as always —

💥stay well, stay curious, and stay coding ✌️
Week 7 Day 6: Error Handling in Express
and
Environment Variables & Configurations

🌞 Good Afternoon Devs
Today we enter a very important part of backend development:
These two topics make your apps safe, predictable, and professional.
Without them, everything becomes chaos — like a city with no emergency system and no addresses.
Let’s start!

🚑 PART 1 — Error Handling in Express
When you build a server, errors WILL happen. Not maybe — absolutely, definitely, surely.
Your API might crash because:
➤File not found
➤JSON is broken
➤Database down
➤User sent invalid data
➤Logic error in your code
But Express gives us a structured way of dealing with errors.

🧨 1. What is an Error in Express?
Think of your Express app like a restaurant kitchen.
➙If everything is fine → Meals go out
➙If something burns, falls, spills → Errors happen
Errors must be:
Detected (you notice something is wrong)
Passed to the right handler
Handled cleanly (customer gets a nice explanation, not a disaster)
In code, this is the same:

throw new Error("Something went wrong!");
or
next(new Error("File missing!"));


🧩 2. Common Error Types
🔴 Type 1 — Syntax Errors
Mistakes in code.
console.log("Hello"
🟡 Type 2 — Runtime Errors
Something wrong during execution.
JSON.parse("broken json");
🔵 Type 3 — HTTP Errors
User sends wrong data:
➤Missing ID
➤Invalid query
➤Empty body
➤Unauthorized request
🟠 Type 4 — File System / Database Errors
Example:
fs.readFileSync("./data/missing.json");
File does not exist → Crash if unhandled.

🛠️ 3. How Express Normally Handles Errors
If you throw an error inside a route:
app.get("/test", (req, res) => { throw new Error("Boom!"); });
Express will crash your server unless you have special error middleware.

📣 4. Using next(err) to Pass Errors
This is like calling the restaurant manager when something goes wrong.

app.get("/user", (req, res, next) => { try { let user = JSON.parse("broken-json"); res.send(user); } catch (err) { next(err); // Pass it to error handler } });

Calling next(err) tells Express:
“Hey, something broke. Skip all remaining middlewares and send this error to the official error handler.”

🧯 5. Custom Error-Handling Middleware
This is the firefighter of your app.
🧠 Rule:
An error handler MUST have 4 arguments:

app.use((err, req, res, next) => { console.error(err.stack); res.status(500).json({ success: false, message: err.message, }); });

Why?
Express identifies error-handlers by (err, req, res, next) shape.

⚠️ 6. Sending Clean Error Responses
Instead of giving users ugly, confusing errors…
Bad response:
TypeError: Cannot read properties of undefined
Good response:
{ "success": false, "message": "User ID is required." }
This makes your API professional.
Example:

app.get("/item/:id", (req, res, next) => {
  if (!req.params.id) {
   return next(new Error("ID is missing.")); }
res.json({ id: req.params.id }); });

🧱 7. Common Mistakes
Forgetting return before next(err)
This can cause multiple responses.
Throwing error after sending res.send()
If you already sent a response, stop.
Writing error handler before routes
Order matters in Express!

☑️Error handling helps you:
➤Prevent server crashes
➤Send helpful messages
➤Track issues
➤Debug easily
➤Keep users happy
🌍 PART 2 — Environment Variables & Configurations
Now imagine you have:
A development environment (your laptop)
A production environment (the real server)
They need different settings:
Setting    Development  Production  
port                   3000                   80
database          local                cloud
debuglogs        ON                  OFF  
API keys             fake                real   

This is why we use environment variables.

🔐 1. What Are Environment Variables?
Think of them like secret notes your app reads.
Example env variables:
PORT=3000 ➙DB_URL=mongodb://localhost:27017 ➙JWT_SECRET=super_secret_key
We keep them outside the code to protect secrets.

📦 2. Using dotenv in Express
➣Install:
npm install dotenv
➣Create .env file:
PORT=4000
MODE=development


Load dotenv inside server.js:

require("dotenv").config();
const port = process.env.PORT; console.log("App running on port:", port);


🧪 3. Why This Is Important
🔒 Security
You never want API keys inside GitHub.
💼 Different Machines = Different Settings
Your code runs everywhere without changes.
🛠️ Configurable Behavior
Turn features ON/OFF easily.

🏭 4. Dev vs Production Configurations
development:
➙console.log allowed
➙local database
➙detailed error messages
production:
➙no console logs
➙cloud database
➙clean error messages
We can do:

if (process.env.MODE === "development") { console.log("DEBUG MODE ON"); }

🚪 5. Setting Up the Server Port

const port = process.env.PORT || 3000; app.listen(port, () => { console.log(Server running on port ${port}); });


If .env has PORT=5000, it uses that.
If not, fallback to 3000.

🧭 6. Folder Setup Example
project/
         │ server.js
         │ .env
         │ package.json
         └── data/
         └── routes/
         └── public/


🟥 7. Common Mistakes
Forgetting require("dotenv").config()
Variables will be undefined.
Pushing .env to GitHub
NEVER do this.
Using invalid names
Good:
API_KEY JWT_SECRET PORT
Bad:
my secret key
Week 7 Day 6 Challenges: (Error Handling + Environment Variables).

Challenge 1 — Build an Error-Safe GET Endpoint
➤Create a route:
GET /user/:id
Requirements:
➙If id is not a valid number → send an error using next(err)
➙If id is less than 1 → send a custom error "Invalid ID"
➙If everything is valid → return { "message": "User found", "id": ... }
➤Add a global error-handling middleware to catch all errors
➤The error response must be clean, like: { "success": false, "message": "Invalid ID" }
Hint: Use isNaN(Number(id)) to check validity.

Challenge 2 — Use dotenv to Configure Your App
Steps:
➤Create a .env file containing: ➙PORT=4000
➙MODE=development

➤Load environment variables using: require("dotenv").config();
➤Start your server using the port from .env
➤Print the mode: App running in development mode
➤Add a rule:
If MODE = "development" → console.log all requests
If MODE = "production" → no logs allowed
Hint: Use app.use() to create a simple logger middleware.

Challenge 3 — Build an API That Reads a File Safely

➤Create a route:
GET /notes
➤Requirements:
Read notes.json using fs
➙If the file is missing → trigger an error using next(err)
➙If JSON is broken → catch the error and forward it to the error handler
➙If everything is fine → return the notes
➤Your global error middleware should send clean output: { "success": false, "message": "Could not read notes file" }
Hint: Use:
try { ... } catch(err) { next(err); }


💥share your solutions in the group,
💥invite a friend,
      and as always —

💥stay well, stay curious, and stay coding ✌️
🚀 Want to Learn Python or Web Development?

Hey everyone 👋
I’m starting beginner-friendly PAID lessons for anyone who wants to learn Python basics or Web Development (HTML, CSS, JavaScript) from zero.

You can learn online or in person, whichever is comfortable for you.

If you're interested, just message:
“Python” or “Web Dev” to @Tarikey6

I’ll send you the full details and schedule.
Let’s level up your skills! 💻🔥
Forwarded from Channel Unwrapped
Channel Summary for 2025 🎉

Views
• 290 Total Posts
• 90 Average Views
• 26,367 Total Views

Top Post
• 1,337 Views
https://t.me/fullstackCampp/158

Activity
• 6 AM is when you were most active
• Monday is your most active day
• July is your most active month

@channel_unwrapped_bot
3
🚀 Week 7 Day 7 — Express Router & Useful NPM Packages

Alright campers 🔥💙
I hope you’re rested, hydrated, and still coding with curiosity. I apologize for not posting these weeks-life happened.
Today is our last lesson for Express basics before we move to even bigger things.
🌳 BIG IDEA:
When your project grows, all your routes in app.js become messy and hard to manage.
👉 The solution?
📦 Modularization
🛣️ Express Router
Just like a house has many rooms, your Express app should have many route files, not one chaotic room.

🧭 1️⃣ Why Router?
⚠️ PROBLEM: When your application grows:
app.get('/users')
app.post('/users')
app.get('/posts')
app.delete('/posts/:id')
app.put('/products/:id') ...


All inside app.js…
It becomes a mess 😵
🧠 Router allows you to split routes into logical files:

routes/users.js
routes/posts.js
routes/products.j

s

Each file handles only one thing → clean, organized code.

🛠️ 2️⃣ Create a Router

👉 Step 1: Create a folder
/routes
👉 Step 2: Create users.js

const express = require("express");
const router = express.Router();
// Routes

router.get("/", (req, res) => {
   res.send("Get all users"); });
router.post("/", (req, res) => {
   res.send("Create new user"); });
module.exports = router;


👉 Step 3: Use it in app.js


const usersRoute = require("./routes/users");
app.use("/users", usersRoute)
;

🎉 Now:
GET /users → gets all users
POST /users → creates new user
🪄 Cleaner, better, scalable.

📦 3️⃣ Another Example: posts.
js

const express = require("express");
const router = express.Router();
router.get("/", (req, res) => {
   res.send("All posts"); });
router.get("/:id", (req, res) => {
    res.send("Single post with ID " + req.params.id); });
module.exports = rout

er;

In app
.js:

const postsRoute = require("./routes/posts");
app.use("/posts", postsRo
ute);

Now you have:
/posts
/posts/123
💡 This is URL prefixing.

4️⃣ Benefits of Router
🔥 1. Clean code
🔥 2. Easier debugging
🔥 3. Can handle large projects
🔥 4. Can assign middleware per router
🔥 5. Can add separate controllers later

Imagine running a restaurant:
➙Kitchen
➙Cashier
➙Delivery
➙Cleaning
Each has their own place.
Same for routes.

🎯 Very Useful Pattern
Structure:

project/
       │ app.js
       │ package.json
       │
       ├─ routes/
               │
               ├─ users.js
               │
               ├─ posts.js
               │
       └─ controllers/
               ├─ usersController.js
               ├─ postsController.js


Later we will move logic from routes → controllers.

🧰 5️⃣ NPM Packages Commonly Used with Express
Below are must-know tools.
You’ll use them in almost every real backend.

1️⃣ morgan — Logging requests
Shows every request in console:
GET /users 200 12ms
➙ POST /login 401 5ms

Install:
npm install morgan
Use:
const morgan = require("morgan"); app.use(morgan("dev"));

2️⃣ cors — Cross Origin Resource Sharing
Frontend and backend are different origins.
If frontend is: http://localhost:5173 Backend is: http://localhost:3000
Browser blocks requests unless we allow.
Install:
npm install cors
Use:
const cors = require("cors"); app.use(cors());

3️⃣ uuid — Unique IDs
Instead of inventing IDs:
const { v4: uuid } = require("uuid"); const user = { id: uuid(), name: "John" };
Every new resource gets a unique identifier.

4️⃣ dotenv — Environment Variables
Instead of writing this in code:
const PORT = 3000;
Put it in .env:
PORT=3000 DATABASE_URL=...
Load it:
require("dotenv").config();
Use it:
app.listen(process.env.PORT);

5️⃣ nodemon — Auto restart server ❤️
When you save file → server restarts automatically.
Install:
npm install -g nodemon
Run:
nodemon app.js
This saves hours of pain.

📚 Documentation

📘 Express Router: https://expressjs.com/en/guide/routing.html
📘 Morgan: https://www.npmjs.com/package/morgan
📘 CORS: https://www.npmjs.com/package/cors
💥Week 7 Day 7 challenges

🧩 Challenge 1: Modular Blog API

👉 Build a small blog API using Express Router.
Requirements:
Create routes folder
🗂️ posts.js
🗂️ authors.js
Each file should export a router
Main app.js must use them like:
app.use("/posts", postsRouter); app.use("/authors", authorsRouter);
Endpoints to include (just dummy responses):
/posts/ → return list of posts
/posts/:id → return a single post
/authors/ → return list of authors
/authors/:id → return author details
Add middleware:
Use morgan for request logging
Use uuid to generate post IDs

🧩 Challenge 2: Notes API with Router + File Storage

👉 Build a simple Notes API, split into modules:
📁 /routes/notes.js
📁 /data/notes.json
Endpoints:
GET /notes → return all notes
POST /notes → add a new note
DELETE /notes/:id → delete a note
Requirements:
➙Use uuid to generate IDs
➙Use fs to read/write JSON file
➙Use express.json()` middleware
Extra:
Add CORS package so any frontend can access it

🧩 Challenge 3: Student Manager

👉 Create Student Manager with:
📁 /routes/students.js
📁 /data/students.json
Endpoints:
GET /students
POST /students
GET /students/:id
DELETE /students/:id
Use packages:
dotenv → load PORT from .env
nodemon → auto restart
.env example:
PORT=4000

🎁 Optional Bonus
Add routes with Router-level middleware:
Example:
router.use((req, res, next) => {
  console.log("Students Router  middleware running");
next(); });


When you are done:
💥share your solutions in the group,
💥invite a friend,
      and as always —

💥stay well, stay curious, and stay coding ✌️
Full Stack Camp pinned «👋 Welcome to Fullstack Summer Camp 2025! Learn. Build. Launch. Hey campers! 🌞 This is your one-stop space to master fullstack web development from scratch — right here on Telegram. Over the next 12 weeks, we’ll dive deep into: 🌐 Frontend: HTML, CSS, JavaScript…»
Full Stack Camp pinned «Week 1 Day 1  💡 What Is Coding? How It Works, Why It Matters, and How You Can Start 🌞 Welcome welcome welcome to Fullstack Summer Camp!  ሰላምምምም 👋 Today is Day 1 of our fullstack development journey. Whether you're here because you're curious, bored, or…»
Express review questions