Thai Herbal NHSO Support App

A modern, fast, and offline-capable web application for browsing Thailand's NHSO-supported herbal medicines.

Overview

The Thai Herbal NHSO Support App is a digital formulary designed for healthcare professionals at Sabot Hospital and beyond. It provides instant access to detailed information about herbal medicines covered by the National Health Security Office (NHSO).

Built with Vue 3, TypeScript, and Vite, this application prioritizes performance, type safety, and user experience. It leverages Google Sheets as a headless CMS, allowing pharmacists to update medical data easily without touching a line of code.

✨ Key Features

• ⚡ Blazing Fast: Powered by Vite and Vue 3 for instant page loads and interactions.
• 🛡️ Type Safe: Built with TypeScript for robust and maintainable code.
• 📱 PWA Support: Fully installable on mobile and desktop devices with offline capabilities.
• 🔍 Instant Search: Real-time filtering by herb name, description, or category.
• 📄 Google Sheets Backend: Data is fetched dynamically from a Google Sheet via Google Apps Script.
• 🎨 Responsive Design: A clean, card-based interface that adapts to any screen size.

🛠️ Tech Stack

• Framework: Vue 3 (Composition API)
• Language: TypeScript
• Build Tool: Vite
• Routing: Vue Router
• PWA: Vite Plugin PWA
• Backend: Google Apps Script (serving JSON from Google Sheets)
• Package Manager: Bun

🚀 Getting Started

Follow these steps to set up the project locally.

Prerequisites

• Bun (v1.0+) or Node.js (v18+)
• A Google Apps Script deployment URL (for the API)

Installation

1. Clone the repository

   git clone https://github.com/pharmacist-sabot/herbs-app.git
   cd herbs-app

2. Install dependencies

   bun install
   # or npm install

3. Configure Environment Variables Create a .env file in the root directory and add your Google Apps Script API URL:

   VITE_GOOGLE_API_URL=https://script.google.com/macros/s/YOUR_SCRIPT_ID/exec

4. Start the development server

   bun run dev

   The app will be available at http://localhost:5173.

📂 Project Structure

herbs-app/
├── public/              # Static assets (icons, manifest)
├── src/
│   ├── assets/          # CSS and images
│   ├── components/      # Reusable Vue components
│   ├── router/          # Vue Router configuration
│   ├── services/        # API services (herbsService.ts)
│   ├── types/           # TypeScript type definitions
│   ├── views/           # Page views
│   ├── App.vue          # Root component
│   └── main.ts          # Application entry point
├── .env                 # Environment variables
├── vite.config.ts       # Vite and PWA configuration
├── tsconfig.json        # TypeScript configuration
└── package.json         # Dependencies and scripts

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is open source and available under the MIT License.