Shapelink Clone

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 Shapelink.com 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.

Conclusion

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 shapelink.com 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 : https://github.com/akashvaghela09
    Email : akashvaghela09@gmail.com
    Linkedin : https://www.linkedin.com/in/akashvaghela09
  2. Gopi Chandana
    GitHub : https://github.com/GopiChandana
    Email : gopichandanasiri@gmail.com
    Linkedin : https://www.linkedin.com/in/gopi-chandana-1944081ba/
  3. Himanshu Kumar
    GitHub : https://github.com/hithanos
    Email : hkghimanshu@gmail.com

At Masai | Titan Batch Student

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Elixir — Differences between hd and List.first

Xavki’s newsletter : 20211227 week

Questions that need answering 20

Apache Hudi: Basic CRUD operations

5 patterns to make your microservice fault-tolerant

How it feels like to work @ BotSupply

FlutterDesktop and C

Guilds and teams for a better engineering

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Akash Vaghela

Akash Vaghela

At Masai | Titan Batch Student

More from Medium

Hycean Application

[Development Log #1]

How to build web applications with Ethereum

Postman Part