Dentalk
Dental Information Platform

Astro 5 + Vue 3 Frontend Architecture

The frontend is built on Astro 5.17 SSR as the base framework, with Vue 3.5 for interactive component development. Pages use Server-side Rendering to improve SEO and initial load speed, while interactive sections employ three selective Hydration strategies — client:load, client:idle, and server:defer — ensuring each component loads at the optimal time.

The styling layer uses TailwindCSS 4 + Flowbite component library, with Tailwind Merge handling dynamic class merging. Rich text editing is implemented with TipTap, supporting text alignment, colors, image embedding, and YouTube video insertion. Calendar features use FullCalendar, and drag-and-drop sorting is implemented with VueDraggable. The icon system dynamically loads Flowbite, Heroicons, Tabler, and other icon sets via Unplugin Icons.

Frontend state management uses Nanostores (a lightweight cross-framework state library), combined with @vueuse/core for common Composition API utilities. HTTP requests use ofetch, and the frontend API client implements automatic 401 redirect to login and token auto-refresh mechanisms.

Laravel 11 Backend REST API

The backend is built with Laravel 11 / PHP 8.3, providing a dual-version REST API v1 + v2 architecture with a total of 90+ API Controllers covering all business logic including accounts, products, orders, chat rooms, job matching, courses, forums, and more. The data layer includes 95+ Eloquent Models defining the complete data structure.

Authentication uses JWT (tymon/jwt-auth) for token-based API authentication, combined with Laravel Socialite supporting four OAuth social logins: Google, Apple, LINE, and Facebook. The Middleware Pipeline includes Origin Check (custom CSRF protection), Guest Guard, Auth Guard, Token Refresh, Identity Verification, and Session Flash Data among other layers.

The order system uses Eloquent State Machine to manage four state machines — OrderStatusStateMachine (main order flow), OrderPaymentStatusStateMachine (payment status), OrderShippingStatusStateMachine (shipping status), and CourseOrderStatusStateMachine (course orders) — ensuring each transaction strictly follows business rules.

Hierarchical categorization (product categories, job categories, etc.) is implemented with Closure Table (franzose/closure-table) for efficient tree queries. Activity logging uses Spatie Activity Log to record change history for all key Models, and data backup is performed on schedule with Spatie Backup.

Filament 3 Admin Panel

Built with Filament 3, featuring over 60 Resource panels covering the following management scenarios:

Marketplace Management — Products / Specs / Attributes / SKU variants / Categories (nested tree), Orders (with logistics tracking, return/exchange review), Store settings and review management.
Job Management — Companies / Openings / Job categories, Resumes / Resume version review, Interview invitation tracking.
Course Management — Courses / Sessions / Chapters, Exams / Questions / Exam responses, Attendance records, Course orders and payment settings.
Content Management — Articles / Article categories, Banners, FAQs / FAQ categories, Announcement pages.
Community Management — Forum post / Comment moderation, Guild member management, Report handling.
System Management — Admin accounts, City / Region data configuration.

Permission control is implemented with Filament Shield (based on Spatie Permission) for fine-grained RBAC, where different admin roles see different Resources. The security layer includes Cloudflare Turnstile to prevent brute-force login on the admin panel. Filament extensions include Select Tree, Nested Resources, Time Picker, and other community plugins.

ECPay Payment & Logistics Integration

Integrated with ECPay (tsaiyihua/laravel-ecpay), supporting five payment methods — credit card (one-time payment), ATM virtual account transfer, convenience store code payment, convenience store barcode payment, and bank transfer. The system features B2C and C2C dual-store modes, each configured with independent Merchant ID and Hash Key/IV.

The web checkout flow generates an ECPay form on the backend and redirects to complete the transaction; the Flutter App embeds the payment page via WebView, with custom headers including Bearer Token, Content-Language (zh-TW), and Time-Zone (Asia/Taipei). Upon payment completion, ECPay notifies the backend via Webhook to update order status.

The system also supports electronic invoice issuance (personal carrier / company tax ID) and convenience store logistics integration, allowing customers to choose home delivery or convenience store pickup at checkout. Logistics orders have an independent LogisticsOrder tracking model with shipping label printing functionality.

Real-time Messaging & WebSocket

The chat system backend is based on Laravel Reverb (WebSocket server, Port 6001 local / 443 production), with the frontend using Laravel Echo + Pusher.js (as the transport layer) to listen for channel events.

The backend uses ChatRoomRedisService to cache chat room metadata and messages in Redis, significantly improving read performance. Chat rooms support one-on-one and group modes, featuring message read/unread tracking and paginated history loading. Use cases include marketplace customer service (buyer-seller conversations), job matching (employer-candidate discussions), community direct messages, and more.

The web frontend uses Laravel Echo Vue with Vue 3 Composables to encapsulate real-time event listening, while the app uses the flutter_chat_ui package to build the chat interface.

Multi-strategy Authentication System

The system supports three authentication strategies: Email / Password (traditional registration with multi-step flow), OAuth 2.0 PKCE (Google / Apple / LINE / Facebook, secured with code_challenge + code_verifier), and App WebView Token (AES-256-GCM encrypted with 30-second timestamp to prevent replay attacks).

Web sessions are stored server-side with a 2-hour TTL, supporting automatic token refresh and flash message cross-request passing. Flutter App tokens are stored in Secure Storage (encrypted storage), with Dio Interceptor automatically handling 401 errors and forcing logout. Deep Link callbacks support both Custom Scheme (dentalk://oauth/callback) and Universal Link dual channels.

Identity Verification & Role Management

Platform users are divided into multiple identities: dentists, dental assistants, dental technicians, dental students, hospitals/clinics, and general members. The system uses multi-stage identity verification (status1 / status2 / status3) to track each user's verification progress, combined with Middleware (ensureVerifiedUser) to restrict unverified users from accessing specific features.

Job-related routes use jobSettings Middleware to differentiate between "talent side" and "employer side", providing different page and API access permissions. Store features use storeSettings Middleware to ensure merchants have completed store setup.

Content Moderation & AWS Image Recognition

The platform implements a multi-level content review workflow: Resume version review (job seeker submits, admin approves/rejects), Return/exchange review (buyer applies, seller/platform reviews), Report handling (forum post and comment reports, admin takes action), and Guild member review (application to join, guild leader approves). Each review process is managed by State Machine or Status Enum, with Spatie Activity Log providing complete audit history and operation tracking.

Image recognition integrates AWS Rekognition to automatically detect inappropriate content (Moderation Labels) during product image uploads, as well as compliance checks for user avatars and ID photos. Uploaded images are first stored in AWS S3, then trigger the Rekognition DetectModerationLabels API for real-time analysis. If violations are detected, they are automatically flagged and blocked from listing, with the admin panel displaying review results and confidence scores.

The Filament admin panel provides a unified review dashboard where administrators can batch process by review type (resume / return-exchange / report / image), with filtering and sorting for quick location of pending items.

Flutter Native App Architecture

The mobile app is developed with Flutter 3.8+, using a Feature-Driven Modular Architecture where each feature module is independently organized into models/, entities/, presentations/ (screens + widgets + providers + notifiers), and repositories/ four-layer structure, following MVVM + Repository Pattern.

State management uniformly uses Riverpod 3.0, with all State Classes implemented using the Immutable copyWith() pattern, combined with Equatable for correct equality comparison. The UI layer is built with HookConsumerWidget (combining flutter_hooks + Riverpod) and ConsumerWidget, supporting advanced Provider patterns such as FutureProvider.autoDispose.family.

Navigation uses GoRouter with ShellRoute wrapping Bottom Navigation (Forum/Jobs/Courses/Marketplace/Profile), supporting 40+ Named Routes and Deep Linking. The API layer uses Dio 5.9 + Cache Interceptor (10-minute default TTL) for smart caching, providing two HTTP Client instances: dioProvider (cached) and uncachedDioProvider (real-time). All cache data is automatically cleared on logout.

Multimedia features include image_picker (camera/gallery image selection), flutter_image_compress (pre-upload compression), mobile_scanner (QR Code scanning for attendance), and pretty_qr_code (student QR Code generation). Gesture interaction is enhanced with HammerJS, carousels use Swiper, and tooltip positioning is handled by Floating UI.

Caching & File Storage

Redis serves as the caching layer (prefix dentalk_), queue driver, and WebSocket broadcasting channel. Frontend sessions are stored using Astro Cookie Session.

File storage uniformly uses AWS S3, supporting polymorphic attachments — product images (with automatic dimension detection), course covers, company logos/backgrounds, user avatars, and resume attachment documents. The Polymorphic Attachment Model enables the same upload logic to apply to any Model.

Monitoring & Deployment

Error tracking uses Sentry (sentry/sentry-laravel) to capture backend Exceptions and API errors in real time. The frontend implements a three-layer error handling approach — Server-side errorHandler (unified GET request error handling), Client-side 401 auto-redirect, and Flash Message cross-request error propagation.

For deployment, Production uses Node.js Standalone Adapter deployed on Ubuntu Server, while Staging uses Netlify Adapter. Environments are switched via --mode across Development / Staging / Production configurations. Data backup is automatically scheduled with Spatie Backup.