← back to all projects
Event Countdown Dashboard
Parts 0–2 — React Fundamentals
Why This Project
A countdown dashboard forces you to work with time — something that's surprisingly
tricky in React. You'll deal with intervals inside useEffect (and cleaning them up),
date math, derived state, controlled forms, and conditional rendering based on
whether events are upcoming, live, or expired. This isn't a todo list with a timer
slapped on — the timer IS the core feature, and getting it right requires solid
understanding of React's render cycle.
What to Build
A personal dashboard where you add upcoming events (title, date, time, optional
category like "work", "personal", "travel") and see live countdown timers ticking
for each one. Events are sorted by nearest-first. When an event's time arrives,
it moves to a "past events" section. Users can pin important events to the top.
Persist everything to JSON Server.
Requirements
- Create with Vite — no CRA
- Add event form: title, datetime picker, optional category, optional color
- Each event card shows a live countdown (days, hours, minutes, seconds) that ticks every second
- Events sorted by nearest deadline first; pinned events always on top
- When an event expires, it automatically moves to a "past events" collapsible section
- Filter events by category
- Edit and delete events
- All data persisted to JSON Server via axios
- useEffect cleanup: clear intervals when components unmount or events expire
- Handle edge cases: what if someone adds an event in the past? What if two events have the same time?
Skills Practiced
useState
useEffect
setInterval cleanup
Date objects
derived state
controlled forms
conditional rendering
sorting
axios CRUD
JSON Server
Pain Point to Notice
Running setInterval inside useEffect is where most people first encounter stale
closures. Your interval callback captures the state value at the time it was created,
not the current value. You'll need to either use the functional form of setState or
manage refs. This is a React fundamental that FSO teaches but doesn't make you feel.
Also notice how much state lifting you need when the filter controls, event list,
and form all need to coordinate — that's foreshadowing for Part 6.