Introduction to QKart QKart is a traditional brick-and-mortar supermarket chain with stores in over 30 cities throughout India. With their 25th anniversary coming up, the management is planning to take their business to the next level by going online. The company needs a Flipkart-like web platform with all the necessary functionalities.

Note from the Product Manager

Welcome to QKart’s frontend team! The QKart frontend will be built using React.js. You will drive the project to completion by adding features like: Authentication, Dynamic product listing, Search, Shopping cart, Checkout process.

During the course of this journey, you will learn and apply these skills in React

State manipulation and Props, Components - Stateless and Stateful, React lifecycle methods, Routing, Data binding, Debouncing, Conditional rendering.

The QKart website will include these pages

Register and Login Pages - QKart allows its customers to register and login. Users can register on the QKart website by visiting the Register page. They can then login to the website by entering the username and password set during the registration. Only logged in users can buy products.

Products Page - All the products are displayed here. Users are provided details like the product price and category. It also has a search feature.

Checkout Page - Users will be taken to the checkout page by clicking on the “Checkout” button on the Product page. The Checkout page shows an overview of the cart items, the total cost and the wallet balance for the user. Users can add or choose an existing delivery address and place the order from here.

Order Confirmation Page - Users are taken to this page when they successfully place their orders. It displays the tentative delivery date and the user’s wallet balance.