Taskify a Clone of Trello

For this project, my goal was to recreate a clone of the Trello web application using the Next.js framework, a library that leverages ReactJS and Node.js technologies. In terms of UI design, the app adopts the basic design of Trello, which in turn is an interpretation of the Kanban method. To achieve this result, I used the customizable components of shadcn/ui and the tailwind css framework. For the server side, I implemented all the logic with Next.js server actions and api routes, depending on their relevance. These communicate with a MySQL database via the Prisma ORM. For authentication management, I chose a simple solution using Clerk.

Video Demo

Demo of the application divided into 4 parts: Navigation, App Features, Subscription, Responsive Design

App Demo

Features

• 🖼️ Landing Page - to present the Taskify offer

• 🔐 Login, 🔏 Register for creating a new user and ❌Delete account

• 🏢 Organization create and manage organizations to separate boards

• 🌈 Design, matches that of Trello's Web App

• 📲 Responsive Design - Adapts to all screen sizes, from mobile screens to desktop.

• 🗃️ Kanban - Create, Update, Copy, Delete List & Card , update Board Title on the fly

• 🤚 Drag and Drop - Features to drag and drop Lists between them, but also Cards inside any list

• 🔎 Card Modal - Functionality allowing the click of a card to display a modal containing all the options of a card: Update Title & Description, Delete & Copy, follow activities

• ✍️ Subscription - Possibility of subscribing to a Stripe subscription for each organization to unlock unlimited boards

• 💰 Manage your subscriptions - On each organization possibility of managing its subscription

• 👀 Activity - Page to check all log activities

Libraries Used

• Next.js
  • isomorphic framework allowing in particular the rendering of web pages on the server side

• Typescript

  • TypeScript is an indispensable, strongly typed programming language that builds on JavaScript, enhancing it with type annotations and advanced features

• Prisma See prisma shema

  • an ORM working with several SGBD, MySQL in this application

• Tailwind css - See board-list example

  • A popular utility-first CSS framework for rapidly building custom user interfaces

• Shadcn/ui - See components/ui

  • This is a set of reusable components that you can copy and paste into your application. This library focused on accessibility, customization and open source is trendy and has experienced strong growth in 2023

• Zod - See zod-schema

• Clerk - See middleware.ts

  • tools to manage authentication

• Stripe

  • tools for payment management including subscriptions

Conception

This diagram explains the application architecture and its use of Server Side Rendering (SSR) by Next.js.

Next.js, being an isomorphic framework, allows the same JavaScript code to be executed both on the server and the client. This means that React components can be rendered server-side to generate the initial HTML (Step 1), and then "hydrated" on the client-side (Step 2) to allow dynamic interaction without requiring a full page load for each action.

Upon first connection, the client accesses the landing-page and is then redirected to the authentication pages (sign-in, sign-up, select-org) managed and protected by the middleware of the Clerk tool. The landing page is a good example of a page rendered statically.

For this first project with Next.js, I wanted to experiment with data fetching through two Next.js features: api routes and server actions (stable since version 14).

Regarding API Routes, I coupled them with the react-query library for its ease of use and also its cache data management (notably refetching keys). As for Server Actions, this solution simplifies the execution of server logic without requiring dedicated API routes. However, through this solution, the entry point is not necessarily fully secure, especially for forms. Therefore, I created a data verification function, taking the Zod schema as parameters as well as server logic and data retrieval. Finally, use-action, on the client level, acts somewhat like the useMutation method of react-query, taking the action callback and success and error methods to display them at the client level.

For data fetching, I opted for the ORM Prisma which:

• Automatically generates a Prisma client based on our database schema,
• Is TypeScript friendly across the entire ecosystem,
• Manages MySQL,
• Allows simplified migration,
• Proposes schema-driven development,
• Enables intuitive query building.

For subscription management, Stripe manages user subscriptions through sessions.

Quick Start Guide

Prerequisites

Node version 18.x.x

Cloning the repository

git clone git@github.com:tonympt/taskify.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=

STRIPE_API_KEY=

NEXT_PUBLIC_APP_URL=

STRIPE_WEBHOOK_SECRET=

Setup Prisma

Add MySQL Database (On 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