Thai Herbal NHSO Support App

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

🌐 Live Demo

👉 Try the App

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
• Styling: Tailwind CSS v4
• 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

Available Scripts

Script	Description
bun run dev	Start development server
bun run build	Build for production
bun run preview	Preview production build
bun run lint	Run ESLint
bun run lint:fix	Fix ESLint errors
bun run type-check	Run TypeScript type checking
bun run test:unit	Run unit tests with Vitest
bun run test:coverage	Run tests with coverage report

🚀 Deployment

Build the production bundle:

bun run build

The output will be in the dist/ directory. You can deploy it to any static hosting service like:

• Vercel
• Netlify
• Cloudflare Pages
• GitHub Pages

📄 License

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