Cloning of Bitrix24Drive.net

Website built using HTML,CSS, JS-DOM — Team Titans-Carbon

9 min readJan 4, 2021

Project-link: https://github.com/narendrapalacharla/carbonProject

So, here we are, finally in 2021 after several fiasco, and can you guess any person who never wanted the year 2020 to just pass away? No, right? There is no single word to describe the previous year’s emergency situation and the havoc created after the lockdown were lifted. But yes, when it comes to logical thinking, only the number has changed from 2020 to 2021 and everything stays where it was. People were seen enjoying the last moments of the passing year like the next year is going to be alright; well I hope so it happens but no one can predict future and you need to work even more harder to make things under control. Oh yes, that’s the truth of life. You need to keep your hard work going, till you actually achieve it.

Well, when the entire world was enjoying, there was one group, coming from various parts of the country with different religion, culture and languages, with dreams in their eyes to achieve what they have been shown and yes, they were enjoying too but with newly developed skills and challenges and were fighting with themselves to become better and better. You might not be aware but I am talking about the best coding and skill developing edtech of the generation, Masai School. Sound’s great isn’t it? And by now, you might have guessed who belongs to this group. Yes, it’s the students of the school and they were involved in a competition of building projects by implementing their freshly acquired coding and soft skills, thanks to their faculty members. Well, I am one of them, hmm… not a faculty member, but a student and it gives me great pleasure to say that our team stood 4th position in the contest out of 48 teams across cohort and through this post, I want you to walk through the project that we presented.

Team-members and Team-Lead

Abhishek Jain(Mentor — Technical)
Yogesh Bhat(Co-founder & Mentor — Soft-skills)
Narendra Palacharla
Divya Prakash
Suraj Bhan Singh

Concepts covered in the entire unit till date

Command Prompt
Using Git terminal
JavaScript
Hypertext Markup Language (HTML)
Cascading Style Sheets (CSS)
Document Object Model (DOM)
Git Collab
Git Branching
GitHub
JS Constructors
JS Event Loops
JS Prototypes
Local Storage
JS Set-Timeout and Client-Server Model
JS XHR
JS Closures
ES6 — (I and II)
ES6 — Arrow functions
ES6 — Classes
ES6 — Promises and Async, Await
Introduction to React.js
React — Components, Styles and Props
React — State Management
React — List Keys

Project Statement

Before we go to our project, I would love to delineate you about the different cohorts in our school. Currently, the senior-most batch is the Phoenix who are going to start their 6th module. Then comes my batch, the Titans and we are going to start unit-3 and lastly, the Spartan-II who are ready to move on to their 2nd unit. The first two cohorts who are pursuing Full Stack Web Development were given to clone websites all different from one another and the last batch who are skilling in the very new course recently started by our school, i.e. Android Development, were given to clone some of the dating applications.

Coming to our project, as the title of this post is self-explanatory, we were given to clone the website- https://www.bitrix24.net/ . This website deals with the collaborations of teams, assigning and tracking the tasks to respective team-members along with the option to provide deadlines, activity stream, group chat, calendars, workgroups and other collaboration tools. It also provides stunningly beautiful websites and landing pages, ready to help you sell your products and services in minutes.

Roles and Responsibilities

The first thing which we have been taught is to plan whatever we are going to do, be it however big or small. So, we made a plan to stick to along with the deadlines. If you go to our repository in GitHub, you will find in the issues section the entire roles and responsibilities of individual member but I will provide a brief of the same.

We decided to make the static pages as much as possible in the first two days and the rest two days were to be invested in building the dynamic parts of the respective pages. Those who are new to HTML and CSS and in the learning stage like me, I would like you to know what I mean by static and dynamic pages. Static pages refer to those pages which does not have any functionalities and are basically the model or showpiece of the webpages, for example- the landing page, the login page and the related pages without any clickable or hovering functions. On the other side, dynamic pages are nothing but the static pages with added functionalities. After giving the functionalities, which in our case we used JavaScript’s Document Object Model, you can now have all usable features in your webpage. So, in short our plan was as simple as that, just create the static pages and then go for functionalities. Since, this was our first time that we were going to bring functionalities in our webpages, we selected a few hours of our third day to decide which functionalities to work on and how to proceed for those functionalities. We went through some of the notes from our lectures and the parts which were somewhat complicated, we referred to official documentations from MDN documentation and w3schools. So, we finally decided to make a total of nine pages of the website:

The landing page
Feed page
Tasks and Projects
Bitrix24 drive
Calendar
Chats and Calls
CRM
Time and reports
Workgroups

A Brief description on individual pages

If you go to our project’s website, first thing you need to do in order to view our project is to clone the entire repository in your local system. Anyway, even if you do not clone the repo, still you can view the codes in the repository. If you are new to GitHub please go through this link in order to know about cloning. The master branch, you can say, is the branch where you can find the final and complete project work. Just go to VS Code and open the folder of cloned repo. You will find all the files in your system. Just copy the path of the file landingPage.html and paste in your web browser and there you go. Now you will see the landing page of the website as shown below. If you see in your window and see everything messy, don’t worry, just zoom in or out so as to fit according to your screen resolution.

Now click on the Facebook icon so that you can move on to the feed page. If you see the top navigation bar, you can click the horizontal menu tab in the top left corner of the page to see the entire list of pages in the left side bar :

This page is a static one but there are still two functionalities added to this page. You can click on the video to directly see the video on the page itself without redirecting to a new page. There are hovering effects added to the page’s top bar but clicking them will not take you to any page. Next you can click on the Task and projects which will direct you to the tasks page :

In this page, we have added some functionalities using DOM using which a user can add tasks, provide deadlines and also assign the task to a person. You can even delete the task if the task is completed. Just click on the New task button and using the drop-down click on add task. You will receive a pop-up asking inputs:

The first three tasks appearing in the tasks table are basically dummy tasks and whatever tasks you add using input fields will appear after those dummy tasks. For example, I have added two tasks here: Completing the webpage-1 and assigned it to Narendra and Adding functionalities to webpage to be done by Divya. Now you can delete the tasks by clicking on the menu icon(three horizontal bar) of the specific task and then clicking delete.

Now you can click on the next part, i.e. chats and calls from the left side bar. You will see the following page appearing on the screen:

In this page, we have added a feature where a user can chat with a chat-bot. Since it is hard-coded and web API has not been used, a user will receive a repeated message after a certain interval of chatting. This was the most interesting part of the project, where we got a lot of applaud. The following snapshot shows an example :

The next page is the workgroup page which is basically a static page showing some information of members in a team :

Then comes another static page showing the folders of a team, working on any project where they can upload files and documentations related to the project :

Now you can go to time and reports page which contains four dynamic parts showing, absence chart, worktime, work reports and meetings and briefings:

Next comes the CRM page which shows the deals which a team can create for their clients :

And lastly, you can reach out to the calendar page where you can add tasks by their name, date, time and category. This is also hardcoded and no API is used :

As shown below, you can add tasks by just hovering the cursor to the Add task option using the input fields and the tasks will appear both in the calendar as well as in the task list:

This is what our team was able to complete in four days and many of the functionalities are in progress and we will keep on committing in the repository as and when possible so as to try to add some more functionalities. And in the end, I would like to thank my team-mates and faculty members for providing us the opportunity to showcase our talents and applying what we have learned in the past module. This was my second major project after completing unit-2. In case you want to go through my first project, which consisted of only static webpages, you can click this link. And one more thing, this journey of making such kind of projects will continue after completing each unit as per my curriculum and I will be back with some more interesting major and minor projects in future. Thank you for your patience. Hope you all do great in the coming days and will always love to hear from you any suggestions and insights regarding projects.

Note: All the image and icon links have been taken from the main website (https://www.bitrix24.net/ ) and some other internet sources and may be subject to copyright. So, try not to use the images or icons for business purposes or reproduce it without prior approval from the owner. The images and icons used here are just for making this project and for learning purpose.