Ecommerce Delivery is a Vue 3 + Quasar 2 (Webpack) SaaS frontend built for end-to-end e-commerce and delivery management. It connects to a backend REST API to provide a full shopping experience — from browsing a product catalog and adding items to a cart, through checkout and payment, all the way to real-time delivery tracking. Firebase Cloud Messaging delivers push notifications to users and administrators, while Socket.io keeps order statuses in sync across sessions. The application is role-aware, serving distinct interfaces and permissions to regular users, promotors, and administrators from a single codebase. Client-side utilities such asDocumentation Index
Fetch the complete documentation index at: https://mintlify.com/fredy-rizo/ecommerce-delivery-frontend/llms.txt
Use this file to discover all available pages before exploring further.
validateRequire (form field validation) and searchLinksinText (auto-linking URLs in text content) are shared across views to reduce duplication.
What it includes
Product Store
Browse and search a paginated product catalog. Administrators can create, update, and remove products directly from the store view.
Shopping Cart
Add products to a persistent cart, adjust quantities, and proceed to a multi-step checkout with address selection and payment confirmation.
Order Management
View all placed orders, filter by status, and change order states (pending → dispatched → delivered) with a dedicated sales-report panel for admins.
Delivery Tracking
Real-time delivery status list powered by Socket.io, giving buyers live updates on where their order is in the fulfillment pipeline.
Push Notifications
Firebase Cloud Messaging integration sends browser and mobile push notifications for order confirmations, status changes, and promotional messages.
Member Management
Administrators can list, search, and update member accounts, including assigning roles (Usuario, Promotor, Admin) and managing membership status.
Tech stack
| Layer | Technology |
|---|---|
| UI framework | Vue 3 + Quasar 2 (Webpack mode) |
| State management | Vuex 4 |
| Client-side routing | Vue Router 4 (hash mode) |
| HTTP client | Axios 0.21 |
| Real-time | Socket.io-client 4 |
| Push notifications | Firebase 12 (FCM) — compat API |
| Environment config | @quasar/quasar-app-extension-dotenv + dotenv 16 |
| Build toolchain | @quasar/app-webpack 3 |
| Mobile (optional) | Capacitor (quasar build -m capacitor) |
User roles
The application defines three roles. Every authenticated request is validated client-side viavalidateUser() in src/tools/User.js, and the backend enforces the same rules server-side.
| Role name | Value | Description |
|---|---|---|
| Usuario | 1 | Standard buyer. Can browse the product store, manage their own cart, place orders, and track deliveries. |
| Admin | 2 | Platform administrator. Has full access to all store management features, the sales report, member management, and role assignment. A value of 2 bypasses all other role checks automatically. |
| Promotor | 3 | Sales promotor. Can access order and shopping list views alongside regular users (shares [1, 3] access on several pages), acting as a field agent between the store and its customers. |
Prerequisites
Before installing the project make sure your environment meets the minimum versions declared inpackage.json:
| Requirement | Minimum version |
|---|---|
| Node.js | >= 12.22.1 |
| npm | >= 6.13.4 |
| yarn | >= 1.21.1 |
| Quasar CLI | Latest v2 (npm i -g @quasar/cli) |