Designing and implementing a fully functional clone of clockify.com in just 4 days!!
Another successful month has passed by for us students @Masai School. And you know what comes after a month of hard work and training — yes, its the build week! This time we were handed an exciting task of creating a near pixel perfect clone of the website — clockify.com
We have currently finished two months @Masai School where we have digged deeper into the core concepts of Javascript, HTML and CSS. With these newly acquired skills and knowledge, it was finally time to put them to a test.
First, all the students @Masai School were divided into a team of 3 members and each team were given a unique project, i.e. to clone a particular website in just 4 days of time. I was put into Team Hydrogen, which comprised of hard working and dedicated members — Akshay Kadam and Pavithra. So the three of us were handed the task of creating a near pixel perfect clone of clockify.com website.
The main task this time was not just creating the static home page, as we were asked for our first project, but to include some of its functionalities. This was the major challenge we faced while working on this project. So we divided the entire project into parts and assigned it to each of us according to our comfort level (parts we were confident that we could complete).
In just one day, we managed to create the Home Page, Login Page and the Sign Up Page of the website. Not only that, we managed to make it mobile responsive as well and also add functionalities like the user has to enter valid email and password in order to sign-up into the website. That was some serious efforts put by all of us and it showed that we were all equally excited and dedicated on creating and completing the project. And here are the snaps of them -
Next it was time to focus on the main challenge, creating the main functionalities of the website. After a long thought and discussion on which all features we should implement, we finally decided to work on 3 main features — Timesheet, Timetracker and the Dashboard.
So let me explain what exactly all of these pages do.
Timesheet- This page basically asks the user what project he/she is working on. The user has to enter the project name and they are provided with a full weeks chart where they are supposed to enter the number of hours of work they are going to put on that particular day. So each days work hours are calculated and summed up and this is shown in the total hours spent on the project for that week.
Timetracker- This page basically takes all the input user entered in the Timesheet page and divides it into each day and the number of hours user took to complete some work along with the description of the work. The user can can also delete a day’s work.
Dashboard- This page basically represents all the data collected from both Timetracker and Timesheet page and displays it in graphical format. It also shows the user on which particular day of the week he/she has worked the most and the least.
These were the main pages that our team were able to build in the remaining 3 days. These pages were challenging to build but our team never gave up and kept working on completing it.
Our project was finally complete thanks to all the hard work put in by all the members. This surely would not have been possible without them. And last but not the least, I would like to thank all the members of Masai School to give us an opportunity to work on this amazing project and all the support they gave which made it possible for us to complete this project.