Assignments · Syllabus · Course book · Blog · Slides · Practice (ungraded)
A4
Client state
100 pts
Make the UI editable. Use React state for forms and Zustand stores for shared Kambaz data (courses, modules, account). Redux labs are literacy; the assignment store is Zustand.
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 a4 branch — the one Vercel made when you pushed a4 (§4.12), which looks like https://webdev-client-git-a4-yourname.vercel.app — and your repository’s GitHub URL (the repository page or any branch page works). Checks open that address signed out, then Labs, Lab 4 (and two path-parameter pages), the Dashboard, the Modules screens, and Sign in and Profile.
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 a4 branch on the same webdev-client repo and submit that branch’s Vercel URL. Run npm run build before you push.
a4 GitHub branch
Create, commit, and push a branch named a4 on the same public repository. Submit your repository’s GitHub URL (the repository root or the …/tree/a4 branch URL both work). The URL must load.
3 pts · §4.12
Vercel branch deployment
Submit the Vercel address made for your a4 branch (§4.12: each push to a4 gets its own address that contains the branch name). It looks like https://webdev-client-git-a4-yourname.vercel.app — the part before .vercel.app includes -git-a4. Deployment Protection must be off so anyone can open it.
3 pts · §4.12
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 · §4.12
Labs links
The Labs pages link to /labs/lab1 through /labs/lab4, and to your Kambaz screens.
3 pts · §4.12
Lab 4 — events, state, and stores
Build Lab 4 at /labs/lab4 from §4.2–§4.7. Each item says what the page shows when it first loads; you may change labels and starting values.
Lab 4 page
/labs/lab4 shows a titled section for each exercise in §4.2–§4.7 (at least 15 section headings and 15 buttons).
5 pts · §4.2
Counters
At least 4 counters, each a heading (or line) ending in the current count with its Up/Down buttons next to it (useState, parent/child, Zustand, and Redux counters).
6 pts · §4.2.4
Boolean state
A checkbox bound to a boolean state variable (a clickable checkbox, not a read-only one).
4 pts · §4.2.5
String state
A text input whose value is also printed on the page (a controlled string).
4 pts · §4.2.6
Object city (On your own)On your own
The printed object also has a city property, shown in its own input.
3 pts · §4.2.8
Array state
A list of at least 3 items, each with its own Delete button, next to an Add button.
5 pts · §4.2.9
Todo lists
At least two todo lists (Zustand and Redux), each with a title input, an Add button, and at least 3 items with Edit/Delete buttons.
7 pts · §4.5.2
Query and path parameters
/labs/lab4 links to a query-parameter URL (?a=…&b=…) and a path-parameter URL (…/<a>/<b>), and /labs/lab4/url-encoding/path-params/<a>/<b> shows a + b for any two numbers.
7 pts · §4.3.3
Kambaz — client state
Make Kambaz stateful with the Zustand stores and the account context from §4.10. Graders open your site signed out.
Dashboard course form
Above the course cards the Dashboard has the course form (name and description fields) with Add and Update buttons.
5 pts · §4.10.2.1
Course number and start date (On your own)On your own
The course form also has fields for the course number and start date (at least 4 fields, one showing a date).
4 pts · §4.10.2.3
Edit and Delete on cards
Every course card (at least 3) has Edit and Delete buttons.
6 pts · §4.10.2.2
Modules controls
/courses/<_id>/modules has a + Module button, and each module row has edit (pencil) and delete (trash) controls next to its other icons.
8 pts · §4.10.4
Sign in screen
/account/signin shows a username field, a password field, and a Sign in button.
6 pts · §4.10.5.2
Account Navigation
Signed out, Account Navigation links to Sign in and Sign up but not Profile.
5 pts · §4.10.5.4
Profile needs a user
Signed out, /account/profile shows no user’s details (it redirects to Sign in or renders nothing).
4 pts · §4.10.5.5