QKart Frontend

Frontend for QKart - An E-commerce application

View QKart Backend • View QKart Frontend

Table of Contents

1. Project Overview
2. Setup Instructions
3. Technical Architecture
4. Features Implemented
5. Potential Improvements

Project Overview

QKart is a full-stack E-commerce application offering users a comprehensive shopping platform. This project focuses on the frontend development, implementing various features and maintaining a responsive UI

Tech Stack

• Frontend: React.js, React Router, Material UI
• Backend: Node.js, Express.js, MongoDB, Mongoose
• Authentication: JWT (JSON Web Tokens)
• Deployment: Render (Backend), Vercel (Frontend)

Setup Instructions

Frontend

git clone https://github.com/Anusree6154s/qkart-backend # clone repo
npm install # install dependencies
npm start

Backend

cd backend
npm install
npm start

Technical Architecture

• Frontend Library: React.js for building a component-based user interface.
• State Management: React hooks (useState, useEffect) for managing component state.
• Routing: React Router for dynamic routing and navigation.
• Styling: Material UI for a consistent design across components.
• Deployment Architecture:
  • Hosting: Render (backend) for automated deployments, Netlify (frontend) for static assets.

QKart Component Architecture

Features Implemented

1. User Registration:

   • Created UI with form validation and error messages.
   • Integrated with backend API for registration and feedback.

2. User Login and Authentication:

   • Persisted sessions using localStorage.
   • Secured shopping cart and checkout routes for authenticated users only.

3. Product Display and Search:

   • Loaded product data with useEffect() for optimized rendering.
   • Implemented debounced search bar to reduce API calls and enhance UX.

Search functionality

4. Shopping Cart and Checkout:
   • Real-time cart updates implemented with useState and useEffect.
   • Responsive design achieved using CSS media queries and Material UI’s Grid.
   • API calls managed with Axios to handle cart modifications and checkout process.

Shopping Cart

Checkout Page

5. Deployment:
   • Set up for deployment on Netlify and Vercel

Potential Improvements

• Wishlist Feature: Allow users to save favorite items.
• User Reviews: Enable reviews and ratings on product pages.
• Cart Enhancements: Direct item quantity adjustment within the cart.
• Admin Dashboard: Create an admin interface for managing products and users.
• Enhanced Error Handling: Improve logging and error-handling mechanisms.