I was driven to construct an MVP (minimum viable product) and navigate the entire journey of transforming concepts into tangible products. However, I often found myself delaying the process. This time, armed with the robust capabilities of #appwrite for the #AppwriteHackathon, I committed to propel myself forward and develop my productivity application - Focusify, the tool I've always wished to have.

My gratitude extends to Appwrite and Hashnode for providing us with this remarkable opportunity to innovate and create.

Team Members :

Supanat Konprom - Supanat Konprom (Dev)

Saran Chaisthan (UX/UI)

Description :

Focusify.io, crafted with cutting-edge technologies such as Next.js, Appwrite, and Tailwind, offers a unique productivity enhancement experience. Appwrite, a robust backend-as-a-service (BaaS), fortifies the functionality of this app, making it a comprehensive tool for productivity. With an array of features such as a to-do list, note-taking, Pomodoro timer, a curated music playlist featuring soothing lo-fi tracks and cozy night tunes, ambient soundscapes, and the ability to customize your own wallpapers or live backgrounds, Focusify.io is your one-stop destination for a balanced work rhythm. Harness the power of these features to streamline your tasks, enhance focus, and create a work environment that resonates with your style.

Indulge in the tailored features of Focusify.io to create an immersive work atmosphere that encourages productivity and keeps distractions at bay. The thoughtful integration of a to-do list, note-taking, and Pomodoro timer lets you organize your tasks, capture ideas, and work with time efficiency. Meanwhile, the curated music playlists and ambient sounds set the perfect backdrop for your focused work sessions. The added feature of customizing wallpapers allows for a personal touch, giving you the liberty to create a workspace that truly reflects your personality. With Focusify.io, maximize your productivity while enjoying a harmonious balance between work and relaxation. Embrace the future of productivity tools with Focusify.io.

Tech Stack :

• Next.js: Frontend foundation of the application is established using Next.js.

• Tailwind CSS: Used to style the complete application

• Hostinger VPS: This has been used for deploying the project to production.

• Appwrite Cloud

  • Authentication: This helps a user to sign up or log in to their account on our web app.

  • Database: This contains user data for different features of the application.

  • Storage: This has been used to store images uploaded by the user while adding data to different features of the application.

Challenges We Faced

1. Adapting to Next.js 13: As this was my first encounter with this version of the framework, comprehending its features and nuances posed a significant challenge.

2. One significant challenge I faced was related to the functionality of setInterval in Next.js. When switching tabs, the setInterval function ceased to work as expected, disrupting the functionality of the app. To address this, I had to explore alternative methods and ultimately decided to utilize Web Workers. The transition to using Web Workers was a learning curve, demanding a deep dive into its implementation and use in the context of Next.js. This issue not only tested my problem-solving skills but also broadened my understanding of managing background tasks in JavaScript applications.

3. Integration with Appwrite: Aligning the functionalities of Appwrite, a backend-as-a-service, with the frontend developed using Next.js required careful planning and execution.

4. Tailwind CSS: The adoption of Tailwind for styling presented its own set of challenges, particularly in terms of learning its syntax and understanding its application to create a visually appealing user interface.

5. Feature Implementation: Developing and integrating various features such as the to-do list, note-taking, Pomodoro timer, music playlist, and ambient sounds required meticulous work to ensure a seamless user experience.

6. Customization Capabilities: The implementation of customizable wallpapers or live backgrounds was a complex task, requiring a deep understanding of user interaction and interface design.

7. Testing and Debugging: As with any new application, identifying and resolving bugs, and ensuring that all features work as expected across different platforms and devices was a challenge.

8. Time Management: Balancing the development process with other responsibilities and ensuring the product was ready for the Appwrite Hackathon deadline was a demanding task.

Public Code Repo :

Dive into the Behind-the-Scenes of Focusify.io - Explore our public code repository to understand the nuts and bolts of this innovative productivity application. See how we've utilized Next.js, Appwrite, and Tailwind to build a tool that's changing the game in personal productivity. Click here to explore our code.

Demo Link :

Experience Focusify.io: Your Personal Productivity Companion - Navigate through the seamless integration of task management, note-taking, Pomodoro technique, ambient sounds, and much more. Experience the future of productivity tools today. Click here to start your journey toward a more focused and productive lifestyle.