The latest articles on Forem by Nacho (@nachokai). https://forem.com/nachokai https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F316440%2Fe1811c7b-5c25-4142-8956-03fc839feda2.png https://forem.com/nachokai en Nacho Sat, 17 Aug 2024 19:29:58 +0000 https://forem.com/nachokai/levantame-my-personal-productivity-guardian-a08 https://forem.com/nachokai/levantame-my-personal-productivity-guardian-a08 <p>Hey dev.to community! 👋 I'm wanted to share a project I've been working on called Levanta.me. It's a React-based application that uses face detection to help me manage my work and rest times. Let's dive in!</p> <h2> What is Levanta.me? </h2> <p>Levanta.me is a productivity tool that uses my webcam to detect my presence and track my work and rest times. It's designed to help me maintain a healthy work-rest balance and avoid those long, unintended coding marathons we've all found ourselves in at some point.</p> <h2> Key Features </h2> <ul> <li> <strong>Face Detection</strong>: Uses <code>@vladmandic/face-api</code> to detect your presence in real-time.</li> <li> <strong>Smart Time Tracking</strong>: Automatically tracks your work, rest, and idle times based on face detection.</li> <li> <strong>Telegram Notifications</strong>: Sends notifications to Telegram Bot chat when I've been working, resting, or idle for too long.</li> </ul> <h2> Tech Stack </h2> <ul> <li>React</li> <li>Chakra UI</li> <li>Zustand</li> <li>face-api.js</li> <li>Navigator MediaDevices API</li> </ul> <h2> How It Works </h2> <ol> <li> <strong>Face Detection</strong>: The app uses my webcam and face-api.js to detect if I'm in front of my computer.</li> <li> <strong>Time Tracking</strong>: <ul> <li>When my face is detected, it assumes I'm working.</li> <li>When my face isn't detected, it assumes I'm resting.</li> <li>If I am working and suddenly I go to make a cup of tea, or whatever, another timer starts running, where after a certain time it restarts my “work timer” for having been too distracted, and vice versa, if I am resting and suddenly I get a message from work or whatever, and I sit down again for a long period of time, it resets my “rest timer”.</li> </ul> </li> <li> <strong>Notifications</strong>: The app notifies me via Telegram when I exceed my set work, rest, or idle time limits.</li> </ol> <h2> Challenges and Learnings </h2> <p>Building Levanta.me was an exciting journey. Here are some challenges I faced and what I learned:</p> <ol> <li><p><strong>Working with face-api.js</strong>: Integrating face detection was tricky at first, but it opened up a whole new world of possibilities for me in terms of computer vision in web apps.</p></li> <li><p><strong>State Management</strong>: Keeping track of different timers and states was a bit complex, and I still have a lot of work to do to improve it.</p></li> <li><p><strong>Notifications</strong>: Implementing both browser and Telegram notifications taught me about different ways to keep me informed and engaged.</p></li> </ol> <h2> What's Next for Levanta.me? </h2> <p>I'm always looking to improve Levanta.me. Some ideas for future updates include:</p> <ul> <li>Adding more detailed analytics about work patterns</li> <li>Create accounts to store settings and other data per user (now only uses Local Storage)</li> </ul> <h2> Try It Out! </h2> <p>If you're interested in giving Levanta.me a spin, check out the <a href="https://github.com/NachoKai/levanta.me" rel="noopener noreferrer">GitHub repository</a>. I'd love to hear your thoughts and feedback!</p> <p>Remember, taking regular breaks is crucial for maintaining productivity and avoiding burnout. Levanta.me it's being my friendly reminder to stand up, stretch, and give my eyes a rest from time to time.</p> <p><strong>Finally, here is the deploy:</strong> <a href="https://levanta-me.vercel.app/" rel="noopener noreferrer">https://levanta-me.vercel.app/</a></p> <p>Happy coding, everyone! 💻✨</p> react faceapi productivity burnout