Search for a command to run...
Streamline your workflow & supercharge productivity with Krello
Hi, I am Rishu, a self-taught React developer from India. I'm interested in science, business, space, superheroes, and everything in between.
No comments yet. Be the first to comment.
Introduction How many times have you added javascript to your HTML like this <script src="path/to/some/javascript"></script> but have you ever pondered how browser handle that line of code? Why do we sometimes pass async or defer attributes to the s...
Introduction The beautiful thing about react is that it lets you break down UI into smaller components and reuse them at multiple places in your project, but that's not it, you can standardize your components and publish them to npm or yarn and let o...
Introduction Have you ever wondered why JavaScript is considered such a weird language? Why does it behave unexpectedly sometimes? How is it possible to call a function even before declaring it? What is a closure or hoisting? Why setTimeout() functio...
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.
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.
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.
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.
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.
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
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.
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.