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

landind_page.png

Sign-up Page

sign_up.png

Sign-in Page

sign_in.png

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

Time_sheet.png

Create a Project Page

create_project.png

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

start_timer.png

timer.png

Graph Analysis

graph.png

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