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. Yogesh Bhat(Co-founder & Mentor — Soft-skills)
  2. Pushpal Chakraborthy
  3. Suraj Kumar
  4. 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

Roles and Responsibilities

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

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.

Learning MERN Stack Development at Masai School

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