Snippets - Code Snippet App w/ Next.js, Prisma and PostgreSQL

The Challenge ⚡️

I wanted to build a beginner-friendly Next.js app to help aspiring developers get started with open-source.

This is a very small project as of now, and any contributions will be highly appreciated.

Some of the core features and challenges include:

• Integrating Prisma with PostgreSQL for both development and production environments.
• Developing functionality to create, list, delete, and edit code snippets.
• Combining Shadcn/ui, Prisma, and TailwindCSS with Next.js 14.
• Implementing React Hot Toast with server components.

Project Structure 📁

|-- prisma
|   |-- dev.db
|   |-- migrations
|   |-- schema.prisma
|-- src
|   |-- actions
|   |   |-- index.ts
|   |-- app
|   |   |-- favicon.ico
|   |   |-- globals.css
|   |   |-- layout.tsx
|   |   |-- page.tsx
|   |   |-- snippets
|   |       |-- [id]
|   |       |   |-- edit
|   |       |   |   |-- loading.tsx
|   |       |   |   |-- page.tsx
|   |       |   |-- loading.tsx
|   |       |   |-- not-found.tsx
|   |       |   |-- page.tsx
|   |       |-- new
|   |           |-- page.tsx
|   |-- components
|   |   |-- snippet-create-form.tsx
|   |   |-- snippet-delete-form.tsx
|   |   |-- snippet-edit-form.tsx
|   |   |-- snippet-list.tsx
|   |   |-- theme-provider.tsx
|   |   |-- ui
|   |       |-- alert.tsx
|   |       |-- button.tsx
|   |       |-- dropdown-menu.tsx
|   |       |-- input.tsx
|   |       |-- label.tsx
|   |       |-- loading.tsx
|   |       |-- mode-toggle.tsx
|   |       |-- textarea.tsx
|   |-- db
|   |   |-- index.ts
|   |-- lib
|       |-- utils.ts

Built With ✨

• Next.js - React.js framework
• Prisma - Next-generation Node.js and TypeScript ORM
• PostgreSQL - Open-source relational database
• Railway - Hosting for PostgreSQL
• Vercel - Deployment platform
• ShadcnUI - Open Source UI components
• TailwindCSS - Utility-first CSS framework
• TypeScript

Running Locally 🖥️

Clone the project

git clone https://github.com/NightClover-code/snippets

Go to the project directory

cd snippets

Install dependencies

yarn install

or

npm install

Add Environment Variables

Click to expand!

• DATABASE_URL

Setup a local DB

• I used Docker to set up Postgres on my machine (Windows 11).

• After setting up the database, make sure you hook it up to Prisma.

• Prisma's guide to PostgreSQL connection: Prisma Docs

Start the app

yarn dev

Contributing 👥

The project is open-source, providing a robust template for developers eager to expand its functionality over time.

To contribute, please visit the issues section on GitHub.

You can also open issues on your own, and please make sure they're as descriptive as possible.

After addressing an issue, submit a Pull Request (PR).

I'll review submissions promptly and respond as quickly as possible.

Deployment 🚀

• Client deployed on Vercel
• Server deployed on Railway

Inspiration & credits ☄️

• @StephenGrider - Project Idea

Author

• @achrafdev

Thanks for sharing 🚀