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)

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

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

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

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

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

Keyword Search, Debouncing, Material UI Grid

QKart Products page.png

• 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

Responsive Design, Reusable Components

Products page UI with responsive Cart design Left Desktop Right Mobile

QKart Checkout page

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

Deployment, Vercel