curious is a UI/UX gallery prototype inspired by design discovery platforms. It uses the Next.js App Router, Tailwind CSS, and React Server Components to showcase masonry browsing, image-focused detail views, and an intercepted modal route without turning the project into a generic starter.
Design discovery products depend on fast visual scanning and low-friction detail views. The prototype needed to feel like a focused product surface instead of a generic image grid.
I built a compact Next.js gallery with masonry browsing, image-forward cards, quick-view routing, and detail composition through intercepted modal routes.
- Use App Router and React Server Components for the primary gallery surface
- Use parallel/intercepted routes for quick-view behavior
- Keep image cards stable with aspect-ratio handling
- Keep the scope deliberately narrow so the UX pattern is easy to evaluate
curious works as a UI/UX prototype case: it shows layout craft, App Router routing behavior, image handling, and focused product interaction.
- App Router structure with parallel/intercepted route behavior
- Responsive masonry-style layout for visual browsing
- Image detail composition with exact-fit aspect-ratio handling
- A small, focused UI product surface built from reusable components
- Next.js (App Router, RSC)
- Tailwind CSS
next/imagewith remote patterns
- Masonry-style gallery using CSS columns
- Intercepted modal route for quick view:
@modal/(.)shots/[id] - Exact-fit image presentation with aspect-ratio containment
- “Become a part” floating CTA
pnpm install
pnpm devApp runs on http://localhost:3000.
src/app/page.tsx: Gallery and CTAsrc/components/shot-card.tsx: Shot tilesrc/components/shot-detail.tsx: Detail layout (image + info)src/components/modal.tsx: Intercepted modal wrappersrc/app/@modal/(.)shots/[id]/page.tsx: Modal routesrc/lib/shots.ts: Mock data
Open a PR with improvements or new shots. For assets, prefer WebP and include dimensions.