We were asked to build a working Clockify clone in three days, the result may surprise you.
Hello, my name is Akshay, before we dive deep into the story let me shed some light on my background. I am an aspiring Full Stack Web Developer studying at Masai School, it is a skills-building school where anyone who is a 12th pass out can become a Full Stack Web Developer.
For more information please visit the link below
As a part of the curriculum here at Masai School, we had to build a project collaborating as a team of three. We have just finished our unit two and are all loaded with HTML, CSS, Javascript ES6, and DOM concepts in our armory.
Team Hydrogen
Our team was named Hydrogen and consisted of Pavithra, Suhaib, and myself. Prior to this, we had never spoken to each other even after being in the same cohort i.e Titans. So we had no idea about each other's strengths and weaknesses. We got along really well from the very first minutes we met each other on Zoom. And now it was time to analyze the problem statement.
The Problem Statement
The problem statement that was given to us was to build a clone of Clockify web site and also a working clone of their web app.
The Approach
Our approach was simple, analyze the original website and web app, select a few pages and features that we wanted to implement on the clone since we had only 3 days to build the app.
The original Clockify is loaded with numerous functionalities and features, so we did have a hard time to select a few features, and we had to decide which functionalities we were capable of building, to be honest, we did choose a few functionalities which we liked but had no idea about how to code them, but in the end, we figured it out and were able to build and implement them all.
Since we had no idea about each other strengths, so we let each other choose the parts of the website we wanted to build. Instead of dividing the task equally, we divided it with equity.
Tech Stack & Resources Credit
Stack
- HTML
- CSS
- Javascript
Resources Credit
- Pictures and Icons — Clockify
- Icons — Fontawesome
- References — MDN, W3Schools
The Timeline
The Result
We ended up building a website of about 6 static pages and a web app with the following features.
- An app that does not store any user data in the cloud since it has no backend but it stores data in your browser's local storage and you and only you can access your data whenever you want and also delete it as per your wish.
- An app that has an integrated stopwatch that tracks the time you spend on a particular project.
- It lets you add project name and project description and also edit recorded time as per your convenience
- Let's you add multiple projects and track them accordingly.
- Let’s you delete project day and will be effected in timesheet too.
- Suppose you want to add multiple time entries for a project, you can go to the timesheet, and it allows you to add multiple timings all at once and also sums up the timings.
- Whatever project and timings you add here, will be shown in the time-tracker as well, and if delete a project instance in the time tracker it will be reflected here in the timesheet as well.
- A dashboard to analyze your week's work data and get insights on your productivity.
- Don’t like bar graphs? you can choose between 4 more options on the dashboard to visualize your data and then analyze it.
- In the right box, you get total time worked in a week and the average of the time, you also get some insights such as which week you worked the most and how much time did you work for.
- If you select a project from the filter bar, you get visualizations for particular projects, and in the report's sections, you get information about which day you worked the most and what did you work on if the description is provided in the time tracker section.
- You can come back after days and your data will be still intact since it's stored on your local storage.
Conclusions
- Effective communication in a team leads to successful projects.
- Don’t always be in your comfort zone, to learn new things one needs to get out of their comfort zone and try new things.
- Always divide work on basis of equity since different people are good at different things.
- New challenges always bring new learning opportunities no matter if you fail or succeed in completing the challenge.
Want to visit the clone we built? Click on the link below
Click on the Signup page on the right top corner -> fill in the signup form(its a dummy page, inputs just need to be filled to get access to the dashboard)-> and you will find yourself on the dashboard
Want to visit the code repository? Click on the link below
