My FeedDiscussionsHeadless CMS
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more
Productiview - Get productive and stay on the track

Productiview - Get productive and stay on the track

Varchasvi's photo
·Feb 27, 2022·

5 min read

When we think about getting productive or being more efficient than before we think about staying on top of our time, making things easily accessible, getting a relaxing environment and making our tools more natural. Often times we get caught up in this loop of curating different tools and tricks that make us even lesser productive. We end up losing focus on our work and track of our time. A day gone wasted, thinking about all the better things that we could have done. Looking for some solution online, getting excited about it, integrating it in our workflow and end up knowing that it comes with a price! Who wants to put some extra effort into dealing with a complicated user interface and paying for a subscription. During these pandemic days when most of the industries switched to WFH, having a productive companion app is a must.

The origin of the idea

One day while handling a few different apps at a time, I asked one of my friends about the above-mentioned situation. His answer pointed me to a productivity app that was quite popular already. But the problem was, most of the actual productivity tools of the app were paid! It doesn't matter whether you are a programmer or not. The very first app we all open on our laptops these days is a web browser to attend the standup meeting. What if that one click to your browser sets up your mood, brings you on the right track and make your time management super easy! And all this for free.

Introducing Productiview

As the name suggests, "Productive View" or simply "Productiview" is the new homepage that not only manages your work time but also sets up the right tone for the day. Today Productiview is live with its first version v1.0.0 beta.

Productiview v1.0.0 beta features

productiview home.jpg

Save your bookmarks in a better way. Create a collection of all your important links. Jump faster without missing or getting lost in some confusing UI.

productiview home bookmarks.jpg

Feel like home! You can continue searching on Google or can directly jump to a website.

productiview home google search.jpg

The tried and tested Pomodoro is here. 25 mins of work, 5 mins of break. This technique keeps you away from daily burnouts while keeping your thoughts fresh and active. The Pomodoro utility comes with pleasant notification sounds along with desktop notifications so you can focus on your work without checking the timer.

productiview home pomodoro.jpg

Speaking of freshness, here's an integrated music player that plays the sounds of nature. Productiview comes with three different nature sounds: Rain, River and birds. Play the sounds during your break time or work along with the sounds.

productiview home music player.jpg

The settings menu is as soothing as the view. Edit your view and make your Productiview truly yours!

productiview settings.jpg

That's all of this version. But guess what, version 2 is on its way! I'll talk more about the upcoming versions and features. But if you are excited to get your hands dirty already, consider jumping on to the app.

Productiview v1.0.0 beta

Upcoming versions and features

Version 1.1.0 Global

  1. Data caching to make searching even better
  2. Color accent settings
  3. Bigger audio library
  4. Smoother interface

Version 2.1.0 Global

  1. Notes keeper
  2. To-do List
  3. Reminders
  4. Weather info based on Geo-location

Version 3.1.0 Global

  1. Multiple devices, single setting with Google Account
  2. Share your settings

As you can see, we'll be moving towards a collaborative environment. In fact, version 4 and version 5 features are also planned and are currently under review. Productiview is an app that will never fail to disappoint you!

Technical walkthrough

Let's talk about the technologies that are powering this application.

Core technologies

  • React v17.0.2
  • TypeScript
  • Styled Components
  • React Icons
  • Firebase Analytics
  • Netlify Hosting

Standardization and open-source compatibility setters

  • ESLint with TypeScript and React linting based on Google standards
  • Prettier code formater
  • Husky hooks

Other supporting tools

  • Adobe Photoshop for graphics, banners, artworks and logo
  • Adobe Illustrator for vector logo

Development drawbacks

Currently, the application is not having a robust design system. I haven't integrated any component or design system library. A strong theme and design system is yet to be developed. This will let the app move from beta to global version while making it easier for open-source contributors to enhance the application.

A strong pre-push husky hook is missing. This is required to maintain the open-source coding standards.

The codebase follows a modern modular React pattern. But there are many areas that can be broken down to even smaller re-usable components. I might consider implementing the Atomic Design Pattern for shared components.

Application drawbacks

Setting up the application as the default home page takes 4 steps. This can be reduced to lesser steps by creating a web extension.

Currently, the app is best optimized for the Chrome browser. The upcoming minor updates will slowly improve the overall web compatibility.

BTS of the development

It's obviously hard to keep up with a project when you are also a full-time web developer. The project got started on 13th Feb 2022, four days before I came across this hackathon. This hackathon obviously gave some extra boost to the development by giving a chance and another purpose.

At times I actually decided not to pursue the hackathon and just focus on the application development to make the overall app super robust from the start. But keeping that attitude in mind I felt super slowed down for a while which made me less productive. And how can I develop a productivity app without feeling productive? 😉 So I switched gears and moved forward with full force!

Closing remarks

The last 14 days were super hectic with 9 hours of job, an hour of break and then back to work for the next 3-4 hours. Building an app takes a lot of effort and it's not just about the code you write, it is about the flow you maintain, the consistency, the thought process and the will to pursue the idea.

I am glad to share my first ever blog on Hashnode! And about Netlify, being a React developer Netlify has always been my go-to hosting platform, so it was a no-brainer for me to work with the platform.

Thanks a lot, everyone for reading the entire blog! I would love to have further discussions on LinkedIn. Till then, stay happy and "productive" with Productiview