How I built my own productivity app called Tabwave
Before I started learning React, I had a goal. I wanted to build an MVP (minimum viable product) and experience the whole process of turning an idea into a product. But I would always find ways to postpone it. But not this time. A few weeks back I saw an announcement of #christmashackathon organized by Hashnode. I never participated in hackathons before. So I took this as a sign and decided to use my magical powers of coding to push myself and build my own productivity app. The one I wish I had.
🤹♂️ Being productive
We often try to achieve more in less time. I used to think, the more I work, the more productive I become. But I was wrong. There is a big difference between being busy and being productive.
I was always looking for ways to be more productive. I read multiple books, used different tools and techniques. And I realized that all I need is a simple, minimal productivity tool and the idea of Tabwave was born.
💡 The idea
The problem with most of the productivity apps I have used was that they try to create complex systems to follow. And as a result, I spend more time scheduling and managing those system than actually doing the work. So my focus was more on keeping it simple and minimal.
The idea was quite simple. All I wanted was a bunch of productivity tools like a Pomodoro clock, a to-do list, and sticky notes altogether. Nothing fancy and complicated.
I wanted to have all these tools somewhere I can see all day. And I thought what's better than a browser's new tab. Also, I never knew how browser extensions were made so this was a learning opportunity for me to explore it closely.
🎨 The design process
I am no designer, but I do have a good taste in design. I looked for inspiration and started visualizing the structure of the design. I spent hours figuring out the layout. I kept improving it little by little as I progressed with its development. It was an iterative process. My approach was to
- Divide the whole app into different parts or sections.
- Create a minimal user interface for every single part treating them as a whole.
- Work on the functionality of that section.
- Improve the user interface and give it an aesthetic look.
- Repeat
Technologies used
- React
- TailwindCSS
📦 Introducing tabwave
I am very happy with the final outcome. This is exactly what I wanted to build. Here are a few cool features of Tabwave.
🔗 Quick Links
I wanted it to be a new tab chrome extension without losing the default feature of adding shortcuts in chrome. So you can add shortcuts to your favorite sites.
✅ Todo List
Can I call it a productivity app without a to-do list? No way. Get things done by managing your daily tasks.
⌛ A Pomodoro clock
A Pomodoro clock to increase your productivity. Trust me, I am following the Pomodoro technique and it's awesome.
- Focus for 25 min on your tasks
- Take 5 min break.
- Repeat
📌 Sticky notes
Sticky notes to keep your brainstorming ideas and important stuff.
🚴 Activity suggestion
If you keep working all day, you might get tired or bored and might want something different to do. Well, I got you covered. Get a random activity idea in just one click.
🌗 Dark mode
Did someone say dark mode?
👨💻 The experience of building
This has been a great experience for me. The excitement of building something I always wanted to build was awesome. I can't explain how joyful I felt after fixing that nasty bug or completing that small feature. It's so satisfying. Sometimes it got frustrating, but eventually, I somehow ended up solving the problem.
It's not just about coding. It's about problem-solving. The more you do it, The better you become. I have always believed in learning by building and I will encourage you to do the same.
🤩 No more boring new tabs
You can try the web version at https://tabwave-web.vercel.app/ without even installing. And if you love it, then only install it. Sounds okay! It's available on both Chrome and Firefox browsers. Go try it now.
Install Tabwave on Chrome or Firefox.
What's next
This is just the begining. I will continue to work on Tabwave to make it more mindful and beautiful. Join the waitlist now and be among the first to try it out.
