AldinRekic/taskmagnet

Trello Clone: A Feature-Rich Project Management Tool (Next.js)

Tech Stack:

Frontend: Next.js, React 18, ShadcnUI, TailwindCSS
Backend: MySQL DB, Prisma ORM
Extras: Stripe, Unsplash API, Clerk, @tanstack/react-query, Zod (data validation), zustand (state management), Lodash (utility library)

Key Functionalities:

Secure User Management: Integrated Clerk.dev for robust user authentication and authorization.
Organizational Structure: Create and manage organizations/workspaces for efficient team collaboration.
Advanced Board Features: Create, rename, delete, and reorder boards with ease. Personalize boards with beautiful cover images.
Comprehensive Activity Tracking: Maintain a transparent activity log for the entire organization.
Flexible List & Card Management: Create, manage, drag & drop, and copy lists and cards for optimized workflows. Each card has its own activity log.
Scalability and Control: Board limits per organization promote responsible use in the free tier. Stripe subscription unlocks unlimited boards for large teams.
User-Friendly Interface: Leverage ShadcnUI and Tailwind CSS for a visually appealing and responsive UI.

Beyond Functionality:

This project goes beyond replicating Trello. It demonstrates my ability to:

Blend Creativity with Technical Skills: Implement intricate features seamlessly.
Prioritize User Experience: Design a delightful and user-friendly interface.
Work with a Robust Tech Stack: Utilize best-in-class tools for efficient development.

Cloning the repository

git clone https://github.com/AldinRekic/taskmagnet.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=
DIRECT_URL=
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=

NEXT_PUBLIC_UNSPLASH_ACCESS_KEY=

STRIPE_API_KEY=

NEXT_PUBLIC_APP_URL=

STRIPE_WEBHOOK_SECRET=

Setup Prisma

Add PostgreSQL Database (I used Supabase)

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

AldinRekic / taskmagnet