Play video
Pause video

Chang An Pharmacy
Reservation System

LINE LIFF Prescription Pickup Platform

2025

Chang An Pharmacy Reservation System screenshot
Scroll
Project Type Reservation System
Timeline 2025
Core Tech Astro, Laravel, GraphQL
Integration LINE LIFF

Project Overview

Chang An Pharmacy wanted to provide customers with a convenient online prescription pickup reservation service. Through their LINE Official Account, customers can complete reservations directly within LINE after adding the pharmacy as a friend, without needing to download any additional apps.

This project uses LINE LIFF as the customer-facing entry point. Customers open the reservation form within LINE, fill in personal details, select a medical institution, specify a pickup date, and can take or upload prescription photos. The system automatically retrieves LINE user information, eliminating the need for a separate registration process.

The backend is built with Laravel + GraphQL, and the frontend uses Astro + Vue 3. The admin panel is powered by Filament, enabling pharmacy staff to view reservation orders in real time and manage medical institutions and user data.

50+ Supported Departments
LIFF In-LINE Booking
10MB Prescription Upload

Core Features

01

LINE LIFF Reservation Form

Integrated with LINE Front-end Framework, customers can open the reservation page directly within LINE after adding the pharmacy as a friend. They can fill in their name, phone number, date of birth, appointment date, and upload prescription photos — all in one step.

02

LINE Login Identity Binding

LINE Login automatically retrieves user identity, eliminating the need for tedious registration and login processes. The system automatically links LINE accounts with reservation data, so returning users do not need to re-enter personal information.

03

LINE Message Notifications

Integrated with LINE Message API, the system automatically sends confirmation notifications to customers after a successful reservation, including appointment date, pharmacy details, and more. Pharmacists can also proactively push notifications when medications are ready, keeping customers updated on pickup status in real time.

04

GraphQL API Architecture

Frontend and backend exchange data via GraphQL, supporting medical institution search, reservation creation, LINE user synchronization, and more. It precisely fetches only the required fields, improving loading efficiency on mobile devices.

05

Prescription Photo Upload

The reservation form supports camera capture or photo gallery selection. Customers can directly upload prescription photos (JPG/PNG, max 10MB), which are automatically stored in the admin panel for pharmacist verification.

06

Filament Admin Panel

Built with Filament, the comprehensive admin panel manages reservation orders, medical institution data, LINE user bindings, department settings, and more — supporting daily pharmacy operations.

Technical Details

LINE LIFF Reservation Entry

Using LINE LIFF as the customer-facing entry point, customers can open the reservation page directly within LINE after adding the pharmacy as a friend, without needing to download a separate app or register an account.

LINE Login & Message API

LINE Login automatically retrieves user identity and binds accounts, so returning users do not need to re-enter information. The system also integrates LINE Message API to automatically send LINE notifications at key moments — such as successful reservation and medication preparation — keeping customers informed of their reservation and pickup status in real time.

GraphQL API Design

All data exchange between frontend and backend is handled via GraphQL, including medical institution queries (with keyword search), reservation creation (with file uploads), LINE user synchronization, and more. GraphQL's multipart request specification supports prescription photo uploads.

Reservation Form Design

Form fields include medical institution, name, phone number, date of birth (in ROC calendar format), pickup date, and prescription photo — each with real-time validation. Font size adjustment (A-/A/A+) is supported to improve accessibility, and the form includes a complete personal data collection notice and privacy policy.

Filament Admin Panel

The admin panel is built with Filament, supporting reservation order management, medical institution data maintenance (with import functionality), LINE user management, department settings (50+ departments mapped to NHI codes), activity log tracking, and more.

Tech Stack

Backend

  • Laravel Framework
  • GraphQL API
  • Filament Admin Panel

Frontend

  • Astro 5 SSR
  • Vue 3 Interactive Components
  • TailwindCSS Styling

LINE Integration

  • LIFF Reservation Interface
  • LINE Login Identity Binding
  • Message API Notifications
  • Webhook Event Handling

Healthcare Features

  • Medical Institution Search
  • 50+ Department Categories
  • Prescription Photo Upload
  • Personal Data Privacy Compliance

CONTACT US

Have a similar project in mind?

Whether it's a reservation system, LINE integration, or healthcare platform, we can build a tailored solution for you.

Contact Us