First post of 2k21 let this be a successful year for everyone😄

COVID-19 the thing that changed the pattern of the whole world. It's almost been a year since we (exception for those who already went to office) visited the office. But then it's a sudden and dramastic change for the people like me who not used of working from home.

Ok but working from home is nice is'nt ? spending more time with family , pets . A mixed yes and no will be the answer for this question. People saying no will be the one who's missing the office coffee and snacks. Yeah WFH can be both productive and life balancer when you manage it correctly.

WFH Benefits

• Late wake up
• Break time is not fixed
• you can deside the working time
• network issue,rebooting issue these lies can be a life saver
• spending time with your loved ones
• no costume issues

Simply you work from home rest all are benefits😁

WFO Benefits

• fixed work timing
• provided snacks & coffee
• break & fun time with collegues

So Everything seems to be good in WFH ! what's the concern ? yeah ! everything will have it's own downside too. Mainly we're going to address the health related things.

WFH Concerns

• Extended work
• Dehydration
• Sitting in a same position for a longer period

I think if we address these 3 concerns work from home can be a great thing to enjoy. Chill it can be easily done using the wfh-mate ,wfh-mate is the helper application i've created to solve these things.

How wfh-mate helps you ?

• wfh-mate can help you with the following,
• Measure your working time.
• Make your notes.
• Manage your todo lists for the day.
• Get to know the date, plan for upcoming days.
• Helps you to take a quick & accurate break.
• Remains you to take efficient water and stay hydrated.
• Allows you to follow 20-20-20 rule (Take a 20 second break! * Look at a 20 feet object for 20 seconds).
• Finally shows the total hours worked , total break taken.

https://karthick3018.github.io/wfh-mate/

It has 3 layers

1.Work timer, calender

this layer has the start button to start the work for the day and end button to end the work at end of the day.

timer

The timer updates each second and displays how long you've worked for the day. This can help you to finish your after the actual hours of work (8 hrs is official working time here!). After the time you can close your official work and start spending time for your personal things.

calendar

This is one of the thing i've searched often. Even in the holidays i've logged-in to the office system since I don't know what day it is ! So wfh-mate has a calendar that displays the current date,month and formatted date. You can click that to get the detailed calendar.

2.Notes & todo's

We should not test our memory skills in the list of work todo. If you're correct at 9/10 times that one failed can let you in a difficult situation. So mark your list of works to be completed in the particular day using the todo / textarea provided.

3.Water & break timer

Here comes the most important part or the main line based on which i've created the application.
Break timer - Break is the one which we will less or may be morley use😉 during the WFH. Should avoid taking break ? definitely not!

Taking a quick break can really help you to fix the things you've been stuck with

my most the toughest debugging occurs during the break time , but that must be controlled break as well ! So this timer helps you to take a quick controlled break when the break ends it alerts you by sending a desktop notification or a alert tone or both.

Water break - This is the main one we're missing during the WFH even in office too since we're surrounded by air conditioners we get less thirst ! but that can't be a reason . As per U.S. National Academies of Sciences, Engineering, and Medicine , the intake should be

• About 15.5 cups (3.7 liters) of fluids a day for men
• About 11.5 cups (2.7 liters) of fluids a day for women

so how many of u following this ? myself not ! so this timer can execute every 20/30 minutes and remain you to intake water. Using that break make sure you're drinking the above mentioned level.

20-20-20 rule!

Ever heard of this rule ? this is the one we need to follow to avoid CVS (Computer Vision Syndrome) stress caused to eyes by looking at the monitor for a long time.
So here 20-20-20 rule comes to play every 20 mins take a break for 20 seconds and look at a 20 feet away object. Whenever the water break alerts , you can follow this rule too!

End stats

Once you're done for the day you can press end task and that will give you the exact hours of work you've done after pressing the start work button along with a approx break time taken !

These are the things i've taken to solve and given a solution using the following site. It's like a step ahead of POC . You can use this site to achiveve the above mentioned things . The funky this in the site needs to be replaced by a functionality in the upcoming release.

leave the improper design stuff's i'm not that good in that

Project fetures

OK this project solves somethings that all ? can i close ?
Nope ! not only as a website it can help you with some of the react patterns( add-ons to it !)

• Compound Components (intresting stuff this year credits @kentcdodds)
• Custom hooks
• Reusable UI elements
• Sticky notes and neumorphism effects using pure css

so that's all about wfh-mate use this in your regular day work. Let me know your feedbacks ! forgive me if any error occurs 😉

Use the wfh-mate here

Check the complete project here

check my dev projects on github
Follow me on twitter
connect with me on linkedIn
check my styles on codepen

*cover image illustration credits https://dribbble.com/udhaya

Thanks for your time
Happy coding ! Keep Sharing
Stay Safe