SP26 Web Tech

February 1, 2026

Whats Group

Submit your git repo

Assignment 1 – Landing Page Development (Plain CSS Only)

Objective

The objective of this assignment is to strengthen your understanding of HTML structure and CSS styling fundamentals by recreating a professional website landing page using only plain CSS (no frameworks).

Repository Instructions

  1. Go to your public GitHub repository.
  2. Create a folder named assignment-1
  1. All files related to this assignment must be placed inside this folder.

Task Requirements

  1. Choose any reference website that you like.
    • Preferably select an E-commerce website (Amazon, Daraz, Shopify store, etc.).
  2. Study the design carefully.
  3. Recreate ONLY the Landing Page (Home Page) of the selected website.

Technical Rules

You must follow these strict guidelines:

  • ✅ Use HTML5
  • ✅ Use Plain CSS only

Lab Task 1 – Make the Landing Page Responsive

🎯 Objective

The purpose of this lab task is to help you understand responsive web design and how to build mobile-friendly layouts using only plain CSS.

In this task, you will improve your previous Assignment 1 Landing Page by making it fully responsive for mobile devices.

📂 Repository Instructions

  1. Go to your existing public GitHub repository.
  2. make folder labtask-1
  1. Update your existing project to make it responsive.
  2. Push the updated code to GitHub.

🌐 Task Requirements

You are required to:

  • Make your previously created landing page mobile friendly
  • Ensure proper layout adjustments for:
    • Mobile devices (max-width: 768px)
    • Smaller screens (optional bonus: tablet view)

🛠 Technical Rules

You must strictly follow:

  • ✅ Use HTML5
  • ✅ Use Plain CSS only
  • ✅ Use Media Queries

Assignment 2

Making the Top Menu Responsive (Using Plain CSS & JavaScript)

Objective

In this assignment, you will enhance your existing Term Project by making the top navigation menu fully responsive using only plain CSS and vanilla JavaScript (no frameworks or libraries).

Background

Modern web applications must function seamlessly across desktops, tablets, and mobile devices. A responsive navigation menu improves usability, accessibility, and overall user experience.

You will modify your current project to ensure the top menu adapts properly to different screen sizes.

Requirements

1. Responsive Layout (CSS)

  • Use media queries to adjust the layout for smaller screen sizes.
  • On desktop view:
    • Display the full horizontal navigation menu.
  • On tablet/mobile view:
    • Collapse the menu into a hamburger (☰) icon.
    • Hide the navigation links by default.
  • Ensure:
    • Proper spacing and alignment
    • Readable font sizes
    • Touch-friendly clickable areas

2. Interactive Behavior (JavaScript)

  • Use vanilla JavaScript only (no Bootstrap, jQuery, Tailwind, etc.).
  • Implement functionality so that:
    • Clicking the hamburger icon toggles the visibility of the menu.
    • The menu opens and closes smoothly.
    • (Optional Bonus) Close the menu automatically when a navigation link is clicked.

Lab Task Two.

Convert your landing page into express based application

consult https://github.com/mua22/merrn-web-book-demos/tree/main/node/04-express-with-ejs for boiler plate code. All instructions and help is written in helper code

Assignment 3: Dynamic Product Catalog Integration

Objective: Enhance your existing Express/EJS e-commerce application by implementing a dynamic product display system. You will transition from static landing pages to a database-driven product catalog featuring server-side pagination, filtering, and sorting.

Task Overview

Your goal is to create a /products route that fetches data from your MongoDB collection and renders it using an EJS template. The page must be able to handle large datasets efficiently and allow users to find specific items easily.

Requirements

1. Database Integration & Schema

  • Ensure your Mongoose Product Schema includes at least: name, price, category, rating, and stock.
  • Seed your database with at least 20-30 sample products to properly test pagination.

2. Server-Side Pagination

  • Implement a limit of 8 products per page.
  • Display pagination controls (e.g., “Previous”, Page Numbers, “Next”) at the bottom of the page.
  • Query Parameters: Use ?page=n to handle navigation.

3. Filtering & Searching

Search Bar: Add a functional search input to filter products by name.

Category Filter: Allow users to filter products by category (e.g., Electronics, Fashion, Home).

Price Range: Implement a filter for minimum and maximum price.

Assignment 4: E-Commerce Administration & Management System

Objective: Extend your e-commerce application by building a secure Admin Panel. This module will allow authorized users to manage the product inventory and monitor site data without interacting directly with the database via external tools.

Task Overview

You will create a restricted /admin area. This section of the site must provide a dashboard to view all products and forms to perform CRUD (Create, Read, Update, Delete) operations.

Requirements

1. Admin Layout & Navigation

  • Create a separate EJS layout or a distinct navigation sidebar for the Admin Panel.
  • The dashboard should display a summary table of all products, showing key details like Price, Stock, and Category.

2. Product Management (CRUD)

  • Create: A dedicated page with a form to add new products to the database. Include validation to ensure no empty fields are submitted.
  • Update: An “Edit” button for each product that populates a form with existing data, allowing changes to be saved.
  • Delete: A “Delete” button for each product.
    • Requirement: Implement a confirmation “Pop-up” or “Alert” to prevent accidental deletions.

3. Image Upload Handling

  • Integrate Multer (or a similar middleware) to allow admins to upload product images directly from their local machine.
  • Ensure images are stored in a /public/uploads directory and the file path is saved correctly in the database.

Lab Assignment 3: User Authentication & Role-Based Access Control

Objective: Secure your e-commerce platform by implementing a robust authentication system. This will allow users to create accounts, log in securely, and distinguish between a standard Customer and an Admin.

Task Overview

You will integrate authentication logic into your Express application. This involves hashing passwords for security, managing user sessions, and ensuring that only authorized individuals can access the Admin Panel created in the previous assignment.

Requirements

1. User Model & Registration

  • Schema: Create a User schema with fields for name, email, password, and role (defaulting to “customer”).
  • Password Hashing: Use bcryptjs to hash passwords before saving them to the database. Never store plain-text passwords.
  • Validation: Ensure emails are unique and passwords meet a minimum length (e.g., 6+ characters).

2. Login & Session Management

  • Login Logic: Verify the user’s email and compare the hashed password using bcrypt.
  • Sessions/Cookies: Implement express-session and connect-mongo to maintain user state across the site.
  • Dynamic UI: Update the navigation bar to show “Login/Register” for guests, and “Logout/My Profile” for logged-in users.

3. Authorization Middleware

  • Protected Routes: Create a middleware function (e.g., isLoggedIn) to prevent unauthenticated users from accessing the checkout page.
  • Role-Based Access (RBAC): Create an isAdmin middleware. This must check if the logged-in user’s role is “admin.”
  • Security: Apply the isAdmin middleware to all routes within your Admin Panel. If a regular customer tries to access /admin, redirect them with an “Access Denied” message.

4. Flash Messages

  • Integrate connect-flash to provide feedback to the user (e.g., “Invalid username or password,” “You have successfully logged out,” or “Welcome back, [Name]!”).

Lab Assignment 4: Building a Secure RESTful API with JWT

Objective: Shift your e-commerce application toward a headless architecture by exposing a RESTful API. You will implement JSON Web Tokens (JWT) to allow external clients (like mobile apps or React front-ends) to authenticate and interact with your database securely.

Task Overview

You will create a new set of routes prefixed with /api/v1. These routes should return JSON data instead of rendering EJS templates. To protect sensitive actions, you will implement a stateless authentication flow using JWT.

Requirements

1. API Route Structure

  • Public Endpoints:
    • GET /api/v1/products: Returns a list of all products (include pagination/filtering logic from earlier).
    • GET /api/v1/products/:id: Returns details for a single product.
  • Protected Endpoints (Requires JWT):
    • POST /api/v1/orders: Allows a logged-in user to submit an order.
    • GET /api/v1/user/profile: Returns the authenticated user’s data.

2. JWT Implementation

  • Sign-in Endpoint: Create a POST /api/v1/auth/login route. Upon successful email/password verification, the server must generate and return a JWT token.
  • Payload: The token should encode the user_id and role.
  • Security: Use a strong JWT_SECRET stored in an environment variable (.env). Set an expiration time for the token (e.g., 1h).

3. Authentication Middleware

  • Develop a verifyToken middleware that:
    1. Extracts the token from the Authorization header (using the Bearer <token> convention).
    2. Verifies the token using the secret key.
    3. Appends the decoded user information to the req object for use in subsequent controllers.
    4. Returns a 401 Unauthorized or 403 Forbidden error if the token is missing or invalid.