MediMart is a modern, full-featured online pharmacy platform that allows users to browse, search, and purchase medicines securely. The platform supports user authentication, role-based dashboards (Admin, Seller, User), and a seamless shopping and checkout experience. Built with React, Vite, Firebase, and Tailwind CSS, MediMart is designed for performance, scalability, and ease of use.
- User Authentication: Secure login, registration, and Google sign-in via Firebase Auth.
- Role-Based Dashboards: Separate dashboards for Admins, Sellers, and Users.
- Medicine Catalog: Browse, search, and filter medicines by category, company, and more.
- Cart & Checkout: Add medicines to cart, manage quantities, and checkout with Stripe integration.
- Order Management: View order history, download invoices, and track payment status.
- Admin Controls: Manage users, categories, payments, and advertisements.
- Seller Tools: Add/manage medicines, view sales reports, and request advertisements.
- Responsive UI: Beautiful, mobile-friendly design with Tailwind CSS and DaisyUI.
- PDF Invoice Generation: Download order invoices as PDF.
- Notifications: Real-time feedback with React Toastify.
- Frontend: React 19, Vite, Tailwind CSS, DaisyUI
- State Management: React Context, React Query
- Authentication: Firebase Auth
- API: Axios (with secure/private/public API hooks)
- PDF/Export: @react-pdf/renderer, jsPDF, xlsx
- UI/UX: Headless UI, Framer Motion, Lucide React, React Icons
- Routing: React Router DOM
- Testing & Linting: ESLint
src/
Components/ # Reusable UI components (tables, modals, loaders, etc.)
Context/ # React Context providers (Auth, Cart)
hooks/ # Custom React hooks (API, auth, etc.)
Layouts/ # Layout components (Root, Dashboard, Invoice)
Pages/ # Main pages (Home, Shop, Cart, Dashboard, etc.)
Routes/ # Route definitions and guards (AdminRoute, PrivateRoute)
Services/ # API and Firebase configuration
utils/ # Utility functions (grouping, image upload, etc.)
assets/ # Static assets (images, icons)
index.css # Global styles
main.jsx # App entry point
- Node.js (v18+ recommended)
- npm or yarn
- Clone the repository:
git clone <repo-url> cd MediMart-Client
- Install dependencies:
npm install # or yarn install - Environment Variables:
- Copy
.env.exampleto.envand fill in your Firebase and API credentials. - Example variables:
VITE_FIREBASE_APIKEY=... VITE_FIREBASE_AUTHDOMAIN=... VITE_FIREBASE_PROJECTID=... VITE_FIREBASE_STORAGEBUCKET=... VITE_FIREBASE_MESSAGINGSENDERID=... VITE_FIREBASE_APPID=...
- Copy
- Start the development server:
npm run dev # or yarn dev - Open in browser: Visit http://localhost:5173 (or the port shown in your terminal).
- Build for production:
npm run build # or yarn build - Preview production build:
npm run preview # or yarn preview - Deploy: The app is ready to deploy on Firebase Hosting, Vercel, Netlify, or any static hosting provider.
- User: Browse, shop, manage cart, view orders, download invoices.
- Seller: Manage medicines, view sales, request ads.
- Admin: Manage users, categories, payments, ads, and view reports.
You can use the following test accounts to log in as an Admin or Seller:
| Role | Password | |
|---|---|---|
| Admin | admin@gmail.com | 123456 |
| Seller | seller@gmail.com | 123456 |
- Fork the repository
- Create your feature branch (
git checkout -b feature/YourFeature) - Commit your changes (
git commit -m 'Add some feature') - Push to the branch (
git push origin feature/YourFeature) - Open a Pull Request
This project is licensed under the MIT License.
MediMart – Your trusted online pharmacy.