TaskTunes: Appwrite Hashnode Hackathon

Thanks, Appwrite and Hashnode for giving us this amazing opportunity.

Team Details

Developed by: Pritesh Kiri

Description of Project

TaskTunes is a productivity application designed around the concept of the dopamine reward system. Its purpose is to assist users in achieving their goals and maintaining focus on their work. The application features a built-in Lo-Fi music player to create an ideal work environment, as well as a Task manager that seamlessly syncs across all devices along with a Pomodoro timer to help you keep track of your time.

The user interface of TaskTunes has been thoughtfully designed to enhance the user's experience. The colors and visuals used are designed to create a calming and productive atmosphere. The application prioritizes user satisfaction, offering a range of features to ensure a smooth and enjoyable experience. From a wide selection of Lo-fi songs to a user-friendly "forgot password" functionality, every aspect of the application is designed with the user in mind.

TaskTunes is a highly responsive application that functions seamlessly on both mobile phones and desktop computers. While it can be used on mobile devices, utilizing the desktop version provides the best experience. The desktop version offers additional features such as the Task Manager, which includes a simple drag-and-drop functionality for tracking progress and achieving goals. This tool uses Appwrite as a backend service that helps to store the tasks of users and also to authenticate users. By leveraging these features, users can effectively manage their tasks and maximize their productivity.

Concept

Humans are naturally motivated by the reward system, which is regulated by dopamine, a hormone in the human body. When we participate in rewarding activities like eating delicious food, socializing, or accomplishing a goal, dopamine is released in specific areas of the brain. This dopamine release creates a sense of motivation in the human body, making it more likely to be repeated in the future.

TaskTunes is built around the dopamine reward system, just like I mentioned earlier. It includes a Pomodoro timer system that helps you track the time you spend on tasks and provides a reward once you finish a task. After the timer ends, it will prompt you with a motivational message to encourage you to continue your work. TaskTunes has two main modes: the rest mode and the work mode, which I'll explain in more detail later. Additionally, it utilizes voice messages to notify you when it's time to take a break or get back to work, based on the mode you selected.

These small motivational prompts serve to boost your motivation and keep you on track to complete the tasks listed in the task manager. But before we delve deeper into the amazing features of TaskTunes, let me take you through its development journey.

Development Journey

During the one-month development journey of building Task Tunes, in this Appwrite Hashnode Hackethon, I had an incredible learning experience. To simplify and summarize my journey, I divided it into three phases: the Ideation phase, the Design phase, and the Development phase. Now, let me take you through each of these phases and share my insights and progress.

Phase -1: Ideation

I used to struggle to manage my time effectively due to my various commitments, including open contributions, content creation on social platforms, and a full-time job. This made it challenging for me to stay focused and manage everything simultaneously. In my search for a solution, the idea of TaskTunes was born.

The concept was simple: to build something that includes all productivity components into a single application. Personally, I found that music helped me stay focused and in the zone thus adding a Lo-fi music play was the best decision I made. Then I incorporated a tomato timer with voice alerts to track the time, and a task manager to organize tasks in a manageable way. Now, the challenge was to design and develop the application.

Phase -2: Design

The design phase has always been my favorite part of product development. When creating a product, I never compromise on having a good UI and UX. The same holds true for TaskTunes. I used a tool called Excalidraw, which is user-friendly and allows for the quick creation of wireframes. After numerous iterations, I finalized a design that I believe is the most remarkable design ever seen in a productivity application.

During the design process, I focused on ensuring that the UI of TaskTunes would encourage users to stay within the application and easily access its various features. The continuously changing background colors are the center of attraction of the tool. The chosen colors have a soothing effect on the eyes and mind, almost like a brief meditation session when observed for just a few seconds.

Designing the timer was a bit time-consuming because I wanted to incorporate numerous features within a limited space. However, I managed to accomplish this successfully. As for the task manager, I aimed to create a one-page application, and incorporating a drawer for it was the best solution. The drawer doesn't occupy much space but remains accessible whenever needed.

I would be happy to quickly share the design wireframes of TaskTunes.

Phase - 3: Development

When I started developing TaskTunes, my first step was to learn how to use Appwrite. Being new to Appwrite, I searched online, read the documentation, and watched some YouTube videos to familiarize myself with it. The documentation was generally straightforward and covered everything I needed to know, although there were a few typos in the text and code that caused some confusion at times.

Once I grasped the basics of performing CRUD operations using Appwrite collections, I began building TaskTunes. I chose to develop the application using React, along with Tailwind CSS for styling and Material-UI as a component library to speed up development. I also utilized Redux for managing some of the inter-component states. Appwrite made it easy to transmit data from the client to the server, contributing to a shorter build time for the Task Manager feature.

The most complex part initially was implementing the music player, as it involved many inter-component dependencies. However, with the help of Redux, I managed to resolve this issue. Another task was working with timers, which was new to me. Resetting, clearing, and starting the timer, along with incorporating voice messages based on the user's mode and displaying appropriate prompts, proved to be a bit challenging. Fortunately, having a design in place from the beginning helped me complete the UI development without hesitation.

The drag-and-drop functionality in the task manager was also somewhat complex. Once I completed the basic structure of the application, a significant portion of my time was dedicated to improving the user experience. This involved adding snack bars, loaders, and other enhancements. The authentication process was relatively straightforward due to Appwrite's seamless authentication features. I implemented the forgot password flow and Google login with ease.

Throughout the development process, the aim was to create a clean and responsive UI for every page of the application. By the end of this phase, I successfully achieved this goal, which I am truly proud of.

Features

TaskTunes offers three key features that I will discuss in detail in this section of the blog. However, I must say that the UI/UX of the application remains its standout feature.

\=> 🎧 Lo-Fi Music Player: Help you to stay in focus mode

The first feature of TaskTunes is the Lo-Fi music player. This music player offers a collection of fantastic Lo-Fi songs that you can control through the audio player panel located at the bottom. From there, you can play, pause, skip to the next or previous song, adjust the volume, and even mute the audio. Additionally, there is an intuitive song container where you can play or pause any song from the list. You also have the option to shuffle the songs. This feature will help the user in maintaining focus, as that is the primary goal of integrating this feature into Task Tunes.

\=> ⏰ Pomodoro Timer: Helps you keep track of your time with a reward mechanism

Next, let's talk about the Pomodoro timer feature in Task Tunes, which assists users in keeping track of their time. This section includes three default timer buttons: a 5-minute rest timer, a 15-minute quick work timer, and a 25-minute focused work timer. There is also a reset button to restart the timer. It's worth noting that Task Tunes has a slight variation from the traditional Pomodoro technique, as there is no 15-minute long break included. Instead, there is a 15-minute quick work option.

When you click the 5-minute rest button, it activates the rest mode. On the other hand, clicking the other two buttons puts you in work mode. You also have the flexibility to add a custom timer and select the work mode, which can be either "rest" or "work". The mode selection is significant because it determines the type of reward prompt that will appear. In rest mode, a motivational message will be displayed in a modal window, whereas in work mode, a reward gift modal will open to acknowledge and appreciate the time you spent completing a specific task. Additionally, It also comes with a small exercise to help you relax in rest time when you open the Gift. Let me show you some images of the same.

As discussed earlier, this feature operates on the dopamine reward system, which helps to enhance your productivity and keep you motivated to perform at your best.

\=> 📋 Task Manager: Helps you seamlessly manage your tasks

Now, let's move on to the third key feature of TaskTunes, which is the task manager. The user experience of this feature is truly amazing. You can easily add your to-do tasks and then simply drag and drop them into the "Todos," "In Progress," or "Completed" containers as you make progress. If needed, you can also delete any task. The text input in the task manager utilizes a text area, allowing you to add as much text as you require without any restrictions.

One particularly cool aspect of the task manager is the convenient side navigation bar. From there, you can quickly view the number of pending tasks, and hovering over the icons will provide a preview of the tasks without having to open the drawer. This saves time and allows you to effortlessly check the tasks in the "Todos," "In Progress," or "Completed" states.

To enhance accessibility, I implemented a shortcut key for the task manager. When users double-tap the "t" key on their keyboard, the task manager drawer instantly opens. This quick shortcut allows users to access the task manager without any delay and use it according to their needs.

Apart from these key features, you can also update the Profile image in TaskTunes.

Tech Stack

• React Vite: Fast and lightweight development environment

• TypeScript: Enabling type safety in the app

• Tailwind: Speeds up the process of styling

• Material UI: Easy-to-use UI components

• Redux: Easy inter-component state management

• Vercel: Hosting platform for high availability and rapid deployment

• Appwrite Cloud

  • Auth API

    • Email/Password and reset password

    • Google

  • Database API: Manages storage of user-specific tasks

  • Storage API: Handles storage of user profile images

Challenge faced

• The most challenging part of building this application was ensuring that the UI/UX matched my design, which involved selecting the right colors, and layout, and prioritizing user experience. Though time-consuming, it was well worth the effort.

• The second challenge arose when transitioning my Appwrite setup from the local host to the Appwrite cloud. While encountering a few issues during the process, the supportive community quickly helped resolve my queries.

• Implementing the functionality to save and retrieve user-specific tasks from the database posed an initial challenge, requiring careful handling of the JSON structure. However, with the appropriate hydration and retrieval methods, this challenge was overcome.

• Additionally, the development of the music player and timer was challenging. As these components are complex, it took some time for me to figure out the way in managing data flow within the application components based on user actions.

Public repository

Follow the following link to visit the GitHub repository of Tasktunes

Demo link

Website: https://www.tasktunes.net/
YouTube Demo:

Product Twitter handle: https://twitter.com/tasktunes

Let's connect :)

You can support me by buying me a cup of coffee

Here goes the link: Buymeacoffee

Connect with me on

• Twitter

• Linkedin

• Github

• Showwcase