Taskify - Collaborate, manage projects and reach new productivity peaks.

📔 Table of Contents

Folder Structure
Getting Started
Screenshots
Tech Stack
Stats
Contribute
Acknowledgements
Buy Me a Coffee
Follow Me
Learn More
Deploy on Vercel
Give A Star
Star History
Give A Star

‼️ Folder Structure

Here is the folder structure of this app.

trello-clone/
  |- actions/
    |-- copy-card/
    |-- copy-list/
    |-- create-board/
    |-- create-card/
    |-- create-list/
    |-- delete-board/
    |-- delete-card/
    |-- delete-list/
    |-- stripe-redirect/
    |-- update-board/
    |-- update-card/
    |-- update-card-order/
    |-- update-list/
    |-- update-list-order/
  |- app/
    |-- (marketing)/
    |-- (platform)/
        |--- (clerk)/
            |---- select-org/[[...select-org]]/
            |---- sign-in/[[...sign-in]]/
            |---- sign-up/[[...sign-up]]/
        |--- (dashboard)/
            |---- board/
            |---- organization/
    |-- api/
        |--- cards/[cardId]/
        |--- webhook/
  |- components/
        |--- form/
        |--- modals/
            |---- card-modal/
        |--- providers/
        |--- ui/
  |- config/
  |- constants/
  |- hooks/
  |- lib/
  |- prisma/
    |-- schema.prisma
  |- public/
    |-- fonts/
    |-- icons/
  |- .env
  |- .env.example
  |- .eslintrc.json
  |- .gitignore
  |- components.json
  |- middleware.ts
  |- next.config.js
  |- package-lock.json
  |- package.json
  |- postcss.config.js
  |- tailwind.config.ts
  |- tsconfig.json
  |- types.ts

🧰 Getting Started

Make sure Git and NodeJS is installed.
Clone this repository to your local computer.
Create .env file in root directory.
Contents of .env:

# .env


# clerk auth keys
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
CLERK_SECRET_KEY=sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

# clerk redirect url(s)
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=/

# mysql db url
DATABASE_URL=<your-db-url>

# unsplash api key
NEXT_PUBLIC_UNSPLASH_ACCESS_KEY=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

# stripe api & webhook key
STRIPE_API_KEY=sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
STRIPE_WEBHOOK_SECRET=whsec_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

# app base url
NEXT_PUBLIC_APP_URL=http://localhost:3000

Clerk Keys:
- NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY are provided by Clerk. You need to sign up for an account on Clerk (https://www.clerk.dev/), log in, and access these keys in your account settings.

Stripe Secret Key:
- STRIPE_API_KEY is provided by Stripe in order to setup online payments. You need to sign up for an account on Stripe (https://stripe.com/), log in, and access these keys in your account dashboard.

Stripe Webhook Secret:
- STRIPE_WEBHOOK_SECRET is required for handling Stripe webhooks securely. Follow these steps to obtain the webhook secret:
  - Sign in to your Stripe account (https://dashboard.stripe.com/).
  - In the Dashboard, go to "Developers" > "Webhooks".
  - Click the "Add endpoint" button.
  - Set up the endpoint details and select checkout.session.completed and invoice.payment_succeeded event.
  - After saving, you'll see the webhook signing secret. Copy this value to use as STRIPE_WEBHOOK_SECRET.
URLs for Clerk:
- NEXT_PUBLIC_CLERK_SIGN_IN_URL, NEXT_PUBLIC_CLERK_SIGN_UP_URL, NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL, and NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL are endpoints or URLs related to your Clerk setup. You can configure these in your Clerk dashboard.
Prisma Database URL:
- DATABASE_URL is the connection URL for your Supabase PostgreSQL database. You will need to create a Supabase account (https://supabase.com/) or use an existing one. Obtain the connection URL from your Supabase dashboard after creating a new project.
Public App URL:
- NEXT_PUBLIC_APP_URL are endpoints or URLs related to this Project. You can configure/copy this from your needs.
Unsplash API Key:
- Sign up on Unsplash if you haven't already.
- Join the Unsplash Developer Community here.
- Create a new application in the Developer Dashboard.
- Obtain your Access Key from the created application.
- Set the NEXT_PUBLIC_UNSPLASH_ACCESS_KEY environment variable in your project with the obtained key.
Open terminal in root directory. Run npm install or yarn install.
Now app is fully configured 👍 and you can start using this app using npm run dev or yarn dev.

📚 Additional Resources

Clerk Documentation: https://www.clerk.dev/docs/
Stripe Documentation: https://stripe.com/docs/
Unsplash Documentation: https://unsplash.com/documentation/
Aiven Documentation: https://docs.aiven.io/
Prisma Documentation: https://www.prisma.io/docs/

NOTE: Please make sure to keep your API keys and configuration values secure and do not expose them publicly.

📷 Screenshots:

⚙️ Tech Stack

🔧 Stats

🙌 Contribute

You might encounter some bugs while using this app. You are more than welcome to contribute. Just submit changes via pull request and I will review them before merging. Make sure you follow community guidelines.