QKart-FrontEnd

Overview

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

Component Architecture

QKart Shopping Interface (Products page)

---

Add Registration feature

Scope of work

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

Skills used

React.js, Event Handling, Forms, React Hooks, REST API, Error Handling

---

Implement registration-login flow and set up routing

Scope of work

• 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

Request-response cycle for QKart User signup and login

User flow on website for signup and login.png

---

Display products and implement search feature

Scope of work

• 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

QKart Products page.png

---

Add shopping cart and implement checkout flow

Scope of work

• 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

Products page UI with responsive Cart design Left Desktop Right Mobile

QKart Checkout page

---

Deploy the QKart website

Scope of work

• 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

Deployment, Netlify