Architecture Overview
Relevant source files
The following files were used as context for generating this wiki page:- composer.json
- resources/views/layouts/app.blade.php
- resources/views/dashboard/templates.blade.php
- app/Services/TemplateService.php
- public/robots.txt
- resources/views/welcome.blade.php
- resources/views/dashboard/index.blade.php
- README.md
- tests/Unit/Services/TemplateServicePropertyTest.php
- resources/views/components/dashboard-sidebar.blade.php
QashierWise is a web application built on the Laravel framework, designed to function as a backend system for an AI-powered WhatsApp chatbot and Point of Sale (POS) solution for restaurants. The architecture is a monolithic structure that serves both a public-facing website and a dynamic, API-driven user dashboard. It integrates with several external services, most notably the WhatsApp Business API for messaging and Polar.sh for subscription management.
The application leverages a modern PHP and JavaScript stack. The backend is powered by Laravel 12 on PHP 8.2, handling business logic, API endpoints, and data persistence. The frontend is constructed using Laravel's Blade templating engine, styled with Tailwind CSS, and made interactive with Alpine.js. This hybrid approach allows for SEO-friendly public pages and a rich, responsive user experience within the authenticated dashboard.
Core Framework and Dependencies
The application is built upon the Laravel 12 framework, utilizing PHP 8.2. Key third-party dependencies defined in composer.json shape its core capabilities.
Sources: composer.json, README.md
Key Backend Dependencies
| Package | Version | Description |
|---|---|---|
laravel/framework | ^12.0 | The core web application framework. |
laravel/sanctum | ^4.2 | Provides API token authentication for the dashboard. |
netflie/whatsapp-cloud-api | ^2.2 | A PHP client for the WhatsApp Cloud API, likely used for messaging features. |
polar-sh/sdk | ^0.7.0 | SDK for Polar.sh, used for handling subscription and payment logic. |
pusher/pusher-php-server | ^7.2 | Backend driver for broadcasting real-time events, such as notifications. |
league/flysystem-aws-s3-v3 | ^3.30 | Filesystem driver for Amazon S3, likely for storing assets like profile pictures. |
Sources: composer.json:10-16
Development and Tooling
The project uses several tools to aid development and ensure code quality:
- Vite: For frontend asset bundling (
npm run dev,npm run build). - Laravel Sail: A Docker-based local development environment.
- Laravel Pint: For PHP code style fixing.
- PHPUnit & Eris: For unit and property-based testing.
- Concurrently: To run multiple processes (server, queue, logs, vite) with a single
npm run devcommand.
Sources: composer.json:19-26, composer.json:38-42
High-Level Architecture
The system is a monolithic Laravel application that communicates with external APIs and serves a dynamic frontend.
The diagram below illustrates the main components and their interactions.
Frontend Architecture
The frontend is built using Laravel's Blade templating engine, enhanced with Tailwind CSS for styling and Alpine.js for client-side interactivity. This allows for server-rendered pages that are progressively enhanced with JavaScript.
Sources: resources/views/layouts/app.blade.php, resources/views/dashboard/templates.blade.php
Asset Loading Strategy
The main application layout, app.blade.php, defines a sophisticated asset loading strategy focused on performance. It uses preconnect, dns-prefetch, and preload to optimize the delivery of critical resources like fonts and CSS. Non-critical scripts are deferred to avoid blocking page render.
The diagram below shows the loading flow for frontend assets.
UI Components and Interactivity
- Styling: Tailwind CSS is the primary utility-first CSS framework. For local development, it can be loaded via a CDN script if Vite's manifest is not present.
- Interactivity: Alpine.js is used extensively for managing UI state and interactivity directly within the HTML. Dashboard pages like
templates.blade.phpare structured as large Alpine.js components (e.g.,x-data="templatesManager()"). - Real-time Updates: Laravel Echo, configured with Pusher, is used for real-time features. The dashboard listens for events like
whatsapp-message-receivedto update the UI without a page reload. - Layouts: The application uses a main layout (
app.blade.php) which is extended by more specific layouts likedashboard.blade.php. Reusable UI elements like the sidebar (dashboard-sidebar.blade.php) are included as components.
Sources: resources/views/layouts/app.blade.php:25-39, resources/views/dashboard/templates.blade.php:59, resources/views/layouts/dashboard.blade.php:15-21, resources/views/components/dashboard-sidebar.blade.php
Backend and API Architecture
The backend exposes a RESTful API under the /api prefix, which is consumed by the Alpine.js components in the dashboard. Authentication is handled by Laravel Sanctum, which uses bearer tokens for API requests.
API-Driven Dashboard Flow
The dashboard pages are highly dynamic. User interactions trigger JavaScript functions that make fetch requests to the backend API. The API returns JSON data, which Alpine.js then uses to update the UI.
This sequence diagram shows a typical flow for fetching data, such as WhatsApp templates.
Service Layer: WhatsApp Integration
A key backend component is the TemplateService, which acts as a wrapper around the WhatsApp Business Management API. This service encapsulates the logic for creating, validating, updating, and deleting message templates.
Sources: app/Services/TemplateService.php
TemplateService Class Diagram
This diagram shows the structure and public methods of the TemplateService.
The service provides extensive validation for all parts of a template, including name, body/footer length, button counts, and variable sequencing. These validation rules are also rigorously tested using property-based tests.
Sources: app/Services/Templatesofervice.php:40-234, tests/Unit/Services/TemplateServicePropertyTest.php
SEO and Web Presence
The application demonstrates a strong focus on Search Engine Optimization (SEO) for its public-facing pages.
robots.txt Directives
The robots.txt file explicitly disallows crawlers from accessing authenticated routes, API endpoints, and development-related paths, while allowing access to the homepage and key public API endpoints.
| Directive | Path | Description |
|---|---|---|
Disallow | /dashboard, /admin, /login, /register | Prevents indexing of application and auth pages. |
Disallow | /api/auth/, /api/pos/, etc. | Blocks crawlers from internal API endpoints. |
Disallow | /_debugbar/, /sanctum/ | Blocks development and framework-specific paths. |
Allow | / | Allows crawling of the homepage. |
Sitemap | https://qashierwise.com/sitemap.xml | Provides the location of the sitemap. |
Sources: public/robots.txt
Structured Data
The main landing page (welcome.blade.php) is heavily optimized with structured data (JSON-LD) to provide rich context to search engines. This includes schemas for:
OrganizationSoftwareApplicationWebSiteFAQPageBreadcrumbListProduct(including pricing and reviews)
This structured data helps search engines understand the site's content, purpose, and offerings, which can lead to enhanced search results.
Sources: resources/views/welcome.blade.php:164-368
Summary
The QashierWise backend architecture is a well-structured Laravel application that effectively serves as both a public website and a powerful, API-driven dashboard. It uses a modern technology stack with a clear separation of concerns between the PHP backend and the JavaScript-powered frontend. The system is designed for performance, with optimized asset loading and real-time capabilities, and it securely integrates with essential third-party services like WhatsApp and Polar.sh. The inclusion of comprehensive SEO features and a robust service layer for external API communication highlights a mature and production-ready design.