How we made a website in just four days?
Working on a project as a team while learning gives us more knowledge of the topics we have learned. We want to share the challenges we faced and solutions to overcome those challenges to get the desired output.
As a part of the curriculum at Masai School, we tried cloning some part of the website Harvest, which helps us to track the time we spent on the project, the budget of the project, and invoices in a very effective way.
Moving onto the main topic...
Planning
It should be the first and foremost thing we have to do before proceeding to the actual project. This step mainly consists of dividing the workload across the team based on their strengths.
Day - 1
We have planned and divided the website into small parts. Each part is assigned to each of us based on our strengths. On the first day, we worked on the landing page, sign-in, and signup pages.
Challenge - 1
As we know challenges are a part of every project, we also encountered the challenge on the very first day because of the different programming styles of every team member.
Solution
Every team member should follow the same standard programming style for linear workflow.
Landing Page
Sign-up Page
Sign-in Page
Day - 2
On the second day, we started working on the main functionality of the website, which is time tracking. Here comes the most crucial thing a team should concentrate on
Communication
Communication plays a critical role in a team. If two or more people working on the things which are inter-linked then good communication never lets us down in achieving the target.
We designed all the static pages and two dynamic pages on day two.
Challenge - 2
As we have to use the data of one page in the other, we needed a place where we can store the data to access it in the future.
Solution
Local Storage of the web browser. Yes, local storage helps us a lot to store the data and access it whenever required.
Time Sheet Page
Create a Project Page
Day - 3
We started implementing the most important feature of the website, the timer, and the graph based on the result of the timer.
Challenge - 3
New day new challenge. As we have not used graphs before, we found it very difficult in producing the graphs from the timer results.
Solution
Chart.js. It helps us to produce a beautiful graph simply using a canvas tag. We recommend you to check this extraordinary library.
Timer Page
Graph Analysis
Day - 4
Testing
Testing of a website and its functionality is also important before we finalize our project.
We tested our product for the best result and also verified that our code is more readable.
Because...
Any fool can write code that a computer can understand. Good programmers write code that humans can understand - Martin Fowler.
I hope you liked reading about our experience. I am always happy to hear your suggestions.
Our Team
Naeem Shaik
Github: Naeemns
LinkedIn: Naeem Shaik
Rajat Sahu
Github: rajatsahu18
LinkedIn: Rajat Sahu
Milind Dev
Github: Milind-dev
LinkedIn: Milind dev