Krello | A Trello Clone

Krello is a task management app built with SvelteKit, Appwrite, Flowbite and Tailwind. It's a clone of the popular task management application Trello. You can visit the app here.

Features Overview

1. Drag and Drop Tasks: Rearrange and organize tasks easily by dragging and dropping them within the board. Keep task statuses up-to-date effortlessly.

2. Public and Private Boards: Accessible to all users, public boards are for sharing while private boards are reserved for team members only.

3. Anonymous Login: Dive into task management and project collaboration without the need for an account. Experience quick and hassle-free access.

4. Enhanced Editing with Quill: Utilize the powerful Quill rich text editor to create visually appealing and well-structured task descriptions. Add formatting for effective communication.

5. Real-time Comments and Collaboration: Engage in real-time collaboration and feedback by leaving comments on tasks, promoting seamless teamwork.

6. Assign Labels, Priority, & Descriptions: Categorize tasks with labels, set priorities to indicate importance or urgency, and add descriptions for comprehensive task information

Tech used

• SvelteKit
• TypeScript
• Appwrite Cloud (Version 1.1.2)
• Tailwindcss
• Flowbite
• Quill Editor

Setting Up Local Environment

1. Clone the repo

To get started, clone this repository and install the dependencies using pnpm or yarn or npm:

git clone https://github.com/iamrishupatel/trello-clone.git
cd trello-clone
pnpm install

2. Setup Appwrite

A. Login and create the project

1. Login to Appwrite Cloud or you can use docker to run a local instance of appwrite. Read about here
2. Create a project from the dashboard

B. Initialize Auth

3. Enable Email/Password,, anonymous auth and Team Invites as the we use teams for private boards.

C. Setup Database

4. Create a database
5. Create 7 collections - (user, board, label, priority, status, task, comment)

D. Add following attributes in the tables

Note: Appwrite cloud uses apprite v1.1.2 as of AUG 2023 and doesn't support relations

6. User Collection Attributes

   Key	Type	Default Value
   name (required)	string
   email (required)	string
   bio	string
   username	string
   displayPicture	string
   myBoards	string

7. Board Collection Attributes

   Key	Type	Default Value
   isPrivate	boolean	-
   name	string	-
   owner (required)	string	-
   coverURL	string	-
   members	string[]	-
   teamId	string	-
   description	string	-

8. Label Collection Attributes

   Key	Type	Default Value
   text	string	-
   color	string	-

9. Priority Collection Attributes (NOT REQUIRED)

   Key	Type	Default Value
   text	string	-
   color	string	-

   As of now this collection is not being use and all priorities are hardcoded in the app. But may be used in future.

10. Status Collection Attributes

    Key	Type
    text (required)	string

    status are hardcoded in the appwrite db

    Statuses are Backlog, Todo, Inprogress,InReview, Done and must be added in DB. At this time statuses can't be created from client app.

11. Task Collection Attributes

    Key	Type	Default Value
    title (required)	string	-
    boardId (required)	string	-
    description	string	-
    coverUrl	string	-
    status (required)	string	-
    prevStatusId (required)	string	-
    labels	string[]	-
    priority	string	-

12. Comment Collection Attributes

    Key	Type	Default Value
    body (required)	string	-
    author (required)	string	-
    taskId (required)	string	-
    isEdited	boolean	-

E. Setup Storage Buckets

13. Create three storage buckets to store images related to profile_pictures, boards, and tasks, respectively.

3. Developing

After appwrite setup is done dependencies are installed with pnpm install (or npm install or yarn).

1. Create an .env.local file and copy the contents of .env.example and add all the required values.

2. Start a development server:

pnpm run dev

# or start the server and open the app in a new browser tab
pnpm run dev -- --open

Building

To create a production version of your app:

pnpm run build

You can preview the production build with pnpm run preview.

To deploy your app, you may need to install an adapter for your target environment.

Contributing

We're thrilled that you're interested in contributing to Krello! Your contributions help make this project better for everyone. Here's how you can get involved:

Bug Reports and Feature Requests

If you come across a bug or have an idea for a new feature, please open an issue on our GitHub repository. Make sure to provide as much detail as possible so that we can understand and address the issue or feature request effectively.

Pull Requests

If you want to contribute directly to the codebase, follow these steps:

1. Fork the repository.
2. Create a new branch for your feature or bug fix: git checkout -b feat/feature-name or git checkout -b fix/fix-name .
3. Make your changes and ensure that the code meets our project's coding standards.
4. Commit your changes with clear and concise commit messages, following the conventional commits guidelines. This helps maintain a consistent commit history and makes it easier to understand the changes.
5. Push your branch to your forked repository.
6. Open a pull request on our GitHub repository, explaining the changes you've made.

Before submitting a pull request, please ensure:

• Your code is well-documented, including comments where necessary.
• You've tested your changes thoroughly to prevent regressions.
• Your code follows the project's coding conventions and style guidelines.

We appreciate your contributions and will review your pull request as soon as possible. Please be patient as we work through the review process. If any changes are needed, we'll provide feedback.

Spread the Word

If you're not able to contribute directly through code, you can still contribute by spreading the word about Krello! Share the project with others who might be interested, and consider giving us a star on GitHub to show your support.

Acknowledgments

The designs used in this Project are based on ideas from devchallenges.io. Although we've made adjustments to fit our needs, they're mostly inspired by what we found there.

Licence

MIT

This project was generated using the Sveltekit Starter Template.