A Productivity Web app from scratch!

#node #webdev #productivity

My Productivity Buddy

Intro

With so much free time during lockdown, I thought about doing a project that would help me learn a lot of things. So, during Hacktoberfest 2020, I decided to build a productivity web application, as a part of which I would be exploring some calendar APIs, building a calendar from scratch and much more!

Most of my project is done, finally. Only some finishing touches and later improvements remain. So, I am sharing how exciting the learning was and what challenges I faced.

A Roller-Coaster ride

Start and High Point

I made the web application using HTML, CSS, JS, Node and MongoDB. Firstly, I focused on the primary requirements of the project. I included features of making, saving and editing timers, tasks and events. Tasks involved nothing much except a proper schema. Making a timer was a new thing for me. I made it using JS. It was a bit challenging to set the countdown time interval from the values taken from the view (I didn't use AJAX for this) and popping the 'Time Up' etc. at the right time, but it was real fun! When I finally finished with it, I had a cute timer (with an alarm that mom hates) and I can now edit, save and delete my tasks and timers and use them any time later conveniently.

High Point to Low Point

Next, I took on the challenge of building a calendar from scratch. I have never done it before, nothing to the likes of it. Doing it without React meant more lines of code. But I do not have a great hold over React, and I had already started developing the application without it, so I decided to continue. With blessings from the Dev community and other online resources, I managed to make a calendar with views of namely 'Day', 'Week', 'Month', 'Year' and 'Decade'. I had no experience with AJAX before this, and it was during making this calendar that I learned it. I was almost stuck at the point when I wanted to make my calendar jump from one view to the next and increment or decrement dates...

Low Point to High Point

For the different views of the calendar, I used partial views. To make the calendar interactive, I have used AJAX calls to get the views with proper dates whenever the user clicks on that view (or lower views in higher views, like a day in a particular month). The 'Day', 'Week' and 'Month' views show all the events for the days, which can be edited or deleted. So finally, I was able to make and save events after I finished with the self-made calendar!
With AJAX by your side you can reach the moon.

Firm Ground at Last!

Next comes integrating OAuth2. I had planned to explore the Google Calendar API and Microsoft Outlook API as part of this project, so adding OAuth2 comes along unconditionally. This is the first time I worked with OAuth2. Before this, I have only used them in Python projects. So, I included Google and Microsoft authentication, and for now users can view their upcoming events in the next 24 hours. The major challenges I faced in this were finding the right passport module for Microsoft and integrating the accounts with existing user accounts. After going through a lot of articles, I was finally able to accomplish all of the targets I set on initially.

Celebration

Last, but not the least, I learned many more useful things such as using main, header, footer and sections in HTML, full screen sections and much more. I had a lot of fun doing this project (I worked on it alongside my semester, which might have hampered my performance a bit :P). I believe this is one of the best projects I have worked on so far, and learning so much in such a small time period was awesome. I started this project in mid-October this year and finished it today, i.e., 10th December 2020.

For all of this, I am really grateful to the online coding communities that keep providing answers to all questions, thus accelerating our learning process.

Feedback Required

I request you to check out my project here, like the project, fill the feedback form there and please leave your comments and suggestions below. It would be really helpful!!!

If you like the website, please star my repo here