HOW DID OUR TEAM BUILD THE UNIQLO CLONE 2.0?

Hi reader, you might have ordered something online right? So, I am sharing my team experience that how we build a clone of the online shopping website “Uniqlo”. This is the update of my previous blog. The link is attached below for reference.https://medium.com/@hgauba4/how-did-our-team-build-the-uniqlo-clone-2d78566e6935

For an intro, UNIQLO India offers high-quality fashion clothes online for Men, Women, Kids & Babies. Explore the wide range of apparel & accessories products online now!. For more information please refer:-https://uniqlo.com/

Now, this is our third construct week project. In this project, we updated our previous project. There are so many questions running in our minds because we had not implemented backend in any of the projects but we were confident we had used similar technologies in our assignments. There were so many challenges that we faced each day and the best thing is we as a team overcome those challenges, help each other out, we get to know teamwork, new concepts. It was like a short journey with challenges but in Masai, we are used to challenges now.

We connected our previous project from Backend this time. We used the MongoDB for database and express for making the server. We deployed the server on Heroku. The server is working live now 24*7. If a user will register on our website then their data will get automatically stored in our database.

This sounds cool, right?. Let me tell you another cool implementation. In our previous project, we were displaying the data statically but now we pushed the data onto the server which was fetched by the front-end using the API.

I know you might be thinking that how it’s possible to build a dynamic website in just five days but since our last two months we have learned only this many technologies till now and I hope you will really appreciate that we have built this clone with this much resources and time.

CHALLENGES WE FACED AND HOW WE SOLVED THEM

  • This time Git was not the issue because we were used to now of all the commands. But in this project, we faced challenges in the deployment of Backend on Heroku where our IA Bicky Dutta helped us.
  • In the front-end, we use the styling that we used in our previous project but we used the fetch method to get the data to make the website more dynamic. After getting the API link front-end team successfully called the routes made and we got all our product details from the backend.
  • We have a limited time of a week so we covered the important parts of the site somehow but missed some categories.
  • After merging our codes and solving the conflicts was at that moment was a bit challenging because we are very close to the deadline. And in Backend, it was really tough because of files and folder's name with MVC pattern.
  • Both front-end and back-end code were very different. So we made two separate repositories each for the front-end and back-end.

Our Approach

We made a WhatsApp group for communication and for discussion & queries we took zoom meeting 40 minutes advantage. We took full advantage of this amazing technology and we were there with each other for 10–12 hours daily. I was so overwhelmed by everyone’s efforts.

Then we divided the tasks and pages among each other and initiated the project. I and Shreyas worked on the Backend part in Uniqlo 2.0.

I remember on the day of submission everything was messy, we have to sort and merge our codes to the main branch. Some functionalities stopped working, keys and values in local storage were different and we were feeling stuck at that moment but we try to sort everything step by step and by breaking problems into sub-problems. At last, we were in the hustle to submit the links and video before the deadline, and then finally, we took a big sigh of relief.

It’s snippet time…

Signup page
ADD PRODUCTS (WOMEN)
ADD PRODUCTS(KIDS)
Product page

ENDING NOTE

In the end, I would like to thank my Team Members: Shreyas Khakal, Avinash Kumar, Alok Kumar, Sudhanshu Kumar, Saurabh Suman for their support and co-operation, and the biggest thanks to Masai School, all my mentors from MASAI: Varun Bhatt, Shruti Ravindran, Chandra Sekhar, Swanand Kadam, Nrupul Dev, Dhaval Chedda, Yogesh Bhat, Ankush Chimani and Bicky Dutta.

Overall it was a wonderful experience for me and my teammates. And we look forward to facing much more challenges like this and all feedback and suggestions are welcomed.

Checkout our website on :-

Website link : https://uniqlo-clone.netlify.app/

Technology We Used 💻

Tech Stack in Frontend:

  1. HTML5
  2. CSS3
  3. JavaScript

Tech Stack in Backend:

  1. Mongo DB
  2. CSS3
  3. Node JS
  4. Express JS
  5. DB collections
  6. Mongoose

We used the following resources for our help:

  1. https://developer.mozilla.org/en-US/
  2. https://www.w3schools.com/
  3. https://www.flaticon.com/
  4. https://codepen.io/pen/
  5. https://fontawesome.com/

--

--

--

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

Recommended from Medium

9 Things All Electronics Hobbyists Should Know

Things all electronics hobbyists should know: soldering

My New Website: TED.dev

Screenshot of a page from the TED.dev website for the “Predicting the Failing Test” article.

Hyperledger Fabric Developer Tutorial Part 1: Make Your Own Blockchain

The Android Operating System

Android Operating System

HackWeek Adventures: How we built our own library app

iGaiaBot is born!

Lambda Execution Leaks: A Practical Guide | Lumigo

A beginner’s guide to Solarflare TCPDirect

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
Himanshu Gauba

Himanshu Gauba

More from Medium

Next.js vs React: A Complete Comparison Guidance in 2022

What’s In a (Ruby on Rails) Workflow

Doing CRUD with Rails

Embed a YouTube Video Player using YouTube Iframe API and JavaScript

YouTube Iframe API