The E-Commerce Application is a scalable, high-performance platform for online shopping. It supports users, vendors, and administrators with distinct functionalities and a seamless shopping experience.
Repository Links:
Live Links:
Below are the key dependencies used in this project:
react: ^18.3.1react-dom: ^18.3.1react-router-dom: ^6.26.1
@reduxjs/toolkit: ^2.2.7react-redux: ^9.1.2redux-persist: ^6.0.0
react-hook-form: ^7.53.2@hookform/resolvers: ^3.9.1zod: ^3.23.8
@mui/material: ^5.16.7@mui/icons-material: ^5.16.7react-icons: ^5.3.0react-image-gallery: ^1.3.0swiper: ^11.1.15
tailwindcss: ^3.4.10@emotion/react: ^11.13.3@emotion/styled: ^11.13.0
lodash: ^4.17.21lodash.debounce: ^4.0.8jwt-decode: ^4.0.0recharts: ^2.14.1react-scroll: ^1.9.0sonner: ^1.7.0
vite: ^5.4.1typescript: ^5.5.3eslint: ^9.9.0tailwindcss: ^3.4.10autoprefixer: ^10.4.20@vitejs/plugin-react: ^4.3.1typescript-eslint: ^8.0.1
- Manage users (suspend/delete accounts)
- Blacklist vendor shops
- Dynamically manage product categories
- Monitor transactions and platform activities
- Create and manage their shop
- Add/edit/delete products with attributes like name, price, category, inventory count, images, and discounts
- View and respond to customer reviews
- Manage order history
- Browse and filter products (e.g., by price, category)
- Add products to the cart and apply coupon codes
- Compare up to three products
- View purchase history
- Leave reviews and ratings for purchased products
- Display all available products from various vendors.
- Prioritize products from followed shops for logged-in users.
- Infinite scrolling for product listing.
- Filtering and searching functionalities (price range, category, keyword, etc.).
- Scroll-to-top button for better navigation.
- Display a list of categories. When a category is clicked, redirect the user to the "All Products" page and automatically filter the products to show only those belonging to the selected category.
- Show flash sale products and add a button at the bottom. After clicking the button, redirect to the flash sale page and display all flash sale products.
- Product name, price, category, images, and detailed descriptions.
- Display the shop name with a clickable link redirecting to the shop page.
- Related products section showing products in the same category.
- Customer reviews and ratings for the product.
- Vendor’s shop name and details.
- List of products belonging to the vendor only.
- Option for customers to add products directly to the cart from the shop page.
- Option for users to follow or unfollow the shop.
- Follower count.
- Products can only be added from one vendor at a time.
- If attempting to add products from another vendor, show a warning with options:
- Replace the cart with the new product(s).
- Retain the current cart and cancel the addition.
- Display product details, pricing, and total cost in the cart.
- Apply coupon codes for discounts during checkout.
- Integrate Aamarpay or Stripe for payment processing.
- For Vendors: View a detailed list of all orders placed for their shop.
- For Customers: View their purchase history with product and order details.
- Signup Page: Option to register as a user or vendor.
- If a vendor is selected, redirect them to the dashboard to add their shop name and some initial products.
- Login Page: Secure login using JWT.
- Password Management:
- Change password after logging in.
- Reset password functionality via email.
- Display the last 10 products viewed by the user.
- Include product details, prices, and direct links to the product page.
- Allow users to compare up to three products, but only if the products are from the same category.
- Comparison will be based on attributes such as price, category, ratings, and other relevant details.
- If a user attempts to add a product from a different category for comparison, display a warning message indicating that only products from the same category can be compared.
- Mobile and desktop-friendly interface for all users.
- Node.js installed
- Backend server running
- Environment variables configured (e.g.,
.envfile)
-
Clone the repository:
git clone <repository-url>
-
Navigate to the frontend directory:
cd frontend -
Install dependencies:
npm install
-
Start the development server:
npm run dev
npm run devStarts the development server on http://localhost:5173.
npm run buildCreates a production-ready build of the application.
npm run lintRuns ESLint to analyze and fix code quality issues.
- Ensure that the backend API is running and accessible before starting the frontend server.
- Refer to the backend README for more details on API setup and endpoints.
- User cannot see overall product details throw modal by click view icon.
- Admin or vendor cannot reply user review.
- In dashboard have some static data.
- Admin or Vendor cannot edit or update overall order details, They can just order status change and payment status change.
- JWT-based authentication for secure access.
- Paginated APIs for scalability.
- Responsive design for seamless mobile and desktop experiences.
- Advanced filtering and search functionalities.
- Integrated third-party services for payments and image uploads.
- [email protected]
- pass: super@admin
- [email protected]
- pass: 12345678
- [email protected]
- pass: 12345678
- [email protected]
- pass: 12345678
- [email protected]
- pass: 12345678
- [email protected]
- pass: 12345678
- [email protected]
- pass: 12345678
- [email protected]
- pass: 12345678
Contributions are welcome. Feel free to open issues or submit pull requests for any improvements or bug fixes.
This project is licensed under the MIT License.