asifalijaun/qkart

Qkart

QKart is an E-commerce application offering a variety of products for customers to choose from. This project focuses on implementing core functionalities such as authentication, shopping cart, and checkout, as well as improving the user interface and deploying the website.

Overview

During the course of this project, the following tasks were accomplished:

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

QKart Component Architecture

QKart Shopping Interface (Products page)

Add Registration feature

Scope of work

• Implemented logic and used backend API to enable the registration feature.
• 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 set up the Login page.
• Stored user information client-side using localStorage to avoid login on revisit.

Skills used

React Router, Material UI, localStorage, Controlled Components, Conditional Rendering

Display products and implement search feature

Scope of work

• Utilized the useEffect() hook to fetch product data after DOM is rendered for faster page loading.
• Added a 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

Add shopping cart and implement checkout flow

Scope of work

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

Skills used

Responsive Design, Reusable Components

Deploy the QKart website

Scope of work

• Deployed the QKart React app to Netlify.
• Configured Netlify to support visiting any subpages directly as React is a single-page application.

Skills used

Deployment, Netlify

---