Skip to content

Latest commit

 

History

History
225 lines (150 loc) · 9.89 KB

README.md

File metadata and controls

225 lines (150 loc) · 9.89 KB

krello-banner

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.

Svelte Appwrite Cloud TypeScript Tailwind CSS Quill Editor Vite Husky ESLint Prettier License: MIT GitHub Stars Open Issues Open Pull Requests

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

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

C. Setup Database

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

Note: Don't forget to update the collection permissions so authorized users are allowed to update collections. This also is required to create users in the user collection. For more information about Appwrite collection permissions see their documentation

D. Add following attributes in the tables

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

  1. User Collection Attributes

    Key Type Default Value
    name (required) string
    email (required) string
    bio string
    username string
    displayPicture string
    myBoards string
  2. Board Collection Attributes

    Key Type Default Value
    isPrivate boolean -
    name string -
    owner (required) string -
    coverURL string -
    members string[] -
    teamId string -
    description string -
  3. Label Collection Attributes

    Key Type Default Value
    text string -
    color string -
  4. 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.

  5. 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.

  6. 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 -
  7. Comment Collection Attributes

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

E. Setup Storage Buckets

  1. 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.