Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/subratamondal1029/techkart

A E commerce website with react and tailwind
https://github.com/subratamondal1029/techkart

appwrite-auth appwrite-database appwrite-function appwrite-storage ecommerce ecommerce-website html5qrcode jspdf jspdf-autotable jsx npm qrcode razorpay react react-dom react-hook-fom react-router-dom redux-toolkit tailwind

Last synced: about 1 month ago
JSON representation

A E commerce website with react and tailwind

Awesome Lists containing this project

README 

        
# Tech kart

## E-Commerce Website



### About Me

I am Subrata Mondal, a front-end web developer with knowledge of HTML, CSS, and JavaScript, specializing in frameworks like React and Tailwind. I created an e-commerce website using these skills, with React and Tailwind for the frontend and Appwrite for the backend.



## Description

This single-page application (SPA) includes multiple pages:

- **Home Page**: Displays products for users to browse.

- **Product Detail Page**: Shows detailed information about a product.

- **Login/Signup**: Users can sign in, sign up, or use Google login.

- **Cart**: Users can add products to the cart, view a cart preview, and adjust quantities or remove items.

- **Checkout Page**: Users fill in their contact information, and the address is auto-filled based on the postal code using the Indian Postal API. Razorpay is integrated for payment processing.

- **Order Confirmation and Details**: After checkout, users are redirected to an order details page to see the order status and cancel orders if needed.

- **Account Page**: Users can view their order history and personal information.

- **Product Search**: Users can search for products by typing keywords or by category.



Additional features include:

- **Shipment Master Dashboard**: 

  - Manage orders and update their status to "shipped".

  - Generate and download invoices with QR codes.

  - Store shipment invoices in Appwrite storage.

- **Delivery Boy Dashboard**:

  - Confirm deliveries by scanning QR codes.

  - Generate and store delivery invoices in Appwrite storage.

  - Allow users to download delivery invoices from the order details page once the order is delivered.

- **Seller Page**: Allows sellers to add products to the list, including images.



## Test Users

- **User**: `[email protected]` | Password: `subratalog`

- **Shipment Master**: `[email protected]` | Password: `shipmentlog`

- **Delivery Boy**: `[email protected]` | Password: `deliverylog`



## Features



### User Features

- **User Registration and Login**: Users can sign up, sign in, and use Google login.

- **Home Page**: Displays a list of products for users to browse.

- **Product Detail Page**: Shows detailed information about each product.

- **Shopping Cart**: Users can add products to their cart, view a cart preview, and adjust quantities or remove items.

- **Checkout**: Users can fill in their contact information, and the address is auto-filled based on the postal code using the Indian Postal API. Razorpay is integrated for payment processing.

- **Order Confirmation and Details**: After checkout, users are redirected to an order details page to see the order status and cancel orders if needed.

- **Account Page**: Users can view their order history and personal information.

- **Product Search**: Users can search for products by typing keywords or by category.



### Additional Features

- **Shipment Master Dashboard**: 

  - Manage orders and update their status to "shipped".

  - Generate and download invoices with QR codes.

  - Store shipment invoices in Appwrite storage.

- **Delivery Boy Dashboard**:

  - Confirm deliveries by scanning QR codes.

  - Generate and store delivery invoices in Appwrite storage.

  - Allow users to download delivery invoices from the order details page once the order is delivered.

- **Seller Page**: Allows sellers to add products to the list, including images.



## Technologies Used



### Frontend

- **React**: ^18.3.1

- **Tailwind CSS**: ^3.4.7

- **Redux Toolkit**: @reduxjs/toolkit ^2.2.7

- **Appwrite**: ^15.0.0

- **HTML5 QR Code**: ^2.3.8

- **jsPDF**: ^2.5.1

- **jsPDF AutoTable**: ^3.8.2

- **Lucide React**: ^0.424.0

- **QRCode**: ^1.5.4

- **React Hook Form**: ^7.52.1

- **React Redux**: ^9.1.2

- **React Router DOM**: ^6.26.0

- **React Toastify**: ^10.0.5



### Backend

- **Appwrite**: Used for database, storage, authentication, and cloud functions for Razorpay payment integration with JavaScript.



## Usage

This is a web application. Simply land on the webpage and start using it. For additional features, users need to log in.



## Testing

For testing and debugging, the following tools are used:

- **Postman**: For testing API endpoints.

- **Appwrite Function Logs**: For monitoring and debugging Appwrite cloud functions with Razorpay integration.

- **Browser Dev Tools**: For testing and debugging in the browser.

- **Redux DevTools Extension**: For debugging Redux state management.

- **ChatGPT and Google**: For additional troubleshooting and debugging assistance.



## License

This project is a personal project by Subrata Mondal and is not formally licensed.



## Contact Information

For any questions or issues, you can reach out to Subrata Mondal through the following channels:

- **Phone**: +91 9832674420

- **Email**: [[email protected]](mailto:[email protected])

- **Portfolio Website**: [subratamondal](https://subratamondal.vercel.app)

- **GitHub Issues**: Users can raise issues on the GitHub repository.