Active App built using React

As a Student of Masai Our Unit end Project was to create the Clone of Time Camp App (An online Project and Time management Application).

In this blog, I will try to explain the thought process, challenges, and our unique solutions to solve them.

Landing Page

1.Thought Process

Though I have experience working with react, it was challenging when the task needs to be done by a team, Initially, we had some issues, where to start, which functionality to work on, coordination got challenging. But with time and good communication, we resolved our differences and started the work. As time was limited (5 Days), we focused on must-have features or create an MVP(Minimum Viable Product)

We decided to go with a few functionalities like user registration, login, users able to create projects, the task in those projects, start time on those tasks, able to sort according to dates, get the report of all the tasks and with overall time.

Login Registration
Login and Registration

2.Challenge’s

Even though we had experience in creating timers and to-do apps this one brought a new challenge of being able to maintain state across the application and even if the user as logged out, and during refreshing pages, some out idea of using interval on the local host wouldn’t work here, and data needed to be stored in JSON file on Heroku server so users can get it in another device too.

Adding project and talk to them was doable, but with each project being able to have N number of sub-tasks and N number of the major task became a bit difficult to digest. And being able to merge these two was the next level.

Project and Time Sheet

3.Solution’s

We started with the basics of the first principal thinking and create our database using the Heroku server which has three-component Users, Projects, and Tasks users data. Each user had data points such as email, password, details, and unique Id. Each project has a project Name, project Details, unique Project Id, and associated user Id.

Each task was created with task name, task details such as status{running or not}, Timer{Start Time, Stop Time} and time Spent in an Array format. Each task when created its start time was the date of its creation, and time spent with an array of zero.

The reports Page

Thus, to know the time spent on each task and reduce the array of time spent, sum.
Though the CSS and the overall presentation were not up to the expectation, The task performed by the application was satisfying.