VitalMeds is a feature-rich multi-vendor e-commerce platform designed for buying and selling medicines and healthcare products. Built using the MERN stack, the platform provides a seamless user experience, ensuring efficient management for admins, sellers, and users alike.

• Username: [email protected]
• Password: Fayez12

• Username: [email protected]
• Password: Bilgates12

1. Home Page

   • Navbar with logo, website name, navigation links, cart icon, language dropdown, and user profile or Join Us button.
   • Slider showcasing advertised products (managed by admin).
   • Category section with clickable cards displaying medicine categories.
   • Discounted product section featuring a draggable multiple-card slider.
   • A blogs section.
   • A state section.
   • Responsive footer.

2. Authentication

   • User registration with roles (user/seller).
   • Social login (Google, GitHub) with default role assignment as user.
   • Password-protected login and authentication.

3. Shop Page

   • View all medicines in a tabular format.
   • "Eye" button to view detailed information in a modal.
   • "Select" button to add medicine to the cart.

4. Category Details Medicine Page

   • View medicines filtered by category.
   • Modal for detailed medicine information.
   • Add to cart functionality.

5. Cart Management

   • View selected medicines with details.
   • Adjust quantity, remove items, or clear cart.
   • Checkout with Stripe payment integration.

6. Invoice Page

   • Displays user and purchase information with the option to print/download as PDF.

7. Admin Dashboard

   • Manage users, categories, banners, and payments.
   • Add/remove products to/from the homepage slider.

8. Seller Dashboard

   • Manage medicines with detailed forms for adding/editing.
   • View payment history.
   • Request advertisement for specific products.

9. User Dashboard

   • View payment history with transaction details.

10. Advanced Features

    • Secure API calls with JWT-based token storage in local storage.
    • Integrated notifications using Sweet Alert for CRUD operations and authentication.
    • Responsive design for mobile, tablet, and desktop.

• Frontend: React.js, Tailwind CSS, React Router, React Hook Form, TanStack Query, React Helmet, SwiperJS
• Backend: Node.js, Express.js
• Database: MongoDB
• Authentication: Firebase, JSON Web Tokens (JWT)
• Payment: Stripe
• Version Control: Git, GitHub

1. Clone the repository:

   git clone https://github.com/Arrafi2644/VitalMeds-Client.git
   cd vitalmeds-client
   

npm install

Create a .env file in the root directory and add the following:

VITE_apiKey=your_api_key VITE_authDomain=your_auth_domain VITE_projectId=your_project_id VITE_storageBucket=your_storage_bucket VITE_messagingSenderId=your_messaging_sender_id VITE_appId=your_app_id VITE_image_hosting_key=your_image_hosting_key VITE_Payment_Gateway_PK=your_payment_gateway_key

npm run dev

npm run build

npm run preview