Trello-Appwrite-Clone 📋

A Trello clone application built with Next.js, Appwrite, and Tailwind CSS, offering a seamless task management experience.

🌟 Project Description

This project is a full-stack web application that mimics the core functionalities of Trello, a popular project management tool. It leverages Next.js for a fast and responsive user interface, Appwrite as the backend-as-a-service (BaaS) for database management and authentication, and Tailwind CSS for modern and utility-first styling. The application allows users to organize tasks into different categories (To Do, In Progress, Done) and manage them through a drag-and-drop interface.

Key features include real-time updates, task categorization, drag-and-drop functionality for task reordering and status changes, and AI-powered task summarization using OpenAI.

🚀 Key Features

• Kanban Board Interface: Visualize your tasks in columns representing different statuses (To Do, In Progress, Done).
• Drag-and-Drop Functionality: Easily move tasks between columns or reorder them within a column.
• Real-time Updates: Changes are reflected instantly across the application.
• Appwrite Integration: Robust backend services for data persistence.
• AI-Powered Summaries: Get an AI-generated summary of your tasks for the day.
• Search Functionality: Quickly find tasks by title.
• Responsive Design: Optimized for various screen sizes.

🛠️ Tech Stack

• Frontend: Next.js, React, TypeScript, Tailwind CSS
• Backend: Appwrite
• AI Integration: OpenAI (GPT-3.5-turbo)
• State Management: Zustand
• Libraries: react-beautiful-dnd, react-avatar, @heroicons/react

📜 Table of Contents

• Project Title & Badges
• Project Description
• Key Features
• Tech Stack
• Table of Contents
• Installation
• Environment Variables
• Usage
• Project Structure
• API Reference
• Contributing
• License
• Important Links
• Footer

📚 Installation

To get a local copy up and running, follow these steps:

1. Clone the repository:

   git clone https://github.com/rbishal50/Trello-Appwrite-Clone.git
   cd Trello-Appwrite-Clone

2. Install dependencies:

   npm install
   # or
   yarn install
   # or
   pnpm install

3. Set up Environment Variables: Create a .env.local file in the root directory and add your Appwrite and OpenAI API keys:

   NEXT_PUBLIC_APPWRITE_PROJECT_ID='YOUR_APPWRITE_PROJECT_ID'
   NEXT_PUBLIC_APPWRITE_ENDPOINT='https://cloud.appwrite.io/v1'
   NEXT_PUBLIC_DATABASE_ID='YOUR_APPWRITE_DATABASE_ID'
   NEXT_PUBLIC_TODOS_COLLECTION_ID='YOUR_APPWRITE_TODOS_COLLECTION_ID'
   OPENAI_API_KEY='YOUR_OPENAI_API_KEY'

   Replace placeholders with your actual credentials.

💡 Environment Variables

• NEXT_PUBLIC_APPWRITE_PROJECT_ID: Your Appwrite project ID.
• NEXT_PUBLIC_APPWRITE_ENDPOINT: The Appwrite API endpoint (usually https://cloud.appwrite.io/v1).
• NEXT_PUBLIC_DATABASE_ID: The ID of your Appwrite database.
• NEXT_PUBLIC_TODOS_COLLECTION_ID: The ID of your Appwrite collection for todos.
• OPENAI_API_KEY: Your OpenAI API key for AI summarization.

▶️ Usage

To start the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open your browser and navigate to http://localhost:3000 to view the application.

✍️ How to Use

1. Add Tasks: Click on the '+' icon within a column to add a new task (Note: This feature might be pending implementation in the UI for adding new tasks directly).
2. Organize Tasks: Drag and drop tasks between columns (To Do, In Progress, Done) to update their status.
3. Search Tasks: Use the search bar in the header to filter tasks by their title.
4. AI Summary: The header displays an AI-generated summary of your current tasks, updated periodically.

This application serves as a functional clone of Trello, demonstrating effective integration of frontend and backend technologies for task management.

📂 Project Structure

Trello-Appwrite-Clone/
├── app/
│   ├── api/
│   │   └── generateSummary/
│   │       └── route.ts
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── components/
│   ├── Board.tsx
│   ├── Column.tsx
│   ├── Header.tsx
│   └── TodoCard.tsx
├── lib/
│   ├── fetchSuggestion.ts
│   ├── formatTodosForAI.ts
│   └── getTodosGroupedByColumn.ts
├── public/
├── store/
│   └── boardStore.ts
├── .eslintrc.json
├── next.config.js
├── package.json
├── postcss.config.js
├── tailwind.config.ts
├── tsconfig.json
└── typings.d.ts

🕸️ API Reference

POST /api/generateSummary

This API endpoint uses OpenAI to generate a summary of the provided todos.

• Request Body:

  {
    "todos": {
      "todo": number,
      "inProgress": number,
      "done": number
    }
  }

• Response: A JSON object containing the AI-generated summary message.

  {
    "role": "assistant",
    "content": "Welcome Mr. Bishal! Welcome to the Appwrite Trello Clone app! You have X todos in To Do, Y in Progress, and Z Done. Have a productive day!"
  }

🤝 Contributing

Contributions are welcome! Please feel free to:

• Fork the repository.
• Create a new branch (git checkout -b feature/YourFeature).
• Make your changes.
• Commit your changes (git commit -m 'Add some feature').
• Push to the branch (git push origin feature/YourFeature).
• Open a Pull Request.

Please ensure your code adheres to the project's coding style and includes appropriate tests if applicable.

📄 License

This project is not currently under a specific license. Refer to the GitHub repository for more details.

🔗 Important Links

• Live Demo: [Not Available]
• Repository: https://github.com/rbishal50/Trello-Appwrite-Clone

📝 Footer

©️ Trello-Appwrite-Clone

• Author: Bishal Rana
• Contact: rbishal50@gmail.com

If you find this project helpful, please consider starring, forking, and opening issues for any suggestions or bug reports!

---

Generated by ReadmeCodeGen