Skip to content

This is a FullStack Next.js 14 applcation or Clone application of Trello created using latest Server Actions. This web application is an Entire end-to-end clone of original Trello.

Notifications You must be signed in to change notification settings

chandrabhan-singh-1/Nextjs-14-Trello-Clone

Repository files navigation

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

image

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

Key Features:

  • Auth

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

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
  • Stripe subscription for each organization to unlock unlimited boards
  • Landing page
  • MySQL DB
  • Prisma ORM
  • shadcnUI & TailwindCSS

Prerequisites

Node version 18.x.x

Cloning the repository

git clone https://github.com/chandrabhan-singh-1/nextjs-14-trello-clone.git

Install packages

npm i

Setup .env file

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=
NEXT_PUBLIC_CLERK_SIGN_UP_URL=
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=

DATABASE_URL=

NEXT_PUBLIC_UNSPLASH_ACCESS_KEY=
NEXT_PUBLIC_UNSPLASH_SECRET_KEY=

STRIPE_API_KEY=

NEXT_PUBLIC_APP_URL=

STRIPE_WEBHOOK_SECRET=

=======

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=
NEXT_PUBLIC_CLERK_SIGN_UP_URL=
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=

DATABASE_URL=

NEXT_PUBLIC_UNSPLASH_ACCESS_KEY=

STRIPE_API_KEY=

NEXT_PUBLIC_APP_URL=

STRIPE_WEBHOOK_SECRET=

Setup Prisma

Add MySQL Database (I used PlanetScale)

npx prisma generate
npx prisma db push

Start the app

npm run dev

Available commands

Running commands with npm npm run [command]

command description
dev Starts a development instance of the app

=======

command description
dev Starts a development instance of the app

31625d054453fb8272d558f641d71ba850a8dcad

About

This is a FullStack Next.js 14 applcation or Clone application of Trello created using latest Server Actions. This web application is an Entire end-to-end clone of original Trello.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages