QKart is a traditional brick-and-mortar supermarket chain with stores in over 30 cities throughout India. It is a Flipkart-like web platform with all the necessary functionalities.
Hosted Website URL: https://apoorva-qkart-frontend.netlify.app/
Qkart Backend Repo: https://github.com/Apoorv0503/Qkart_backend_Apoorv
Hosted Backend URL: https://qkart-backend-bug-apd1.onrender.com
Welcome to QKart’s frontend! The QKart frontend is built using React.js and MaterialUI majorly. This Project has the features like:
- Authentication
- Dynamic product listing
- Search
- Shopping cart
- Checkout process
During the course of development journey,I have learnt and apply these skills in React:
- State manipulation and Props
- Components - Stateless and Stateful
- React lifecycle methods
- Routing
- Data binding
- Debouncing
- Conditional rendering
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
All the products are displayed here.
- Users are provided details like the product price and category.
- It also has a search feature.
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
Users are taken to this page when they successfully place their orders. It displays the tentative delivery date and the user’s wallet balance.
The overall architecture of the QKart website given below.
I provided a minimal backend with APIs exposed for use I'll be making calls to these APIs to perform actions like authenticating users, fetching product details etc.