puneet-iner / qckbuy-frontend

Client side of QckBuy

QckBuy - An E-commerce Platform

QckBuy is an e-commerce platform that is built using React, TypeScript, and Material UI. It is designed to be mobile and desktop responsive, making it accessible to users on a variety of devices. The platform includes features such as payment using Stripe, cart management, JWT-cookie based authentication, products, dashboard for admin and delivery person.

Key Features

• Payment Using Stripe

  QckBuy integrates with Stripe to provide users with a safe and easy payment option. Customers can use their credit or debit cards to make payments for their orders.

• Cart Management

  QckBuy's cart management system allows users to add and remove items from their cart, view the total cost of their order, and proceed to checkout. Customers can also view their order history and track their deliveries.

• JWT-Cookie Based Authentication

  QckBuy uses JWT and cookies to authenticate users and ensure secure access to their accounts. This feature also allows the platform to protect its resources from unauthorized access.

• Product Catalogue

  QckBuy offers a comprehensive product catalogue that allows customers to browse products by categories and search for specific items. Each product comes with detailed descriptions, images, and pricing information.

• Dashboard for Admin and Delivery Person

  QckBuy includes a dashboard for admins and delivery persons. Admins can manage the products on the platform, including adding new products, updating existing products, and deleting products. Delivery persons can view orders based on pincode, accept orders, and mark orders as delivered.

• Email Notifications

  QckBuy sends email notifications to customers at each step of the ordering process, including order confirmation, updates, and delivery confirmation.

Usage

To use the QckBuy frontend, follow these steps:

1. Clone the repository to your local machine.
2. Install the necessary dependencies by running npm install.
3. Start the application by running npm start.
4. Open a web browser and navigate to http://localhost:3000.

Once you have the application up and running, you can create an account or use one of the following test accounts to explore the platform:

• Admin:
  • Email: [email protected]
  • Password: Puneet@123
• Employee:
  • Email: [email protected]
  • Password: Puneet@123
• User:
  • Email: [email protected]
  • Password: Puneet@123

Links

• Backend code: https://github.com/Puneet-iner/QckBuy
• Backend deployment: https://qckbuyproduct.azurewebsites.net/api/v1
• Website: http://qckbuy.s3-website.ap-south-1.amazonaws.com/

Conclusion

QckBuy is a feature-rich and user-friendly e-commerce platform that provides a seamless shopping experience for customers. It includes all the necessary features sresponsivenessuch as payment integration, cart management, product catalogue, and secure authentication. The platform is highly customizable and can be easily integrated with other services. With its mobile and desktop , it is accessible to users on a variety of devices.

qckbuy-frontend's Issues

Add validations to all text-field in sign-in/sign-up form

First element is not visible completely in Admin Product List component

Product filter is not working for admin

When admin tries to filter products from their dashboard, the text entered in input box automatically get deleted. Issue occurs because of state change.

Some functionalities of Dashboard for both admin and delivery person is not working as expected

Home page is not visible to unauthenticated users

Basic functionality of an e-commerse platform is that users can see and add to cart as well without being authenticated. Qckbuy lacks this feature.