Fullstack Trello Clone: Next.js 14, Server Actions, React, Prisma, Tailwind, PostgreSQL

This is a repository for Fullstack Trello Clone: Next.js 14, Server Actions, React, Prisma, Tailwind, PostgreSQL

Key Features:

• Auth
• Organizations / Workspaces
• Board creation
• Unsplash API for random beautiful cover images
• Activity log for entire organization
• Board rename and delete
• List creation
• List rename, delete, drag & drop reorder and copy
• Card creation
• Card description, rename, delete, drag & drop reorder and copy
• Card activity log
• Board limit for every organization
• Landing page
• PostgreSQL DB
• Prisma ORM
• shadcnUI & TailwindCSS

Prerequisites

Node version 18.x.x

Cloning the repository

git clone https://github.com/BikrantJung/trello-clone.git

Install packages

pnpm i

Setup .env file

NEXT_PUBLIC_APP_URL=

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/

//For reference: https://masteringnuxt.com/blog/setting-up-prisma-with-supabase
DATABASE_URL=
DIRECT_DATABASE_URL=

// Obtain from https://unsplash.com/developers
NEXT_PUBLIC_UNSPLASH_ACCESS_KEY=
NEXT_PUBLIC_UNSPLASH_SECRET_KEY=

Setup Prisma

Add PostgreSQL Database (I used Supabase DB)

The following command will push the models to database, and geneerate prisma client.

pnpm db:push

Start the app

pnpm dev

Available commands

Running commands with npm pnpm [command]

command	description
dev	Starts a development instance of the app
db:push	Synchronizes current schema.prisma to database
db:generate	Generates types for prisma
db:reset	Resets the database
ui:add [component_name]	Installs any component from shadcn/ui library