Skip to content

b-asaf/trello-clone

Repository files navigation

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:

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.

About

Implemeting Trello clone using NextJs14 and App Routing

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages