https://github.com/apoorv0503/qkart_frontend_bacl

A fullstack shopping site made using: HTML, CSS,React.js, node.js, materialUI.
https://github.com/apoorv0503/qkart_frontend_bacl

css database html javascript material-ui nodejs postman react

Last synced: 9 days ago
JSON representation

A fullstack shopping site made using: HTML, CSS,React.js, node.js, materialUI.

• Host: GitHub
• URL: https://github.com/apoorv0503/qkart_frontend_bacl
• Owner: Apoorv0503
• Created: 2023-11-10T07:25:47.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-07-17T15:59:53.000Z (6 months ago)
• Last Synced: 2024-11-16T00:39:46.525Z (2 months ago)
• Topics: css, database, html, javascript, material-ui, nodejs, postman, react
• Language: JavaScript
• Homepage: https://apoorva-qkart-frontend.netlify.app/
• Size: 2.35 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

# QKart

**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

## Note From Developer

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

## The QKart website will include these 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 login to the website by entering the username and password set during the registration

* Only logged in users can buy products

![Register](https://drive.google.com/uc?export=view&id=1Z8WwLc8BUHCq1QQ_FRHt5uCsHXJvTNjY)

![login](https://drive.google.com/uc?export=view&id=1DrwZIyToC40ifpl2Dd4jNEL8zdJGE2Mu)

#### 2. Products Page - 

All the products are displayed here.

* Users are provided details like the product price and category.

* It also has a search feature.

![Product](https://drive.google.com/uc?export=view&id=1ott_7Rq9OIhG3SDBb3TfXaADA0RQOY_t)

#### 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

![checkout](https://drive.google.com/uc?export=view&id=1_o2iFgLEpwiF8L6Fl80-rYR7_jt52u7L)

#### 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.

![Confirmation](https://drive.google.com/uc?export=view&id=1Bgk_hZ0sfFwO39nGoBoNCDEiBKlNYFSv)

## QKart Architecture

### QKart Component Architecture

![forntend](https://drive.google.com/uc?export=view&id=1Lek4bgEXt6EALGWD465Go-_h_7Qb4xRf)

The overall architecture of the QKart website given below. 

![forntend+backend](https://drive.google.com/uc?export=view&id=1yF-h6yr_qQdgCFu9CCz5Zvv-ERhxph_e)

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.