b-asaf / trello-clone

Implemeting Trello clone using NextJs14 and App Routing

Demo / Deployment

To play with a deployed version of the application go to: trello-clone

Getting Started

This is a Next.js project bootstrapped with create-next-app.

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

environment variables:

1. change .env-example to .env
2. fill the relevant environment variables - for each site (clerk, unsplash, stripe)follow site guidelines

Open http://localhost:3000 with your browser to see the result.

Tools

1. Database
   1. database:
      • MySql as database
      • Prisma as ORM
   2. database hosting filess.io
      • initial worked with MySQL in docker -> due to issues with deploying db host in Vercel moved to filess.io
   • during development the DB was deployed inside a docker (see docket-compose.yml), due to issues with deploying the db in vercel host I moved to filess.io as db host.
2. Authentication - clerk
3. Style - tailwind.css
4. shadcn-ui - Re-usable components above radix-ui & tailwind.css
5. Icons - lucide - with react package
6. Payment - stripe
7. State management - zustand
8. Schema validation - zod

Prisma ORM

1. (SHOULD BE DONE ONLY ON DEV!!) Reset the DB: npx prisma migrate reset
2. push new schema(s) to db: npx prisma db push
3. create the new schema(s) locally: npx prisma generate
4. Visualize DB in browser - prisma studio: npx prisma studio (work well with docker, TBD::check how to make it work with filess.io)

Stripe

In order to use/test stripe locally, you need to following:

1. Login into stripe.com
2. Go to dashboards and click the developers buttons
3. Click on webhooks tab
4. Click on "Test in local environment": https://dashboard.stripe.com/test/webhooks/create?endpoint_location=local
5. Follow the instructions...make sure to keep the terminal open/running
6. enter fake credit card information:
   1. the important fake information is the credit card number: 4242 4242 4242 4242
   2. the rest of the information is not really important for the testing purposes

Enabling billing portal (in development mode):

1. Search for billing portal
2. Select Customer portal (should be under: Settings -> Customer portal)
3. Click on activate test link button

NextJS - Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.