Cloning a Website in 5 Days by Beginners…Is it possible?
Yes. You read it right and it is possible! But first of all, let me brief you about myself.
Myself Gayathry. I am a student at Masai School and aspire to become a Full Stack Web Developer. It’s been around 2 months I have joined this institute.I have just finished unit two and learnt the basics of HTML, CSS and JavaScript so far. As a part of evaluation at Masai School, we get websites to clone and I am here, writing this blog to share with you about my experience while building this project.
The projects we get are basically group based and It’s the Masai team who allot the groups. So, I got the list on Day-1 and came to know about my team. Lithium was our team name and my teammates were Rakesh and Saravana.
I have never talked to them in these 2 months. Neither we have ever communicated with each other. So, we got introduced to each other and came to know that we were all from non Computer Science background. Later, we discussed about our strengths and weaknesses, and the very next step was to go through the website.
So the website we were allotted to clone was Toggl Track.
What is this website all about?
Toggl Track is a simple (& powerful) time tracker that helps you to learn how much your time is worth. With this time tracking app you’ll be able to start tracking your hours and manage your hours. You can track important tasks, use reports to see how you spend your time and boost your productivity.
Okay…now lets get back to my story again….
While going through the website, we were noting down the functionalities of every page. Each page had different functionalities. One page had timer, some pages had input box, whatever we would type on the input box should be visible in the page, if we delete an element it should get deleted from the page,a page had a calendar, we had to fetch login details from the login page, had to create a bar graph,the pages had chat box at the right bottom and all the pages were interlinked with each other.
Also, how could we forget the CSS and Responsiveness of the pages? Along with the functionalities, we had to take care of that also.
Initial reactions were that of excitement, anxiety and a lot of confusion.
Excited because I was going to know my teammates and was going to learn a lot of stuffs from them. Anxious because we had to come up with the results and all the things were to be done with remote collaboration.
We were very confused and were not sure how we could achieve these things in a very short period of time. But then, we made ourselves calm and motivated each other that these things are possible to achieve and if we get
completely stuck some where, our mentors are always there to guide us through. Hence, we decided to try our level best and make the website as it is.
We then decided, on what all pages we need to work and planned to create 8 pages.
Our first step was to create pixel perfect static pages and distributed the pages among ourselves. Hence, on Day-2 we started working on our respective pages.
On Day 3, we completed the pages, pushed the pages on git hub and merged our works together. Now, the time came to work on the dynamic part. By the eve of Day-3, we had a brainstorming session and got clear how to achieve
the functionalities of the pages.
We started working on it and it continued till the end of Day-4. By the way, our Day-4 was New year….Jan 1st,2021 and the day came out to be very good for us, as we accomplished all the dynamic parts we planned for.
By the end of Day-4 ,the pages were ready with all the functionalities and proper CSS and then, the pages were merged.
Then came the Day-5, the final presentation day. Final checks were done and we decided the approach for the presentation.
Do you want to experience the website we built? Get the link at the end of this page and follow these steps to use our project.
1) Open login.html on the live server (using VS code live server)
The web app starts with the login page. After putting in required details, it moves on to the home page/dashboard.
2.) Started a new task or a project and want to keep a track of it ?Here comes the Home page where you can start tracking your tasks.
Our Home page is Timer. It has an integrated stopwatch that tracks the time you spent on a particular project. You can add the task name or assign project in the description box at the top, add tags and project details along and click on the start button to track time.
Note: If the project and tag tabs are empty, you need to go to the respective pages and create them first.
3) Create a project
Use New project button in the Projects page. Added element will be displayed as soon as you create it.The data you enter, get stored in your browser’s local storage and you can access it whenever you want. You can also delete the project using delete button.
4. Add Tags
To add a new tag, Go to the Tags page and add the tags using New tag button . The tags also have delete feature attached. On creating and deleting,you’ll get a pop up message at the bottom.
5. Go Back to the Timer page and get the results!
Now go back to the Timer page and start the time tracker. On clicking the stop button, you will get a block with task name, assigned project name ,tag name, along with that will get start and end time.You can also view your weekly and daily task details using the calendar view button.
6. Add your clients.
7. Check your Login and Team details in Team page.
Don’t forget to use the chat box!
8. Here’s the glimpse of some pages which are currently under construction.
Conclusion
Successfully completed!
My team was successful in creating all the targeted pages of Toggl Track. By working on this project, we were able to understand the real world scenario and developed skills like Team work and Remote collaboration.
The cloned website is available on GitHub. Do visit our created website to explore more about our work. The links are mentioned below.
Thanking Note
I had a very good experience and could learn a lot from my fellow team mates. We helped each other to eliminate our weakness and had the same commitment level to complete this project.
I would like to thank Masai School for their constant support and guidance throughout the project.
Links:
Original website :
https://toggl.com/track/login/
Cloned Website (GitHub Link) :
https://github.com/Gayathry7/Toggl-Track-Unit2-Project
Tools and Resources used
Stack: HTML, CSS, JavaScript
Libraries: Chart.js, fullcalendar.io
Resources: MDN Web Docs, w3schools, Font Awesome.
