Kanbanly 🚀

A sleek, real-time Kanban board app inspired by Trello Collaborate on workspaces, drag-and-drop cards, and track changes instantly

---

🎥 Demo Showcase

📱 App Usage Demo

Experience the intuitive interface and powerful features in action

👆 Click to watch the full demo

👥 Real-time Collaboration Demo

See how teams collaborate seamlessly with instant synchronization

👆 Click to watch collaboration in action

---

📸 Visual Tour

🏠 Home Page

Clean and intuitive landing page with modern design

📋 Board Interface

Organized board layout with drag-and-drop functionality

👥 Team Collaboration

Real-time collaboration with multiple users

---

✨ Key Features

🎯 Core Features	🔥 Advanced	🚀 Performance
✅ Drag & Drop Cards	⚡ Real-time Sync	🏃‍♂️ Fast Loading
📋 Multiple Boards	👥 Team Collaboration	📱 Mobile Responsive
🏷️ Card Labels	🔔 Instant Notifications	⚡ Socket.IO Integration
📝 Rich Text Editing	🔐 Secure Authentication	🎨 Modern UI/UX
📅 Due Dates	📊 Activity Tracking	🔄 Auto-save

---

🛠️ Tech Stack

Backend Powerhouse

Frontend Excellence

🎯 Architecture Highlights

graph TD
    A[React Frontend] --> B[Express API]
    B --> C[MongoDB Database]
    A --> D[Socket.IO Client]
    D --> E[Socket.IO Server]
    E --> C
    B --> F[JWT Authentication]
    A --> G[Tailwind CSS]
    E --> H[Real-time Updates]

Loading

Why These Technologies?

• 🟢 Node.js: Unified JavaScript environment across full stack
• ⚡ Express.js: Fast, minimalist web framework for robust APIs
• 🍃 MongoDB: Flexible document structure perfect for dynamic Kanban data
• 🔌 Socket.IO: Real-time bidirectional communication for instant collaboration
• ⚛️ React 18: Modern hooks and context for efficient state management
• 🎨 Tailwind CSS: Utility-first approach for rapid, consistent styling

---

🚀 Quick Start

Prerequisites

• 📦 Node.js v18+
• 🍃 MongoDB (Local or Atlas)
• 🔧 Git
• 📝 Code Editor

⚡ Installation

1. Clone & Navigate

   git clone https://github.com/dev-kartikSpace/Mini-Trello-App.git
   cd Mini-Trello-App

2. Environment Setup

   # Create environment file
   cp .env.example .env

   Configure your .env:

   # Database
   MONGO_URI=mongodb://localhost:27017/kanbanly
   
   # Authentication
   JWT_SECRET=your-super-secret-jwt-key
   JWT_EXPIRE=7d
   
   # Server
   PORT=5001
   NODE_ENV=development
   CLIENT_URL=http://localhost:5173

3. Install Dependencies

   npm install

4. Start Backend 🔧

   cd backend
   npm run dev

   ✅ Backend running at http://localhost:5001

5. Launch Frontend ⚛️

   # New terminal
   cd frontend  
   npm run dev

   ✅ Frontend running at http://localhost:5173

6. 🎉 You're Ready! Open http://localhost:5173 and start organizing!

---

📁 Project Structure

kanbanly/
├── 🏗️ backend/                 # Server-side application
│   ├── 🎮 controllers/         # Business logic handlers
│   ├── 🛡️ middleware/          # Auth & validation
│   ├── 📊 models/              # MongoDB schemas
│   ├── 🛣️ routes/              # API endpoints
│   ├── 🔌 socket/              # Real-time handlers
│   └── 🚀 server.js            # App entry point
├── ⚛️ frontend/                # React application
│   ├── 🧩 src/components/      # Reusable components
│   ├── 📄 src/pages/           # Route components
│   ├── 🪝 src/hooks/           # Custom hooks
│   ├── 🌐 src/context/         # State management
│   └── 🎨 src/assets/          # Images & media
├── 📸 assets/                  # Project screenshots
└── 📚 docs/                    # Documentation

---

🗄️ Database Architecture

erDiagram
    User ||--o{ Workspace : creates
    User ||--o{ Board : manages
    Workspace ||--o{ Board : contains
    Board ||--o{ Card : holds
    User ||--o{ Card : assigns
    
    User {
        ObjectId _id
        string name
        string email
        string password
        string avatar
        date createdAt
    }
    
    Workspace {
        ObjectId _id
        string title
        string description
        ObjectId owner
        array members
        date createdAt
    }
    
    Board {
        ObjectId _id
        string title
        ObjectId workspaceId
        string visibility
        array members
        date createdAt
    }
    
    Card {
        ObjectId _id
        string title
        string description
        ObjectId boardId
        string listId
        number position
        array assignees
        array labels
        date dueDate
        date createdAt
    }

Loading

---

🤝 Contributing

We love contributions! Here's how to get involved:

🔄 Development Workflow

1. 🍴 Fork the repository
2. 🌿 Create your feature branch

   git checkout -b feature/amazing-feature

3. 💾 Commit your changes

   git commit -m 'Add some amazing feature'

4. 📤 Push to the branch

   git push origin feature/amazing-feature

5. 🔄 Open a Pull Request

📋 Code Guidelines

• Follow ESLint configuration
• Write meaningful commit messages
• Add JSDoc comments
• Include tests for new features
• Ensure responsive design

🐛 Found a Bug?

Create an issue with:

• Clear description
• Steps to reproduce
• Expected behavior
• Screenshots if applicable

---

📚 Documentation

📖 Resource	🔗 Link
High-Level Design	HLD.md
Low-Level Design	LLD.md
API Documentation	API.md
Contributing Guide	CONTRIBUTING.md

---

⭐ Show Your Support

If this project helped you, please consider giving it a star!

Ready to revolutionize your project management? Let's get started! 🚀