Focuses on the raw "View" layer of the web. Over three sessions, students will move beyond basic syntax to understand the Document Object Model (DOM) tree. They will hand-code a responsive "Personal Portfolio" landing...
Focuses on the raw "View" layer of the web. Over three sessions, students will move beyond basic syntax to understand the Document Object Model (DOM) tree. They will hand-code a responsive "Personal Portfolio" landing page using semantic HTML5 and CSS Grid/Flexbox, culminating in writing raw JavaScript to manipulate DOM elements. This establishes the baseline for how the browser renders the View before frameworks abstract it away.
Focuses on how the View requests data. Students will master the Event Loop, Promises, and async/await. The deliverable is a "Dynamic Weather Dashboard" that fetches real-time data from a public API. This introduces the concept that the View must interact with external data sources (External Controllers), parsing JSON responses to update the UI without page reloads.
Focuses strictly on the 'V' (View) in MVC. Students will decompose a complex UI into reusable, isolated pieces using React. They will build an interactive "Product Gallery," focusing strictly on JSX and Props. They will learn that the View’s job is solely to present data provided to it, reinforcing the separation of concerns between presentation and logic.
Focuses on interactivity within the View. Students will deep-dive into React Hooks (useState, useEffect). They will engineer a "Task/Kanban Board" allowing users to create and filter items. This teaches the difference between "Application State" (Data) and "UI State" (is this menu open?), a critical distinction in MVC architectures.
Focuses on the framework that holds the MVC structure together. Students will migrate to the Next.js ecosystem. They will build a "Multi-page Blog" utilizing the App Router. They will learn how file-system-based routing acts as the traffic director for the application, mapping URLs to specific Views and Layouts.
Focuses on where the View is constructed. Students will experimentally compare Client-Side Rendering (CSR) against Server-Side Rendering (SSR). They will build a "News Aggregator" that pre-renders HTML on the server. They will learn how the server can act as the primary View generator to improve SEO and performance before the client JavaScript takes over.
Focuses on the 'C' (Controller). Students will learn to write backend logic within Next.js using API Routes (Serverless Functions). They will implement the backend for a "Feedback System," handling HTTP methods (GET, POST). They will learn that the Controller’s job is to receive input, validate it, process business logic, and determine the response, keeping this logic out of the React components.
Focuses on the 'M' (Model). Students will connect their application to a persistent cloud database (PostgreSQL or MongoDB) using an ORM like Prisma. They will define strict Data Schemas for an "Inventory Management System." This lab emphasizes that the Model represents the data structure and business rules (constraints) independent of how that data is displayed or accessed.
Focuses on the complete data flow. Students will refactor their Inventory System into a fully functional CRUD application. They will wire the system so that a user action (View) triggers an API call (Controller), which queries the Database (Model), and returns data to update the UI. This solidifies the "One-Way Data Flow" and separation of duties inherent in MVC.
Focuses on securing the MVC pipeline. Students will implement secure login flows (NextAuth/Auth.js) to protect their Controllers (API routes) and Views (Private Pages). The final activity involves deploying a "Real-time Chat Interface" to a production environment (Vercel), configuring environment variables, and setting up a CI/CD pipeline to manage their full-stack application.