Krello - a project management app: Appwrite X Hashnode Hackathon

Team Details.

• Rishu - Rishu Patel

Project Description.

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

In Krello users can create a public or a private board. Public boards are accessible to all the users on the platform whereas, private boards are limited to team members. You can invite team members once they accept the invitation sent through email, they can come and collaborate on a private board.

Users can also explore the app and the public boards with limited access by signing up as anonymous a user. Users can also create a new account and interact with the platform more freely.

Once inside a board users of Krello, can create new tasks and update the existing task for better communication and collaboration users can also leave comments on the task which are updated in real-time.

The Journey.

Why Svelte?

I was a bit fascinated when I tried Svelte for the first time, especially its reactivity and bind directive. After that I wanted to learn svelte and was looking for a project to build then I came across devChallenges. The current design is mostly taken from devChallenges and I will continue to ship features to enhace krello even more.

Now it was time to build a Trello Clone and a happy coincidence occurred hashnode announced the appwrite hackathon just two weeks after I started learning Sveltejs.

Since then, it has been a rollercoaster ride, filled with highs and lows, working towards building and refining Krello to its current state.

Challenges Faced.

Svelte way of thinking.

Coming from React I used to think of my components in a different way. Whenever I faced any issue or bug the react way would kick in. Learning svelte was fun and i still have a lot to explore in that territory.

Appwrite

I had never worked with appwrite before building this project. But because the documentation was comprehensive it was a smooth ride to learn and get familiar.

However, the biggest hurdle was the Relationships and the DB Design. I wasn't aware of the fact that appwrite cloud doesn't support relationships as of now so the initial DB design that I came up with was going to be difficult to implement but as all problem has a solution this was solved too. Either by compromising on a feature for the time being or manually mapping and joining different docs in the front end.

Even though the relationships are not supported but most of the front-end logic is written by assuming relationships are there. Once appwrite cloud start supporting relationships most of the code that does this manually can be removed with some adjustments.

Features.

• Create Public and Private Boards: Users can create both public and private boards to collaborate with team members or share the board with the public.

• Drag and Drop Tasks: Tasks can be easily rearranged and organized by dragging and dropping them within the board, providing a convenient way to update task status.

• Realtime Comments: Users can leave comments on tasks in real time, facilitating communication and collaboration among team members.

• Assign Labels, Priority, and Descriptions to Task: Users can assign labels to tasks to categorize them based on different criteria. Priorities can be set to indicate the importance or urgency of tasks. Descriptions can be added to provide detailed instructions or information.

• Anonymous Login: The option for anonymous login allows users to access the web app with limited access to explore the app.

Tech Stack.

• Svelte Kit with Typescript

• Appwrite

  • Authentication- For features like login, signup, anonymous login, forget password and create teams.

  • Permissions - For Private boards

  • Database - For storing all the data

  • Storage - For storing images

  • Realtime - to update tasks and comments in realtime

• Tailwind for styling

• Flowbite - For some components

• Other tools - Stylelint, ESLint, Prettier and Husky

Public Code Repo.

Repository Link

Demo Links.

Please view the app on a desktop or large-screen device. It's not optimised for small screens as of writing this due to the long nature of the Kanban board and the shortage of time. I Will be improving the mobile experience in the upcoming releases.

Website URL - https://krello.rlabs.dev/

Credits.

The designs for the Krello are taken from Devchallenges with some changes.

More features to come see the-list

Thanks for Reading.

Per aspera ad astra.