https://github.com/debabrata-pw08-429/qkart_frontend_v2
QKart: React e-commerce platform. Auth, dynamic product listing, search, cart, checkout, order confirmation. Modern, scalable architecture.
https://github.com/debabrata-pw08-429/qkart_frontend_v2
conditional-rendering debouncing mui-material notistack react-hooks reactjs
Last synced: 2 months ago
JSON representation
QKart: React e-commerce platform. Auth, dynamic product listing, search, cart, checkout, order confirmation. Modern, scalable architecture.
- Host: GitHub
- URL: https://github.com/debabrata-pw08-429/qkart_frontend_v2
- Owner: debabrata-pw08-429
- Created: 2024-04-30T08:11:33.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-01T11:37:52.000Z (about 1 year ago)
- Last Synced: 2025-01-16T10:34:08.057Z (4 months ago)
- Topics: conditional-rendering, debouncing, mui-material, notistack, react-hooks, reactjs
- Language: JavaScript
- Homepage: https://qkart-frontend-v2-rho.vercel.app
- Size: 2.34 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# QKART_FRONTEND_V2
QKart is your one-stop solution for buying the latest trending items with India's fastest delivery to your doorstep. It's a traditional brick-and-mortar supermarket chain with stores in over 30 cities throughout India, presented as a Flipkart-like web platform with all the necessary functionalities.
- **Website URL :** https://qkart-frontend-v2-rho.vercel.app/
## Note From Developer
Welcome to QKart’s frontend! The QKart frontend is built using React.js and MaterialUI primarily. This project features:
- Authentication
- Dynamic product listing
- Search
- Shopping cart
- Checkout process
During the development journey, I have learned and applied these skills in React:
- State manipulation and Props
- Components - Stateless and Stateful
- React lifecycle methods
- Routing
- Data binding
- Debouncing
- Conditional rendering
## QKart Website Pages:
### 1. 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 log in to the website by entering the username and password set during the registration.
- Only logged-in users can buy products.
---------------------------------------------------------------------------------------------------------
### 2. Products Page
All the products are displayed here.
- Users are provided with details like the product price and category.
- It also has a search feature.
---------------------------------------------------------------------------------------------------------
### 3. 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.
---------------------------------------------------------------------------------------------------------
### 4. 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.
---------------------------------------------------------------------------------------------------------
## QKart Architecture
### QKart Component Architecture
The overall architecture of the QKart website is given below.
---------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------
I had 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.