A React.js E-commerce application
Back
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
QKart Component Architecture
QKart Shopping Interface (Products page)
Scope of work:
Used React Router library to implement routing
Improved UI with Antd library’s UI components
Skills used:
React.js, React Routing, React Components, Event Handling
Scope of work:
Validated user input and set to display informative error messages
Utilized backend API to facilitate user registration and login
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):
Scope of work:
Utilized React’s lifecycle methods 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 page re-renderings on search
Skills used:
Functional and Class Components, Lifecycle Methods, Keyword Search, Debouncing
Image(s):
Scope of work:
Added Cart to Products page and make 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
Skills used:
Responsive Design, Antd Grid, Conditional Rendering, React Refs
Image(s):
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