Medication Tracker

A modern, responsive medication tracking app built with Vue 3, Pinia, and Tailwind CSS. This app helps users manage their daily medications, track their schedule, and maintain healthy habits with a beautiful, user-friendly interface.

Features

• Add, Edit, Delete Medications: Full CRUD support for managing medications.
• Responsive Design: Optimized for mobile, tablet, and desktop with a modern, slick UI.
• Daily Schedule & Calendar: View and manage your medication schedule with an interactive calendar.
• Quick Actions: Fast access to common actions for each medication.
• Profile Management: Edit user profile, view streaks, and registration date.
• Demo Data: Pre-existing data for new users to explore the app.
• Status Tracking: Mark medications as taken, postponed, or missed.
• Persistent State: All data is managed with Pinia for reactivity and reliability.

Tech Stack

• Vue 3 (Composition API)
• Pinia (state management)
• TypeScript (type safety)
• Tailwind CSS (utility-first styling)
• Vite (fast development/build)
• Heroicons (modern icons)

Project Structure

├── public/
├── src/
│   ├── assets/           # Images, CSS, SVGs
│   ├── components/       # Vue components
│   │   ├── common/       # Shared UI components
│   │   └── medication/   # Medication-related components
│   ├── router/           # Vue Router config
│   ├── stores/           # Pinia stores
│   ├── types/            # TypeScript types
│   ├── utils/            # Utility functions
│   └── views/            # Main app views
├── index.html
├── package.json
├── tailwind.config.js
├── vite.config.ts
└── ...

Getting Started

1. Install dependencies:

   npm install

2. Run the development server:

   npm run dev

3. Open the app: Visit http://localhost:5173 in your browser.

Usage

• Home: See today's medications and quick actions.
• Medications: View, add, edit, or delete medications.
• Schedule: Browse your medication calendar and manage daily routines.
• Profile: Edit your profile and view your streak.

Customization

• Add new medication fields: Edit src/types/medication.ts and update related components.
• Change theme/colors: Edit tailwind.config.js.
• Add new views or features: Create new components in src/components/ and views in src/views/.

Contributing

Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.

License

MIT