PHASE 4 Project : TO-DO LIST

Vivek Sanghvi
3 min readJan 28, 2021


In this blog I will be going over my phase 4 project. The link to the Project can be found here:

If you’ve been following my software engineering journey, you would know how little I started off knowing any code at all. I am about a month away from graduating Flatiron and have gotten way more comfortable creating web applications. I still remember struggling to build a simple CLI Application in Phase 1. It’s been an incredible journey and 12 weeks later here we are.

In this phase we were tasked with building out a CRUD project using a react frontend and a rails backend. My partner and I had decided on building out an application that we could continue using even once this Phase was over. After some discussing we had finally agreed on making a to-do list application. Personally, I thought this was perfect because it was an easy way to stay organized and it was something that I continue using in my day to day life.

Background of the application:

The application’s main goal should be to hit CRUD (CREATE, READ, UPDATE, DESTROY).

  1. Users will be routed to the login page when they enter
  2. Users are required to create an account to navigate the functionality of the app
  3. Once an account is created, Users can see their Calendar
  4. A user upon creating an account has a secure password (courtesy of the bcrypt gem)
  5. Users can make a new task and it will update on to the weekly calendar
  6. Users can interact with the mini calendar and it will dynamically render the weekly calendar as well
  7. Users can edit and delete a task
  8. Users can cross off a task once it is completed

*Easter Egg: When a task is completed it shoots confetti onto the page*

A snippet of our calendar
  • Above is a snippet of what a user will see when they first create an account and have not made any tasks yet.

We had set it up so that when any user first goes they are automatically routed to the sign up page. Here, users are prompted to sign up in order to use the functionality of the application. Once a user is created, they will now have the ability create tasks and and have a personalized calendar to keep track of their day to day responsibilities. The end goal of this application is to allow a platform for users to have a virtual agenda book which they can populate with whatever activities they choose to have. Additionally, we implemented bcrypt and JWT Auths in order to secure passwords and logins. In other words, a user cannot sign into someone else’s account and see their calendar/tasks.

The hardest part of the project was implementing the logic for each of the Calendars and having the smaller Calendar dynamically render the weekly calendar every time a new date was clicked. To top it off we had also started with Moment.js and had later switched to date-fns after we came to the realization that Moment.js was somewhat outdated. Yet even after some sleepless nights, we ended up with a pretty cool mini project and can safely say we learned a ton of new things.

As I finish up this phase, our next and final phase we will be tasked with creating a project on our own and I already have a few ideas as to what I wanna build out. Looking back at my time at Flatiron, I would totally recommend it to anyone who is reading this. However if you aren’t ready to put in the work, you shouldn’t even bother. This has been one of the challenging yet rewarding things I have done and sometimes you gotta just-

If you happen to ever need a Calendar for your web application, feel free to check out our github code to see how we implemented it. Addtionally, my partner for this project has written a really informative blog talking about date-fns and why we decided to switch from moment.js.

As I wrap up this blog, I continue looking forward to my development as a Software Engineer and hope our code may be helpful to other developers down the line.