Shapelink Clone

Akash Vaghela
4 min readJan 4, 2021


i’m learning MERN Stack at Masai School. in the Unit — 2 Evaluation’s Build Week i have worked on a group project with my Batch mates Gopi Chandana and Himanshu Kumar. in which we have tried to cloned the site in just 4 days.

For a quick overview Shapelink is a workout log website which helps us to track our goals and schedules. it also has an android app, however with different name Twiik.

Tech Stack Used

  • To clone the site we haven't used any framework or fancy UI library, instead of that we stick to the fundamental things of web devlopment as mentioned below.
    1. HTML5
    2. CSS3
    3. JavaScript

Home Page

  • The Homepage of Shapelink website shows the various features which they offer to their clients. it has some Dynamic effects on navbar which we have copied perfectly.
  • User can see Navbar on the top section, some static information on middle part and at the bottom of the page there is a footer which we have build so far in this page.
  • We have also build a Login popup through which user can login to our clone website.

Exercise Page

  • There are many Child pages linked to the Exercise page, but for this clone following pages are made by us.
    1. Show Calendar
    2. My Things

Show Calendar

  • This page displays the visual data of task and schedules.
  • We can create a task by just clicking on the ADD TO YOUR CALENDAR button or by small add buttons presents in each day boxes.
  • Right now the Weight functionality is working, so if we click on weight, the popup will appear to input the data.
  • if we enter any value and saved it, then it will be stored in Local Storage of Browser and will be displayed on Page.

My Things

  • This page works like an advanced TODO.
  • It also has many child pages so following pages are created by us with CRUD functionality.
  1. Cardio
  2. Food
  3. Meals

Blogs Page

  • On the main page it displays the previously created articles.
  • This page also has CRUD functionality, it can creates new articles which will be stored locally and reflected on the Blog page.

Roles and Responsibility

  • We all three group members have worked simultaneously at the same time.
  • We divided our work and take the responsibility to complete our work on time and contribute to project in proper way.
  • Every day we have connected with each other and shared our progress, helped to resolve issues of other team mates and planned next day.

Challenges Faced

  • Merging of code was one of the main challenges we have faced. due to the different approach the pages broken more frequently.
  • Working on a remote project is always difficult, constant communication required, to during entire project so we connected with each other very frequently.


The best way to learn and master skills is try to implement whatever you have learned, so we tried our best to create this clone. even we have worked on New year’s day, when everyone was enjoying holiday we are resolving bugs and merging conflicts.

At the end we have completed the partial cloning of with some of it’s main functionalities which is working fine. the project repository is available on GitHub.

Team Members and Contributors

  1. Akash Vaghela
    GitHub :
    Email :
    Linkedin :
  2. Gopi Chandana
    GitHub :
    Email :
    Linkedin :
  3. Himanshu Kumar
    GitHub :
    Email :



Akash Vaghela

At Masai | Titan Batch Student