Skip to main content

Documentation 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.

Ecommerce Delivery is a Vue 3 + Quasar 2 single-page application scaffolded with @quasar/app-webpack. All application source lives under src/, which is subdivided by concern — pages, components, layouts, tools, store, router, boot files, and Firebase glue. Understanding the layout of this tree is the fastest way to navigate the codebase and know where to add new features.

​
Directory tree

src/
├── App.vue                    # Root Vue component — mounts router-view and wires FCM foreground messages
├── NotificationsManager.vue   # FCM notification handler
├── assets/                    # Static images and logos
├── boot/
│   └── axios.js               # Axios boot file (registered in quasar.config.js)
├── components/
│   ├── EssentialLink.vue      # Reusable nav link wrapper used by both navbars
│   ├── Members/               # BarFilterMembers
│   ├── Mensajes/              # ColumnasChats (messaging)
│   ├── Notifications/         # ListNotifications, ItemNotification
│   ├── Payments/              # ConfimPayment, DialogPaymentProcess
│   ├── Perfil/
│   │   ├── Cliente/           # ClientIdCard, catalogoVentas, formCatalogo
│   │   └── Formularios/       # RegistroUsuarios
│   ├── Products/              # BarFilterProducts, FormProducts, ProductCard
│   ├── Sales/                 # BarFilterSales, ChangeStatusSale, DeliveryTracking, SalesReport
│   ├── Security/              # formSecurityCode
│   ├── Shopping/              # DeliveryStatusList
│   ├── Tools/                 # Carousel, Xfunctions.js
│   └── login/                 # formSignIn, formSignUp, changePassword, formconfirmeNewPassword
│       └── updatePass/        # formupdatePasswordWithToken
├── css/
│   ├── app.scss               # Global styles
│   └── quasar.variables.scss  # Quasar SCSS variable overrides
├── firebase/
│   └── init.js                # Firebase app + messaging initialisation
├── layouts/
│   ├── Header.vue
│   ├── MainLayout.vue         # Main authenticated layout — conditionally renders admin or user navbar
│   ├── NavBar_admin.vue       # Sidebar for admin users (role 2)
│   └── NavBar_users.vue       # Sidebar for regular/staff users (role 1 or 3)
├── pages/                     # Route-level page components
│   ├── Camisetas/             # CamisetasPage (filtered by shirt type)
│   ├── IndexPage.vue          # Default index page
│   ├── Members/               # MembersPage (admin)
│   ├── Perfil/
│   │   ├── Cliente/           # ClientId profile page
│   │   └── Formularios/       # FormularioPage
│   ├── login/                 # SignIn, signUp, authPage, recoveryPassword, confirmeNewPassword
│   │   └── updatePass/        # updatePasswordWithToken
│   ├── notifications/         # Notifications feed
│   ├── sales/                 # salesPage (admin)
│   ├── security/              # secureCode
│   ├── shared/                # ErrorNotFound (404)
│   ├── shopping/              # ShoppingList (order history)
│   ├── shoppingCar/           # Car (shopping cart)
│   └── store/                 # MainStore (product catalog)
├── router/
│   ├── index.js               # Vue Router instance + global navigation guard
│   └── routes.js              # Route definitions
├── store/
│   ├── index.js               # Vuex store root (no registered modules by default)
│   └── module-example/        # Template Vuex module (state/getters/mutations/actions)
└── tools/
    ├── Functions.js           # searchLinksinText helper
    ├── ListCities.js          # Colombian city list
    ├── User.js                # validateUser, ValidateSession, getDataUser
    └── ValidateForm.js        # validateRequire helper

​
Key conventions

Pages ↔ Routes

Every file under pages/ is a route-level component — it maps 1-to-1 to an entry in src/router/routes.js. Components inside components/ are reusable pieces that multiple pages can import.

Stateless tools

tools/ contains pure JavaScript helper functions with no Vue dependencies. They can be imported into any component or page without creating circular references.

Boot files

Files listed in the boot array of quasar.config.js run before the Vue application mounts. src/boot/axios.js is the only registered boot file — it attaches the Axios instance as this.$axios and this.$api on the Vue global.

Layouts wrap pages

Files in layouts/ are shell components that contain a <router-view />. They provide the persistent navigation chrome (header, drawer) that surrounds page components.

​
Layouts

MainLayout.vue is the outer shell for every authenticated route. It reads the logged-in user’s role from localStorage and conditionally renders one of two navigation sidebars based on the role value: 
// src/layouts/MainLayout.vue (setup excerpt)
const user = ref(JSON.parse(localStorage.getItem("user")));
let rol = 1;
if (user.value) {
  for (let index = 0; index < user.value.roles.length; index++) {
    const element = user.value.roles[index];
    rol = element.value;
  }
}
const type = ref(rol);
The template then switches on type: 
<NavBaradmin v-if="type == 2" />
<NavBar v-if="type == 1 || type == 3" />
ComponentRole valuePurpose
NavBar_admin.vue2Admin sidebar — includes Ventas, Miembros, and a green branded header
NavBar_users.vue1 or 3Customer/staff sidebar — includes Inicio, Camisetas (with sub-categories), Compras, and a live cart badge
NavBar_users.vue also maintains a reactive cart count by listening for both the native storage event and the custom cartUpdated event dispatched whenever the cart contents change: 
onMounted(() => {
  dataUser.value = getDataUser();
  updateLinks();
  updateCartCount();
  window.addEventListener("cartUpdated", updateCartCount);
});

​
Firebase integration

src/firebase/init.js initialises the Firebase app and messaging using environment variables from .env (loaded via dotenv in quasar.config.js). App.vue (the root component) imports messaging and registers a foreground message handler via onMessage from the Firebase Messaging SDK. This means push notifications received while the app is open are handled in-app rather than by the service worker.

​
Build artifacts

The .quasar/ directory at the project root is generated by the Quasar CLI at build time and is not committed to version control. It contains the compiled app entry points, Webpack configuration overrides, and auto-imported component registrations. You should never edit files inside .quasar/ directly — they are regenerated on every quasar dev or quasar build invocation.

Build docs developers (and LLMs) love

Get started for freeTalk to us