Assignments · Syllabus · Course book · Blog · Slides · Practice (ungraded)
A3
JavaScript and data-driven UI
Due Sunday, October 25, 2026 · 100 pts
Replace hardcoded markup with data. Render courses, modules, and people from JSON; encode IDs in the URL; keep the UI in sync with the structures you define.
Course website accounts. Need an account? Sign up first with the same Northeastern email you use on Canvas, then Sign in. This site is not Canvas, and accounts are not pre-provisioned. Using your Canvas email lets us map site progress back to the roster.
Sign in to see your submission status
Submit URLs
Run checks on a public Vercel URL works without an account. Submitting URLs is not unlocked by a calendar date. Submit stays closed until you are signed in with the same Northeastern email as your Canvas/FACT roster, and that email is on the course site roster. After a submission is stored, the button says Update submission.
Paste the Vercel address for your a3 branch — the one Vercel made when you pushed a3 (§3.11), which looks like https://webdev-client-git-a3-yourname.vercel.app — and your repository’s GitHub URL (the repository page or any branch page works). Checks open that address, then Labs, Lab 3 (and two /labs/lab3/add pages), the Dashboard, and the Kambaz course screens.
Run checks on a public Vercel URL works without an account. Submitting URLs is not unlocked by a calendar date. Submit stays closed until you are signed in with the same Northeastern email as your Canvas/FACT roster, and that email is on the course site roster. After a submission is stored, the button says Update submission.
No checks yet. Run to score this page. Checkmarks stay on this page only.
Run checks updates this page only. Checkmarks stay on this page only. Sign up if you don’t have a course-website account yet, then Sign in with the same Northeastern email you use on Canvas to submit your GitHub and Vercel URLs.
Delivery
Push an a3 branch on the same webdev-client repo and submit that branch’s Vercel URL. Run npm run build before you push.
a3 GitHub branch
Create, commit, and push a branch named a3 on the same public repository. Submit your repository’s GitHub URL (the repository root or the …/tree/a3 branch URL both work). The URL must load.
3 pts · §3.11
Vercel branch deployment
Submit the Vercel address made for your a3 branch (§3.11: each push to a3 gets its own address that contains the branch name). It looks like https://webdev-client-git-a3-yourname.vercel.app — the part before .vercel.app includes -git-a3. Deployment Protection must be off so anyone can open it.
3 pts · §3.11
Name and GitHub link
The Labs pages show your full name (first name first, matching Canvas) and a link to your GitHub repository (https://github.com/<you>/<repo>).
3 pts · §3.11
Labs links
The Labs pages link to /labs/lab1, /labs/lab2, and /labs/lab3, and to your Kambaz screens.
3 pts · §3.11
Lab 3 — JavaScript and components
Build Lab 3 at /labs/lab3 from §3.2–§3.8. Each item says what the deployed page must show; you may change labels and sample values.
Lab 3 page
/labs/lab3 shows a titled section for each exercise in §3.2–§3.8, in book order (at least 20 section headings).
4 pts · §3.2
JSON.stringify
A <pre> pretty-prints an object that has at least one nested object and one array (JSON.stringify(obj, null, 2)).
3 pts · §3.4.11
Destructing imports table
A table with at least 4 rows of 3 cells compares the import styles (default object, namespace, named functions).
3 pts · §3.4.16
Style objects
At least 3 boxes colored with inline style={{ backgroundColor: … }} objects.
3 pts · §3.6.2
CSS classes
At least 4 boxes colored by classes from a stylesheet you import (className, not inline styles).
3 pts · §3.6.1
Client and Server Components
A Client Component prints the current pathname (/labs/lab3), and a Server Component prints a list of at least 3 file names read on the server.
3 pts · §3.7
Labs TOC highlight
On each Lab page the TOC link for that lab is marked differently from the others (style, class, or aria-current), and the marking moves when you change labs (/labs/lab1 vs /labs/lab3).
3 pts · §3.8.2
Path parameters
/labs/lab3 links to at least two /labs/lab3/add/<a>/<b> URLs, and /labs/lab3/add/<a>/<b> shows a + b for any two numbers (for example /labs/lab3/add/12/30 shows 42).
5 pts · §3.8.3
If Else: not false1On your own
The If Else section shows a third paragraph that reads not false1.
1 pts · §3.2.4
Ternary: Good morningOn your own
A second ternary on const hour = 9 shows Good morning.
1 pts · §3.2.5
Inline conditional: Guest InlineOn your own
The inline conditional section also shows Guest Inline.
1 pts · §3.2.6
nullValue ?? "default"On your own
A line shows nullValue ?? "default" and its result, default (any quotes; =, :, is or → between them).
1 pts · §3.2.7
House ownersOn your own
Under bathrooms, an <h5> heading (the book uses owners) followed by the owners joined with commas.
1 pts · §3.4.12
Imports table: fifth rowOn your own
The import-styles table has a fifth row for add(10, 20) whose three cells each show 30.
1 pts · §3.4.16
Optional chaining: garageOn your own
A line shows house.garage?.cars ?? 0 and its result, 0 (=, :, is or → between them).
1 pts · §3.4.17
Classes: sixth boxOn your own
A box of your own after the fifth, so the Classes section has six colored boxes.
1 pts · §3.6.1
Styles: fourth boxOn your own
A fourth box styled by a bgGreen object, so the Styles section has four colored boxes.
1 pts · §3.6.2
Pathname lengthOn your own
Under the pathname, a paragraph reads Pathname length: 10 on /labs/lab3.
1 pts · §3.7.1
Path Parameters: third linkOn your own
Path Parameters shows three /labs/lab3/add/<a>/<b> links, with numbers of your choice.
1 pts · §3.8.3
Kambaz — screens from JSON data
Drive Kambaz from the JSON files in app/(kambaz)/database (§3.10). Keep at least 3 courses, and at least 2 courses that each have modules, assignments, and enrolled users.
Kambaz Navigation
The Kambaz sidebar is rendered from an array, and only the item for the current screen is highlighted: Dashboard on /dashboard, Courses inside a course.
5 pts · §3.10.1
Dashboard
The Dashboard shows one card per course in courses.json (at least 3), and each card links to /courses/<course _id>/home.
5 pts · §3.10.3
Course from the URL
Clicking a Dashboard card opens /courses/<_id>/home, and the course heading shows that card’s course name. A different card shows a different name.
5 pts · §3.10.4
Course Navigation
Course Navigation links (Home, Modules, Assignments, People) keep the current course’s _id in the URL.
5 pts · §3.10.5
Breadcrumb
The course heading shows the course name and the current section, and changes when you switch between Home, Modules, and Assignments.
5 pts · §3.10.6
Modules
/courses/<_id>/modules lists only that course’s modules from modules.json. Two courses show different module lists.
5 pts · §3.10.7
Assignments
/courses/<_id>/assignments lists only that course’s assignments, each linking to /courses/<_id>/assignments/<assignment _id>. Two courses show different lists.
5 pts · §3.10.8
Assignment EditorOn your own
The Assignment Editor’s name field shows the title of the assignment you clicked; two assignments show two different titles (On your own).
5 pts · §3.10.8.1
People
/courses/<_id>/people/table lists only the users enrolled in that course (users.json + enrollments.json). Two courses show different rosters.
5 pts · §3.10.9