Qkart-Ecom

QKart is an E-commerce application offering a variety of products for customers to choose from.

During the course of this project,

• Implemented the core logic for authentication, shopping cart and checkout
• Improved UI by adding responsive design elements for uniform experience across different devices
• Utilized REST APIs to dynamically load and render data served by the backend server
• Deployed website to Netlify

Registration-login Flow & Routing Setup

• Used React Router library to set up routes in the application and redirect customers to appropriate pages
• Added UI and logic to get the Login page ready
• Stored user information at client side using localStorage to avoid login on revisit

Skills used: React Router, Material UI, localStorage, Controlled Components, Conditional Rendering

Registration Feature

• Implemented logic and used backend API to get the registration feature ready
• Added validation for the register form user input values to display informative error messages

Display products and Search Feature Implementation

• Utilized the useEffect() hook to fetch products data after DOM is rendered for faster page loading
• Added search bar to display only on the Products page’s header and implemented search logic
• Implemented debouncing for improved UX and reduced API calls on search

Skills Used: Keyword Search, Debouncing, Material UI Grid

Shopping Cart and Checkout Flow

• Added Cart to Products page and made it responsive
• Made authenticated POST API calls to implement Cart logic
• Rendered Cart with differing designs in Products page and Checkout page using conditional rendering.
• Implemented UI and logic to add and select new addresses

Skills used: Responsive Design, Reusable Components

Deployement

• Deployed the QKart React app to Netlify
• Configured Netlify to support visiting any sub pages directly as React is a single page application

Skills Used: Deployement, Netlify