Trello 2.5

Trello 2.5 is a clone of the kanban-style site Trello® used for project and task management. Create boards, lists, and cards to organize daily tasks or projects.

🏆 Goals

My goal in this project was to get aquainted with the full-stack capabilities of Next.js and to learn how to use Tanstack Query. I wanted to retain the features of Trello 2 while improving the UI/UX, drag-and-drop functionality, and adding new features such as labels and descriptions in the cards.

🎥 Live Demo

Trello 2.5

🔑 Features

• Secure Authentication: Google OAuth authentication via NextAuth and guest authentication for users to test the application.
• Drag and Drop Functionality: Lists and cards can be dragged seamlessly powered by Framer Motion Reorder.
• Sleek, Responsive, Modern Design: Styled with Tailwind CSS, Daisy UI, and animations from Framer Motion.
• React Query: Handles server state management and provides visual feedback when creating or deleting boards, lists, and cards through optimistic UI updates.

🔌 Dev Dependencies

• Tanstack/React-Query
• Framer-Motion
• Mongoose
• MongoDB
• MongoDB Adapter
• Tailwind Css
• Next Auth
• React-Hot-Toast
• Daisy UI
• Next.Js
• Axios
• React
• eslint

💾 Run Locally

Clone the project

  git clone https://github.com/bcsurf2822/trello-2.5.git

Go to the project directory

  cd trello-2.5

Install dependencies

  npm install

Start the server

  npm run dev

📷 Screenshots

Inspiration

My idea for this project came from Trello 2, a team based project built during my time at Parsity. Trello 2 was developed using Redux, React with Create React App, Node, Express, and had a JWT-based authentication strategy. Feel Free to view that project repo here.

🔗 Links