Wildpics

Wildpics is a Next.js 13 boilerplate demo that shows how to combine intercepting routes and parallel routes to display a modal image viewer without reloading the underlying gallery page.

What is Wildpics?

Wildpics is an open-source demo application built by JaleelB that shows how Next.js 13's intercepting routes and parallel routes can load an image modal without reloading the underlying page. The app presents a gallery of animal photos; clicking a thumbnail opens that image in a modal overlay while the gallery URL stays in place. It is built on the Next.js 13 App Router with TypeScript, styled with Tailwind CSS, and can be run locally or deployed to Vercel with the included one-click deploy button.

Key Features

• Intercepting routes — Uses Next.js 13's file-based intercepting route convention to match an image route and render it inside the current layout rather than as a full navigation.
• Parallel routes — Renders the modal as a parallel route slot so the gallery page stays mounted and does not re-render when the overlay opens.
• Modal image viewer — Displays each animal photo in a centered overlay with a backdrop, keeping the gallery context visible and interactive underneath.
• Next.js 13 App Router — The demo uses the app directory structure for both the gallery page and the intercepted modal route.
• TypeScript codebase — The repository is written in TypeScript, giving typed props and route handling out of the box.
• Tailwind CSS styling — Utility classes from Tailwind handle the layout, grid, and overlay styling without a separate CSS framework.
• Vercel deployment — A one-click "Deploy with Vercel" button clones the GitHub repo into a new Vercel project, and a live demo is hosted at wildpics.vercel.app.

Who is it for?

• Next.js developers who want a concise, working example of intercepting and parallel routes before applying the pattern to their own projects.
• Frontend engineers who need a modal overlay that preserves the current page state and URL, such as product quick-view or photo lightbox features.
• Learners exploring the App Router who prefer reading a small, real codebase over documentation examples.

What can you do with Wildpics?

• Study the route structure: Clone the repo and inspect the app directory to see exactly which files create the gallery, the modal, and the interception logic.
• Use it as a starter: Run yarn dev after installing dependencies, then modify the gallery images and routes to build your own image-lightbox feature.
• Deploy a live demo: Click the Vercel deploy button to get a shareable URL with zero additional configuration.

How does Wildpics work?

The development flow is straightforward: clone the repository, install packages with yarn, and start the app with yarn dev. The app serves a gallery of animal images; when you click one, the intercepting route matches the image URL and renders it in a modal slot defined by a parallel route, so the gallery page remains behind the overlay without a full reload.

This demo is intentionally minimal — it focuses only on the routing paradigm of intercepting and parallel routes, with no authentication, database, or API layer.