Cloning of Decathlon.in

Using JavaScript, HTML, CSS — Team-Titans-Boron
Project link: https://github.com/suraj588/Decathlon-clone

As promised, I am back here with a new project which our team built using the same tools but with added functionalities. In this sprint, we actually learned quite a lot with some of the advanced and latest features of JavaScript and also used jQuery to build this project.

Team-members and Team-Lead

1. Abhishek Jain & Albert Sebastian(Mentor — Technical)
2. Yogesh Bhat(Co-founder & Mentor — Soft-skills)
3. Pushpal Chakraborthy
4. Suraj Kumar
5. Anay Bhoraskar

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

This time we were given to clone the website of Decathlon.in which deals in selling sports based materials from clothes to fitness trackers and equipment.
This website has different varieties of products for most of the sports and so has many functionalities from filter to sorting, based on price and product. So, our task was basically to cover most aspect of the website which give a feel of the original website.

Roles and Responsibilities

A proper planning results in better outcome. Definitely, there is always an excitement to start building the project without any time being wasted but a plan to stick with, keeps you always in correct path and you can have a track as well for the future purpose. So, keeping these points in mind, we first divided the task among our collaborators along with deadlines. This helped us to achieve even greater than what we expected in terms of completing the project.

Unlike the last project, this time we decided to take less number of pages but decided to complete the functionalities as well as the static part of the pages together in order to prevent last time hustle. Also unlike the last time, our main intention was to make pages dynamic and workable as much as possible. In other words, in spite of focusing on the looks of the pages, it was decided that we would perform maximum possible functionalities which we learned in this Sprint. We even applied the CRUD functionality which is the most basic part when comes to making the pages dynamic. CRUD stands for Create, Read, Update, Delete i.e. we can create, read, delete, and update a particular data in the web page. So, we were finally able to build the following pages:

The landing page

Fitness and Essentials

Cricket Products

Login Page

Payment

Pin code selector

Cart

Frequently Selected products

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.

Landing Page

This is our landing page. It has in brief all the data regarding the advertisements on the basic products but that is not of our concern here. The main thing to focus here is the transition effect added to the advertisements due to which the advertisements keep transitioning after a certain delay. This was something new for us. But using some animation part of the CSS and changing some properties of the default (web-kit and keyframes) we were able to achieve it.

Fitness And Essentials Page

Since, individually building the components for products is kind of time consuming and cumbersome task, we created a mock server where we stored all our data regarding the products and it was equally important for adding items to the cart and deleting from it. On the left, you can see the filters which is 100% functionable and we have implemented multiple filtering as well. There is a price toggler giving products in the range of 0 to 999. You can toggle it to get the price form 0 to any desired range. On clicking on any of the product, you will be redirected to a page where you can select size and required things to proceed for checkout:

Add to Cart

After adding to the cart, you can select the number of items and you will see the total price is calculated at the same time.

Checkout

So, after selecting the items you can actually checkout and select an address. At the you can find an option to change the pin code. We have used India Pin code REST API to add the functionality. Now the last part is choosing your address and then you are there to receive your product at your doorstep. (Just Kidding)

Choose Address

Order Placed !

This was just a small glimpse of our project. To be honest, there may be some bugs in our code and will be happy to receive any kind of suggestions from your side. Do go through the provided GitHub link in order to get the hang of the things and never feel shy to ask if you are stuck at any point. I may have mentioned this before, every time we complete a project, we feel somewhat upgraded than the previous unit. If you have already gone through my previous projects, you may compare the previous projects to be a trash in front of this project, well I used to feel the same but that is how I believe one progresses. You start from basic and slowly you keep climbing the ladder and hope to do better as compared to the last time. So, its time now to say good bye but by that time keep coding, keep excelling and keep climbing the ladder.
And the next time its most probable to build project using REACT. That is going to be exciting !

Note: All the image and icon links have been taken from the main website (https://www.decathlon.in/ ) 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.