Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/iamrishupatel/trello-clone
Krello is a trello clone built with Svelte, Appwrite and Flowbite
https://github.com/iamrishupatel/trello-clone
appwrite flowbite flowbite-svelte svelte sveltekit trello-clone
Last synced: 2 months ago
JSON representation
Krello is a trello clone built with Svelte, Appwrite and Flowbite
- Host: GitHub
- URL: https://github.com/iamrishupatel/trello-clone
- Owner: iamrishupatel
- License: mit
- Created: 2023-05-13T07:47:10.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-27T15:56:41.000Z (11 months ago)
- Last Synced: 2024-09-27T06:41:23.415Z (3 months ago)
- Topics: appwrite, flowbite, flowbite-svelte, svelte, sveltekit, trello-clone
- Language: Svelte
- Homepage: https://krello.rlabs.dev
- Size: 567 KB
- Stars: 36
- Watchers: 2
- Forks: 7
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Krello | A Trello Clone
[Krello](https://krello.rlabs.dev) 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.](https://krello.rlabs.dev)
[](https://svelte.dev/)
[](https://www.typescriptlang.org/)
[](https://tailwindcss.com/)
[](https://vitejs.dev/)
[](https://typicode.github.io/husky/#/)
[](https://eslint.org/)
[](https://prettier.io/)
## 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`:
```bash
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](https://cloud.appwrite.io/) or you can use docker to run a local instance of appwrite. Read about [here](https://appwrite.io/docs/self-hosting)
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)
> **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](https://appwrite.io/docs/products/databases/permissions)**
**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:
```bash
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:
```bash
pnpm run build
```
You can preview the production build with `pnpm run preview`.
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) 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](https://www.conventionalcommits.org/) 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](https://github.com/iamrishupatel/trello-clone) to show your support.
## Acknowledgments
The designs used in this Project are based on ideas from [devchallenges.io](https://devchallenges.io). Although we've made adjustments to fit our needs, they're mostly inspired by what we found there.
## Licence
[MIT](https://github.com/iamrishupatel/trello-clone/blob/main/LICENSE)
> This project was generated using the [Sveltekit Starter Template](https://github.com/rlabs-digital/sveltekit-starter-base-template).