Snippet Master: a code snippet manager built with Next.js

The problem

Useful pieces of code end up scattered across notes, chats and gists, and they are hard to find again. A developer needs one place to save a snippet, open it later and keep it up to date.

The solution

Snippet Master lists every saved snippet as a card on the home page. Each snippet has its own page, and the edit page uses the Monaco editor, the same editor that powers VS Code, so changing code feels familiar.

Features

• Create a snippet with a title and its code
• Server-side checks that give a clear message when the title or the code is too short
• Home page that lists all snippets, with a friendly empty state
• A page for each snippet at /snippet/[id]
• Edit snippets in the Monaco code editor and save the changes
• Delete a snippet when it is no longer needed
• Loading, not-found and error screens for each route

How it is built

The app uses the Next.js App Router. The home page is a server component that reads the snippets straight from the database with Prisma, so there is no separate API to call from the browser.

Creating, saving and deleting are Next.js server actions. Each one writes to the database, calls revalidatePath so the lists show fresh data, and then redirects the user to the right page. The data model is small and clear: a Snippet has an id, a title and its code, stored in SQLite.

Try it and read the code

The live demo is open to visit, and the full source is on GitHub. If you need something similar, see my Next.js development service.

Technologies

The app is built with Next.js 16 and React 19 in TypeScript. Prisma talks to a SQLite database, the interface uses Tailwind CSS 4 with shadcn/ui and Radix UI components, and the Monaco editor provides the code editing experience. The live demo is hosted on Vercel.

• Next.js 16
• React 19
• TypeScript
• Tailwind CSS 4
• Prisma
• SQLite
• shadcn/ui
• Monaco Editor