Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/janani1727/qkart
QKart is an E-commerce application that offers a wide variety of products for customers to choose from.
https://github.com/janani1727/qkart
Last synced: about 2 months ago
JSON representation
QKart is an E-commerce application that offers a wide variety of products for customers to choose from.
- Host: GitHub
- URL: https://github.com/janani1727/qkart
- Owner: Janani1727
- Created: 2024-07-26T11:36:52.000Z (6 months ago)
- Default Branch: master
- Last Pushed: 2024-07-26T11:42:11.000Z (6 months ago)
- Last Synced: 2024-07-26T13:13:19.293Z (6 months ago)
- Language: JavaScript
- Homepage: https://qkart-b003gyxof-janani1727s-projects.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 - E-commerce Application
QKart is an E-commerce application that offers a wide variety of products for customers to choose from. This repository contains the code for the QKart web application, showcasing the implementation of various features, including authentication, shopping cart, checkout, product display, and user registration.
Live Website Link
Project Overview
During the course of this project, we have implemented the following core features:
Authentication: Implemented the core logic for user authentication.
Shopping Cart: Added a shopping cart to the Products page, making it responsive. Made authenticated POST API calls to implement cart logic. Rendered the cart with different designs in both the Products page and Checkout page using conditional rendering.
Checkout Flow: Implemented the UI and logic to add and select new addresses during the checkout process.
Product Display: Utilized REST APIs to dynamically load and render product data served by the backend server. We also enhanced the user experience with responsive design elements for uniform viewing across different devices.
Search Feature: Displayed products and implemented a search feature on the Products page, using the useEffect() hook to fetch product data and implementing debouncing for improved user experience and reduced API calls.
Registration-Login Flow: Set up routing using the React Router library to redirect customers to appropriate pages. Added the UI and logic for the Login page and stored user information client-side using localStorage to avoid login on revisit.
User Registration: Implemented the registration feature, including backend API integration and input validation for the registration form to display informative error messages.
QKart Component Architecture
QKart Component Architecture
QKart Shopping Interface (Products Page)
QKart Shopping Interface
Deployment
Deploy the QKart Website
The QKart React app has been deployed to Netlify and configured to support visiting any subpages directly as React is a single-page application.
Skills used: Deployment, Netlify
Display Products and Implement Search Feature
QKart Checkout Page
Skills used: Keyword Search, Debouncing, Material UI Grid
Implement Registration-Login Flow and Set Up Routing
Request-Response Cycle for QKart User Signup and Login
User Flow on Website for Signup and Login
Skills used: React Router, Material UI, localStorage, Controlled Components, Conditional Rendering
Add Registration Feature
Skills used: React.js, Event Handling, Forms, React Hooks, REST API, Error Handling
Feel free to explore the code and the various features of the QKart E-commerce application. If you have any questions or need further assistance, please don't hesitate to reach out.
Happy shopping! 🛒🛍️