Building the clone of Reliance Retail Website

Through this blog, I am going to share my journey of working on a team project as a web developer student at Masai School.

So I had a problem statement that I have to create a clone of a website called relianceretail.com . Also I can use my HTML, CSS, JavaScript, Advance Javascript, JQuery, slick and cloud flair library and API knowledge.

On Saterday, 30th of October, 2021 all the students at Masai school were divided into a team of six from their respective batches and assigned a project that they had to build within 2 weaks, and on the last day, from every batch best teams would be selected to present their project to the respective Judges. We had to build the project with whatever skills we were taught in unit 1 and unit 2 at Masai school, so in my case, it was HTML, CSS, Javascript ,Advance Javascript and API Request. I was assigned to team 35 and my teammates were sujata singh, Akhil Gupta, Vikash Kumar, Deepak Singh, Ankit Sharma.

Team Members and their contributions:

  • Sarthak Bakshi:

    I created mobile responsive mega menu aka header, footer, all the sliders, complete Landing page, Designed pages in Our Brand and About Us section like award page and our Business page, and all banners and most of the sections are created in a separate JS components. like header, footer, footer bottom and ourBrand vertical navbar is a saprate js component

  • Akhil Gupta:

    created all pages in Investor Relation. and worked on some pages of Our Brand section. He made design of Investor relation using js dom

  • Sujata Singh:

    created logIn and signUp pages. With localstorage connectivity

The blog is divided into three parts -

  • Firstly we will understand what the project statement is about.

  • Same shapshot of these project

  • At last, some input that I have learned while working on the project as a beginner will be shared.

Some Snapshots of our project that we made :-

This is the final outcome of the sections we created-

  • My work:
  • Main landing page :

    This is the Landing page when the user enters the website for the first time this page will show up. We have updated some of the hover effects and cool sliders and carousel.

Screenshot (633).png

Screenshot (636).png

  • Responsive Mega Menu :

Screenshot (634).png

Screenshot (637).png

Screenshot (638).png

  • Our business page:

Screenshot (640).png

  • Award page:

Screenshot (641).png

Screenshot (642).png

  • Our Brand pages:

Screenshot (643).png

Screenshot (644).png

  • Akhil's work:
  • Invester Relation Section:

Screenshot (279).png

Screenshot (280).png Screenshot (282).png

  • Sujata's work:

    • Login Signup Section:

      WhatsApp Image 2021-11-12 at 2.33.45 PM.jpeg

Inputs for beginners-

This was the second project I worked on at Masai, and the things I'm going to share are stuff I realized, will benefit someone new to web development or who is going to work for the very first time on a project. So here it is.

The outcome and important learning from the project :-

This entire journey of making the project was awesome. We learned lots of things by applying to the real website and it gave us a lot of confidence. Although we could have done more such as we could have added timer and there were some more functionalities that could have been done, but yeah the time didn't permitted us to go further. But we will surely improve it. If you want to look at the project then you can go to this GitHub link:

github.com/sarthakbakshii/relianceRetail_cl..