Crio Portfolio

Back

QKart Frontend

A React.js E-commerce application

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

During the course of this Micro-Experience, the developer:

  • 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

image alt text

QKart Component Architecture

image alt text

QKart Shopping Interface (Products page)

QKart Frontend Modules

1

Add routing and improve UI

Scope of work:

  1. Used React Router library to implement routing

  2. Improved UI with Antd library’s UI components

Skills used:

React.js, React Routing, React Components, Event Handling

2

Implement register/login flow

Scope of work:

  1. Validated user input and set to display informative error messages

  2. Utilized backend API to facilitate user registration and login

  3. Stored user information at client side using localStorage to avoid login on revisit

Skills used:

React State & Props, REST APIs, Fetch API, cURL, Input Validation, localStorage

Image(s):

image alt text

Request-response cycle for QKart User signup and login

image alt text

User flow on website for signup and login
3

Display products and implement search feature

Scope of work:

  1. Utilized React’s lifecycle methods to fetch products data after DOM is rendered for faster page loading

  2. Added search bar to display only on the Products page’s header and implemented search logic

  3. Implemented debouncing for improved UX and reduced page re-renderings on search

Skills used:

Functional and Class Components, Lifecycle Methods, Keyword Search, Debouncing

Image(s):

image alt text

QKart Products page
4

Add shopping cart and implement checkout flow

Scope of work:

  1. Added Cart to Products page and make it responsive

  2. Made authenticated POST API calls to implement Cart logic

  3. Rendered Cart with differing designs in Products page and Checkout page using conditional rendering

Skills used:

Responsive Design, Antd Grid, Conditional Rendering, React Refs

Image(s):

image alt text

Products page UI with responsive Cart design

image alt text

QKart Checkout page
5

Deploy the QKart website

Scope of work:

  1. Deployed the QKart React app to Netlify

  2. Configured Netlify to support visiting any sub pages directly as React is a single page application

Skills used:

Deployment, Netlify