Open Dashboard - The Open Source Chrome Extension For Productivity🚀

open-dashboard.jpeg

Why I created this chrome extension?

The first thing that comes to mind when thinking of customizing chrome is moment dashboard. I have been using it for almost two years but then I realized my developer superpower 💪🏻💻.

I decided to put my ReactJS knowledge to the test by making something that people can use. So made my own version of the moment dashboard and hence emerged Open Dashboard

What are the features built in the app?

The main features that I integrated into this app are as follows:-

Pomodoro App: Pomodoro🍅 is a technique of splitting a large session of work into a series of small chunks of work time and break time. It is scientifically proven that our brain works the best when It is given regular breaks. Hence the app will help you sit for Pomodoro sessions of 30mins, 45min, and 55 mins. By the way, it is a paid feature in moment dashboard✨

Todo App: It's always handy to have a todo app📝 where you can write all the tasks that you need to complete during the day, so I've added the app to the extension and you know what? this is also a paid feature in moment dashboard✨

Weather App: This is also a must-have feature to make sure you can plan out your tasks if the weather seems to go a little bizarre or just take a break with some tea🍵 if it's going to be rainy soon🌦️

New wallpapers: You will get a new wallpaper with every new tab and you are free to customize the category of wallpapers you'd like to see🖼️.

Quotes: Yes, we have a quote for you every day that will help you go through the day with a smile on your face💖

Clock: Not to mention the clock and greeting message that will always be there for you if you need it⌚.

Technologies used in building the app

  • ReactJS - For frontend
  • UseContextAPI - State management
  • Unsplash API - For background images
  • Free Weather API - For real-time weather
  • TailwindCSS - For styling the app
  • Local storage - Used as a database
  • A Hell Load Of Coffee☕ - What every programmer needs to stay awake😎

Setting up the app

🔷If you are a developer who would like to see its code base, head here

🔷If you want to explore the extension before installing you can visit the live site here

🔷The instructions for setting up the extension in your browser are here

Concepts that I learned while building the app

  • Managing States: The app had a lot of states that needed to be passed to components all over the app, hence I got the chance to practically apply the useContext hook
  • Using proper folder structure: As the codebase started to become large, I understood the importance of having a proper folder structure to properly manage the code
  • Enforcing code rules and style guides: Although it was a little late when I came to learn about the importance of concepts like ESLint and having a custom .prettierrc file, I'm working on transforming the codebase to abide by the rules of Airbnb code style.
  • Documentation: This is the most underrated point in my beginning years, I never wrote comments for my code, however, I decided to make sure that I wrote proper comments for the codebase which is now of immense help to me and for anyone else who contributes to the repository

Conclusion

This app started as a personal project, which is used by me and my friends. You are free to try the app and make customize it the way you want. However please be aware that the app is still in its beta phase so there will be bugs🪲. If you find one or if you have a feature request please let me know on my Twitter handle

Be Awesome, Be You! Peace Out☮️