QKART

Ecommerce Application
 a well-established brick-and-mortar supermarket chain
QKART with a presence in over 30 cities across India

Qkart is embarking on a significant digital

DIGITAL TRANSFORMATION transformation as it approaches its 25th anniversary

This initiative aims to create a comprehensive online

BUSINESS GROWTH platform, similar to Flipkart, to cater to the evolving
needs of modern consumers who increasingly favor
the convenience of online shopping
OBJECTIVES OF
QKART
• Providing a seamless and intuitive user interface
• A comprehensive product catalog
• A secure transaction processes
• and efficient delivery services
 PROJECT FLOW
Authentifiaction Cart Greeting
Getting user input To store user added products untill user Thankyou message
Hitting backend with the user input check-out updated wallet balance
Authenticate

2 4 6

1 3 5

Registration Search Checkout

Getting data from user Search bar to find the relevant products by Confirm the address
Storing it in a secure manner searching them make the payment
Avoid null data clear the cart
 TECHNOLOGY USED

NODE.JS

REACT.JS - FRONTEND EXPRESS.JS - BACKEND MONGO DB - DATABASE

 REGISTRATION
Have you ever imagined how a web-app saves your login information in
data-base
 PROBLEMS WITH THESE

PLAIN TEXT HASHING

Encrypted
{
63vao9vwrd7983b230g. BCRYPT
‘email’ : ‘user001’, agsu936g3
‘password’ : ‘User@1’ SALT
[ USES A KEY ]
}
 AUTHENTIFICATION
• Set loading icon during the time
when API call is being made
• login with credentials of already
registered user o
• Failure - login with incorrect
password
• Failure 2 - login with unregistered
username
 PERSIST USER
LOGIN
WHAT IF USER ACCIDENTLY REFRESHES QKART PAGE

Local storage is an in-browser storage option.

We can store key-value pairs in it and read it from any other components.
Data in localStorage gets persisted even if the browser is closed.
ALTERNATE HEADER
SETTING ROUTES
• “BACK TO EXPLORE” - redirect to products page
• “REGISTER” - redirect to register page
• “LOGIN” - redirect to login page
• “LOGOUT” - clear contents of localStorage and redirect to products
page itself
SEARCH
FUNCTIONALITY
With the search bar in place, make it actually work by
writing the logic and plugging it to trigger when the
search keywords are entered.

INITIAL - LIST OF PRODUCTS

ON SEARCH - FILTER PRODUCTS

DEBOUNCING
 SHOPPING
CART
IMPLEMENTATION
 CHECKOUT
• GET /user/addresses - Fetch list of all addresses added for the user
• POST /user/addresses - Add a new address
• DELETE /user/addresses/:addressId - Delete an existing address for the user by
the address id
CONFIRMATION
 “Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Etiam mattis, nunc vitae
eleifend posuere, turpis mauris vestibulum
purus, in pellentesque tellus elit vel nisl.”

Daniel Gallego

8 OUT OF 10 “Lorem ipsum dolor sit amet, consectetur

adipiscing elit. Etiam mattis, nunc vitae
eleifend posuere, turpis mauris vestibulum
Customers are pleased purus, in pellentesque tellus elit vel nisl.”

with our services. Lorna Alvarado

TESTING
SUGGESTIONS FOR FUTURE WORK
+24K

MOBILE APPLICATION DEVELOPMENT:

Advanced AI Integration:

AUGMENTED REALITY (AR)

Subscription Services:

CUSTOMER SUPPORT
Sustainability Initiatives
THANK YOU
Prepared & presented by INAMUL HAQ