How I built my own productivity app

Featured on Hashnode
Featured on daily.dev
Listen to this article

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 ideas into products. But I would always find a way to postpone it. But this time with #christmashackathon, I decided to use the magical powers of coding and push myself to build my own productivity app, the one I wish I had.

tabwave-full.png

πŸ€Ήβ€β™‚οΈ 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. But deep down I felt I need a simple, minimal productivity tool and the idea of tabwave was born.

πŸ’‘ The idea

The idea was quite simple. All I wanted was a bunch of productivity tools like a Pomodoro clock, a to-do list, 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 feel I 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. These are the steps I followed.

  • Divide the whole app into different components.
  • Create a minimal user interface for a single component.
  • Work on the functionality of that component.
  • Improve its UI to give it an aesthetic look.
  • Repeat

Technologies used

  • React
  • Tailwindcss

🌊The challenges

The biggest challenge was turning a react app into a chrome extension. The problem comes when react creates multiple chunks of js files in the production build by default. And it violates the CSP (Content Security Policy) of the chrome extension.

I was stuck. I thought I won't be able to fix this. I spent the next few days looking for a way to make it work. Eventually, I tried everything I could find. Creating a .env file with INLINE_RUNTIME_CHUNK=false worked but it wasn't the best solution. Finally, I found another way by configuring the craco. I am glad I didn't give up.

πŸ“¦ The final product

I am very happy with the final outcome. This is exactly what I wanted to build. Here are a few cool features of Tabwave.

  • 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.

shortcuts-tabwave.gif

  • Can I call it a productivity app without a to-do list? No way. Get things done by managing your daily tasks.

taskapp-tabwave.gif

  • 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

pomodoro-tabwave.gif

  • Sticky notes to keep your brainstorming ideas and important stuff.

notes.gif

  • 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.

activity-tabwave.gif

  • Did somebody say dark mode?

frame_chrome_mac_dark (5).png

🀩 Excited to try it

I have deployed its web version at tabwave.now.sh. So you can try without installing it at all. And if you love it, then only install it. Sounds okay! It's available on both Chrome and Firefox browsers.

Install Tabwave on Chrome or Firefox.

Wrapping up

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.


I keep writing about the things I learned and applied. So you can connect with me on Twitter, Github or Linkedin. Also, subscribe to my newsletter and stay up-to-date with my latest blog posts.

⚑ Happy learning!

Syed Fazle Rahman's photo

Wow, loved the UI. This is amazing, very polished as well.

Bookmarked the page, will try it for a week and leave feedback for you. πŸ™Œ

Rutik Wankhade's photo

Thank you so much. 😊

Ashutosh Dash's photo

Can you add a dark mode toggle button?

Show +2 replies
Ashutosh Dash's photo

Rutik Wankhade thanks for the update. i checked it out and its really great. kudo to u

Ashutosh Dash's photo

Rutik Wankhade a feedback: the red circle over the 25 min timer looks a little faded. i believe it would look great if you can increase the redness

Sandeep Panda's photo

It's not just about coding. It's about problem-solving.

I completely agree. It's great that you are thinking in that direction. I played around with the app. It's polished, delightful and very easy to use. Kudos!

Is the code open source by any chance? I am sure others would love to find out how you built it and get some inspiration.

Happy New Year 2021!

Rutik Wankhade's photo

That's so nice of you. 😊 Thank you so much.

It's not open-sourced yet. But as soon as it gets published on the web store, I would love to make it open source for everyone.

πŸ™Œ Wish you a wonderful year ahead too.

Anh's photo

Rutik Wankhade I love to get to the source code lol

Nathan Shoemark's photo

Looks really good. Just to let you know that the bored feature isn't working because you're loading the http version of the boredapi instead of https

Rutik Wankhade's photo

Oh! Thank you so much for pointing it out. You are the best. 🀝 It's fixed now.

Deactivated User's photo

Thanks for sharing such inspiring post & great extension. May be an upcoming feature point - It is required to carry forward unfinished tasks to the next day[I know Tabwave will display task list] & see the history by each day. I am unsure if I make sense.

Rutik Wankhade's photo

Thank you so much. πŸ‘ Not clear about your suggestion, but will give it a thought. ✌

David SalomΓ³n's photo

That's amazing, something we need. Hopefully is deployed in Chrome soon. Congratulations good job.

Rutik Wankhade's photo

Thank you. Hopefully soon πŸ™Œ

Jatin Rao's photo

It looks awesome, really loved the minimal UI 😍

Rutik Wankhade's photo

Thank you so much, Jatin 😊

Rahul's photo

Bhai. I loved this. This is something amazing and my 2020 will be awesome. Please add more features in it.

And does this store the info when you come back to the website again?

This amazing thing should be on ProductHunt.

Rutik Wankhade's photo

Thanks, Rahul Bhai 🀩 Yup, more awesome features on the list. And It does store everything in the browser itself.

πŸŽ‰ As soon as the extension will be live on the chrome web store, I will launch it on ProductHunt.

Ashutosh Dash's photo

Hey, great app, kudos to your hard work. I'm just curious to know, you will be paying through your pocket and providing it us for free? Why? How will you generate revenue from it?

Rutik Wankhade's photo

Thanks, Ashutosh 😊 If the product is worth it, I won't hesitate to provide it for free. Also, I am thinking of adding more premium features in the future.

Ana Vela's photo

This is so awesome! I signed up to get the notification when it is live as an extension. :)

Rutik Wankhade's photo

Thank you so much Ana Vela. Will notify you when it's live. πŸ™Œ

Sathyesh's photo

Very good app. Simple and elegant.

Suggestion: Editable time for relax and focus when you click on it.

Rutik Wankhade's photo

Thanks for your feedback 😊 And yes, It on the list of upcoming features.

Rutik Wankhade's photo

Hey Sathyesh, This feature is shipped now. πŸ™Œ You can edit the time for focus and relax session. Have a look tabwave.now.sh

Santosh the Developer's photo

Hi great app but i found a bug whenever i tried to type url for adding shortcut it automatically focuses on title input

Rutik Wankhade's photo

Oops! πŸ€·β€β™‚οΈ Thank you so much for trying it out and pointing the bug. It's fixed now. πŸ™Œ

Hrithwik Bharadwaj's photo

I was eagerly waiting for your project. Can't wait to test it out

Rutik Wankhade's photo

Thank you Hrithwik Bharadwaj. I hope you find it useful. πŸ™Œ

Victoria Lo's photo

Awesome work!! I love productivity apps :)

Mohd Shad Mirza's photo

This is great. I'll try it out. πŸš€

Show +2 replies
Rutik Wankhade's photo

Mohd Shad Mirza You asked for it, And it's here. πŸ™Œ Now available on firefox. checkout addons.mozilla.org/en-US/firefox/addon/tabw..

😊 Also thank you for suggesting.

Viren Suthar's photo

Thanks for posting it, also it gave me an idea about how to build MVP πŸ‘

Rutik Wankhade's photo

Great. Wish you good luck. I am sure you will build awesome stuff. 🍻

Darlan TΓ³dero ten Caten's photo

Awesome, congrats! It is very hard to keep a project simple enough to finish.

I liked the concept!

Rutik Wankhade's photo

Thank you 😊 It had to be challenging as well as achievable at the same time.

Code Hacker's photo

Hi rutik your articles are great z especially all the blog covers. Can you please please let me know how you create blog covers like this one and the one with "2020 reflection" blog.. it's a request. Pls!

Rutik Wankhade's photo

Thank you! I use canva.

Anh's photo

Simple and useful project. I will try and give feedback to you soon

Rutik Wankhade's photo

Thank you. Would love to hear from you.

Code_ Quinn's photo

Mama, this is ultimate awesomeness, please share code

Rutik Wankhade's photo

Not yet open-sourced. But I am planning to make it soon.

Tapas Adhikary's photo

Rutik Wankhade. Awesome project. Nice work.

Rutik Wankhade's photo

Thank you 😊

Seema Saharan's photo

This is really amazing! Good work.

Rutik Wankhade's photo

Thank you, Seema πŸ‘ Love all the content you create on your youtube channel.

Adeniji Victor's photo

Wow...This is absolutely beautiful!

I really loved how you were able to come up with the idea of combining various productivity tools into a single application.

Great work sir.

Rutik Wankhade's photo

Thank you 😊. I believe Ideas are around us everywhere. Execution is what makes the difference.

PS- No sir, I am just like you.

Marvin Kweyu's photo

Great work @rutikwankhade! I loved how you referenced busy vs productive. Fact file right there. If you don't mind me asking, what backend do you have up? I have a similar project but cannot seem to get the logic up. Having different people access the application and maintaining todo lists across different users without a mixup all without login?

Rutik Wankhade's photo

Hey Marvin Kweyu, Thank you.😊 But here is no backend at all. Everything is stored in the browser itself using local storage. This is just an MVP I built in the #christmashackathon. Maybe in the future, I can add signup/login and more features to it.

Marvin Kweyu's photo

Rutik Wankhade Ahh. ..Makes much more sense. Had me scratching for a moment.

Abdus Samad Azad's photo

Loved the app! Clean and beautiful UI!

Rutik Wankhade's photo

Thank you. The extension will be live soon. You can subscribe on tabwave.vercel.app to get notified. πŸ‘

Olaniyan Oluwasegun's photo

Wow... Great app

Rutik Wankhade's photo

Thank you 😊

Prafulla Raichurkar's photo

This is awesome, loved the UI. Looks super clean.

Rutik Wankhade's photo

Thanks. I just tried giving it a clean and aesthetic look.

t0n's photo

Good Idea & Good Design :D

Rutik Wankhade's photo

Thank you t0n😊

Favourite Jome's photo

I'll love to try out the extension. The live demo looks and works great already

Rutik Wankhade's photo

Thanks Jome Favourite. Can't wait to see it on the chrome web store.😊

Apoorv Taneja's photo

This looks amazing. Really liked the UI πŸ’―

Rutik Wankhade's photo

Thanks, Apoorv. 😊 Glad you liked it.

Marie-Elise's photo

Congrats! It looks great and I really like the random activity generator. Haven't seen that in a productivity app before.

Rutik Wankhade's photo

Thank you. 🀩 I thought why not. Productivity isn't just about doing more stuff. The balance is the key.

Vivek Gautam's photo

I am using Tabwave from last 4 days in my office time .Its great.

Some of the features that can be included:-

1.Analytics of pending / done tasks

2.Progress Bar for remaining office time

Sudham Jayanthi's photo

ok