You can try Taskly for free at taskly.kickass.website
Overview of My Submission
Taskly is an app to better manage tasks across all of the different task/todo/issue/project platforms. Developers (especially in open source) often use multiple websites like GitHub and Gitlab to work on their projects and contribute to other. There is also a fair share of project management tools that have their own task/todo lists. With Taskly all of those are merged into single interface for quick access and management. When you start using Taskly it will become a central hub for all of your tasks and give you more time to focus on actually doing your job.
Infrastructure
Taskly is built as a full fledged web application meant to scale and serve many developers working in open source and beyond. At the core of that is Appwrite which we use as a backend for all of Taskly features. As Appwrite is ready for horizontal/vertical scaling Taskly is also ready to scale as its user base grows.
Authentication
As we started building Taskly on Appwrite platform we used the Users module to provide authentication and social features to our users. Users can login with email/password or any of our 3party providers, all of those providers are also available to import/manage tasks from, but more on that later.
Integrating authentication with our Next.js application was easy through Appwrite Web SDK and our custom Authenication Service. Authentication Service is our abstraction which allows Taskly to connect to any auth provider and use it seamlessly with other Taskly features.
Tasks management
The core feature of Taskly is Tasks module. It provides a central list of your tasks with search and filtering methods to quickly organise and find tasks that you need to read, edit or (finally) complete.
Core building blocks for the Taskly interface are NextUI components. It is a great (open source) set of primitive UI components that give Taskly a slick look, also, don't worry, we do support Dark mode (｡▼皿▼).
When you first sign into your Taskly account you will be offered to connect any of the 3party apps that you use to manage your tasks like GitHub, Gitlab, Trello... Currently we only support few of them, but check back soon because more providers will be added in the future (this project was built in less than a month so bear with us), also if you wish to collaborate on that give as a ping on GitHub. After connecting the provider like GitHub you can select which projects issues you wish to import (we only import the things you choose because you are the Boss) and manage through Taskly.
After connecting any of the providers your tasks will just magically start to appear in your Tasks lists. But there is no magic here, just awesome Appwrite Functions doing their thing..
After that you can create, view, edit, update and delete any of your tasks in single place. There is also a handy link to the original task for your enjoyment! Taskly is also optimized for mobile.
All of that is running under the hood with our Data Service which like Auth Service allows Taskly to interact seamlessly with any 3party data source or API. This particular implementation is of course using Appwrite Web SDK.
We also used permissions system from Appwrite Documents where we specifically assign permissions to read/write (Document level) tasks to the users owning them. In the future this will allow us to implement users sharing and collaborating on tasks directly through Taskly.
Importing and syncing Tasks
In the previous section we bragged how after connecting services like GitHub and Gitlab to your account your tasks just seamlessly start to appear in the Tasks list. Here we will talk more about how that is achieved.
Another cool feature Appwrite has are Functions. At Taskly we use them as background job queue. Any time new project is connected to Taskly a new function execution is started in the background. We call it "import job". Import job pulls all of the issues and data from 3party provider to display them inside Taskly interface.
This gives us few things for free:
- our users do not need to wait on the loading screen for their tasks to import
- they can just continue working and seamlessly their tasks will start appearing as they are being imported through our import job
- we save user bandwidth because Appwrite lets us know in realtime when new tasks are imported
After the import job is done there is of course a possibility that someone creates a new task in your project (a pesky project manager) - we do not want you run into problems by missing a new task assigned to you. That is why we use webhooks to continuously sync new tasks and task updates to Taskly from your connected providers. This means that you can focus on your work and let Taskly handle everything else.
Another great thing about Appwrite Functions is that you get logs and errors for free so we can monitor our job executions and potential errors for our users.
Realtime UI
At Taskly we believe in fast user interfaces. We were impressed how quick the Appwrite Documents API was when fetching data for our application but we went step further. We noticed that there is also a Realtime support in Appwrite using Web Sockets. We went ahead and tried it out and it worked as a charm.
Basically from the moment you open Taskly we connect to the realtime socket and listen for changes (from webhooks or async import jobs). Any time new document is added, edited or deleted we refetch those and update our local state.
This also allowed to use more aggressive caching on the client side because we do not need to refetch anything until realtime socket tells us something changed. This automatically makes all of your recent/usual queries instant, Yeeey!!
We were impressed by how good it worked so we also implemented it at some other parts of our UI.
Search and filter
Listing tasks was fine but we also wanted to add some basic search features to Taskly. As we use Appwrite Documents to store all of the user data we used Indexes and filtering options in Appwrite Web SDK to implement those.
We support:
- fulltext search of tasks
- sorting by title, creation date, status
- filtering by task status
With those you can quickly find the relevant tasks. All of the search params are persisted inside the browser URL so until Taskly adds support for "Saved views" (Soon TM) you can for example bookmark the tasks from specific project that are still open.
What is next?
You will notice that there is a lot more to Taskly than the features we mentioned above. That is because even though we want to make something great with Taskly we only created it in less then a month for Appwrite Hackathon. This means that it is a work in progress. If you think this is great and wish to help contribute new features to Taskly give as a ping on GitHub.
Submission Category:
Our submission fits into "Web2 Wizards" category. Taskly is a single page (SPA) web application running with Next.js and React using Appwrite as backend.
Link to Code
Taskly - better way to manage your tasks
Taskly is an app to better manage tasks across all of the different task/todo/issue/project platforms. Developers (especially in open source) often use multiple websites like GitHub and Gitlab to work on their projects and contribute to other. There is also a fair share of project management tools that have their own task/todo lists. With Taskly all of those are merged into single interface for quick access and management. When you start using Taskly it will become a central hub for all of your tasks and give you more time to focus on actually doing your job.
Crafted with Appwrite and Next.js ❤️
Created by @Fazla-GroM and @capJavert 🌈
Development
This is a Next.js project bootstrapped with create-next-app.
Getting Started
First, run the development server:
npm run dev
# or
yarn dev
Open http://localhost:3000 with your browser to see the result.
You…
Additional Resources / Info
Taskly is crafted with ❤️:
Taskly is created by:
Top comments (1)
@fazlagrom gg wp ❤️