Case Study

Next.js TODO App

Built as a front-end case study, this project showcases how to pair the Next.js App Router with a resilient client-side data layer powered by React Query, Zod validation, and ts-pattern result handling.

The TODO experience mirrors a production-grade workflow with optimistic updates, persistent cache, and shareable filters through URL parameters.

Open TODO App

About This Project

CRUD todos with optimistic updates
Search, filter, and paginate via URL params
Detail & edit page with guarded deletes
Validation powered by Zod and ts-pattern

Tech Stack

Next.js App Router + React Query
Zustand for UI state
Zod + ts-pattern + react-hook-form
Tailwind CSS with dark mode

Architecture Notes

Repository abstraction over async localStorage
Result<T, E> modeling with exhaustive matches
React Query cache keys bound to filter state
Feature-first directory structure