QKart Frontend

What I did?

1. Understood frontend development using React.js
2. Developed frontend for an E-commerce application.

Live Link: https://krishnakundan-qkart-frontend.netlify.app

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.

Added Registration feature

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

Implemented registration-login flow and set up routing

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

Displayed products and implemented search feature

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

Added shopping cart and implemented checkout flow

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

Deployed the QKart website

• Deployed the QKart React app to Netlify.

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