Vadati

Vadati - The chrome extension for focused, distraction-free productivity.

How It's Made :

Tech used :

• HTML, BEM CSS, JavaScript
• React JS
• localstorage API, with useLocalStorage hook
• Unsplash API, OpenWeatherAPI
• Voice to Text using SpeechSynthesisAPI which is published as a light npm package for others to use

Motivation:

As a programmer, I often spend a lot of time using my browser and integrated development environment (IDE). However, I found the default browser (Edge/Chrome) to be visually unappealing and rarely used the search bar.

In search of a better extension, I stumbled upon momentum. While it was helpful, it had too many unnecessary features and seemed cluttered. I decided to create my own extension, incorporating a voice input feature for convenience. This led to the development of Vadati, a chrome extension designed to remove distractions and help users focus on a single task.

P.S. - Vadati in sanskrit means speaking 😁

Lessons Learned :

• The importance of simplicity and user experience while implementing the local storage auth
• The value of leveraging API's and third-party services
• Use of env variables, and how to store and manage them secretly while deploying

Future Improvments:

• Optimize the loading of background images by implementing lazy loading.
• Host and serve optimized images through a cloud service like Cloudinary rather than using the Unsplash API.
• Add a to-do list feature in the bottom-right corner for tracking additional tasks.
• Implement a Google login feature to store daily progress.
• Research and consider alternative approaches to using the useEffect hook for fetching images and weather data."

Links