A modern, responsive, and feature-rich frontend for an online pharmacy application built with React and Tailwind CSS.
- Product Setup: Browse medicines by category, filter by price, and sort by popularity.
- Product Details: Comprehensive product info with dosage, side effects, and reviews.
- Shopping Cart: Manage items, update quantities, and upload prescriptions.
- Authentication: User login and registration with mock Google OAuth.
- User Dashboard: View profile and order history.
- Responsive Design: Fully optimized for mobile, tablet, and desktop.
- Mock Data: Realistic medicine data and simulated backend interactions.
- React (Vite)
- Tailwind CSS (Styling)
- React Router DOM (Navigation)
- Context API (State Management)
- React Icons (Iconography)
- React Hot Toast (Notifications)
-
Clone the repository (if you haven't already):
git clone <repository-url> cd medicare-plus
-
Install dependencies:
npm install
-
Run the development server:
npm run dev
-
Open in Browser: Visit
http://localhost:5173to view the application.
src/
├── assets/ # Static assets
├── components/ # Reusable UI components
│ ├── layout/ # Navbar, Footer, Layout
├── context/ # AuthContext, CartContext
├── data/ # Mock data (medicines.json)
├── pages/ # Page components (Home, Shop, Cart, etc.)
├── styles/ # Global styles
└── App.jsx # Main application component with routing
- Colors: Modified in
tailwind.config.js. - Mock Data: Update
src/data/medicines.jsonto change product listings.
MIT