Pieces942

Compact, self-contained widgets that behave like assets. Drop them into any block, card, or page to add a small touch of polish without rewriting the surrounding UI.

Prof. Lira VasquezInstructor · Announcement
Office hours moved to Thursday

I'll be out Tuesday for a conference. Drop in Thursday 15:00 – 17:00 instead — same Zoom link in the syllabus.

Posted 2 hours ago

Class Announcement

education17

Left-ruled amber announcement from an instructor with a megaphone chip, title, body, and timestamp.

Lesson 6 · Hooks in depth
useEffect runs after the DOM commit, not during render.Cleanup runs before the next effect, and on unmount.
Ask Priya about the stale-closure example in office hours.

Lesson Highlights

education18

Saved-quote card grouping highlighter-tinted excerpts and an italic personal note beneath them.

Live42:18 into class
Live class · Typescript generics
1423

Live Class

education19

Dark live-classroom widget with a red live chip, attendee and raised-hand counts, and mic/video toggles.

Transcript · 12:48 of 28:14
12:31
Prof. VasquezSo whenever you see a generic constraint like `T extends`, ask yourself what the caller will pass.
12:42
Prof. VasquezThis pattern prevents us from widening the type back to unknown.
12:58
PriyaWhat happens if we omit the constraint entirely?

Video Transcript

education20

Timestamped transcript panel where the currently-playing line picks up a sky background highlight.

Prof. Lira Vasquez
Prof. Lira VasquezSenior instructor · React track
Top-rated
24,182 students4.9 average

Instructor Card

education21

Teacher profile with a gradient avatar wearing an amber award badge, subject line, and rating row.

Top of the cohort
1
Priya Shah
Priya Shah98
2
Noor Ahmed
Noor Ahmed94
3
Jordan Reyes
Jordan Reyes91
4
Beste Sözen
Beste Sözen89

Student Roster

education22

Ranked student list with rank digits, avatar initials, and emerald score pills on the right.

CS 401 · Syllabus
W1Fundamentals of composition
W2State & reactivity
W3Hooks in depth
W4Performance patterns
W5Server components

Syllabus

education23

Weekly syllabus where completed weeks get an emerald W tile and their titles are struck through.

Live workshopLive workshop · TypeScript generics
Thu, May 218:00 UTC+390 minutes
412 enrolled · 88 seats left

Live Workshop

education24

Upcoming workshop card with a pulsing live pill, date/time/duration line, enrollment count, and a CTA.

Backend engineer path12-course track · beginner to senior
Path
1Node.js fundamentals8h
2Data modeling with Postgres10h
3APIs & authentication14h
4Production operations16h
Total 48 hours

Learning Path

education25

Multi-course path card listing numbered steps, per-step hours, and a primary Path tag in the header.

The office hours alone were worth the tuition. I came in wanting to learn Next.js and left with a new role.

Andrea Kim
Andrea KimCohort 12 · Graduated Mar 2026

Student Testimonial

education26

Graduate testimonial with five-star rating, a body paragraph, and an avatar-cohort footer.

Spanish vocab · Unit 412 due today
resolverReview
compartirLearning
el idiomaNew
bienvenidaMastered

Flashcard Deck

education27

Spaced-repetition deck summary with italic card fronts and new, learning, review, or mastered pills.

Midterm essayDue Thu 24 Apr · 23:59
79%
142Submitted
8Late
30Missing
180 students in cohort

Assignment Stats

education28

Teacher dashboard tile with a progress bar and three tinted tiles counting submitted, late, and missing.

Elara Martin
Student IDElara MartinGrade 7 · 7BRedwood Middle School
STD-24-00281

Student ID

education29

ID-card layout with an indigo photo panel on the left and a name, grade, school, and validity footer.

Ask me anything · Career pivotsCohort 12 · Mentor hours

Share your story and the thing you wish you knew earlier. I'll reply over the weekend.

38 answered7 waiting

AMA Thread

education30

Mentor AMA card with title, course subline, clipped description, and answered/waiting counts.

Midnight Tape · LiveSat, Jun 14 · 21:00Zorlu PSM · Istanbul
SectionGA Floor
SeatA · 042
MT-7Z91-X2Q

Event Ticket

event1

Notched gradient concert ticket with section, seat, and a vertical mono ticket code on the stub.

Team offsite · BodrumMay 12 – 15
28 going4 maybe

RSVP Row

event2

Invitation card with three emerald/amber/rose response buttons and a footer tallying current responses.

Opening-day speakers
Priya Shah
Priya ShahDesign · Linear
Kian Okafor
Kian OkaforEngineering · Beste

Speaker Lineup

event3

Two-by-two speaker grid with gradient avatars, name and company-role lines per tile.

Shipmas 2026Dec 1 · 09:00 UTC
42days
08hrs
21min
11sec

Event Countdown

event4

Dark foreground countdown with event title, start time, and a four-unit time tile grid below.

Zorlu PSM · Grand HallLevent · BeşiktaşIstanbul, Türkiye
2,400 capacityMetro M6 · Zincirlikuyu exit

Venue Card

event5

Venue panel with a gridded mini-map tile, name, address, city, capacity, and an italic directions line.

Day 1 · Fri, May 8
09:00
Opening keynoteMain stage
10:00
Designing with intentTrack A
11:00
Coffee & networking
11:30
Component systems workshopWorkshop room

Conference Agenda

event6

Conference day schedule with left-ruled session rows color-coded by keynote, talk, break, or workshop.

Conference passes
Student· 42 left
$89
Early bird· 18 left
$249
Standard· 124 left
$399
VIP· Sold out
$1,200

Ticket Tiers

event7

Pass-level list where a highlighted tier picks up a primary ring and sold-out rows dim with a note.

BSAKPSKOJR+123
128 attendingBeste Sözen, Andrea Kim and 126 others are going

Attendees Strip

event8

Stacked avatar row with a +N overflow chip, total attendee count, and a social-proof summary line.

Live14 min in
2,148 watching
Shipping in public · weeklyHosted by Beste Sözen

Live Now

event9

Live-streaming card with a rose live pill, viewer count, minutes-in marker, and a Join stream button.

Admit oneDMX-4K91-N8
Beste SözenDesign Matters · Day 1
SeatFloor A
GateGate 2 · 09:00

Entry QR

event10

Scannable entry card with a fake QR grid on the left and attendee, code, seat, and gate info on the right.