Lex Consultoría Despacho Frontend is a single-page application built for a legal consultancy firm. It bridges two distinct user experiences in one cohesive codebase: a polished public landing experience for prospective clients — complete with firm information and appointment booking — and a protected admin dashboard for internal operations. By combining Vue 3’s Composition API, the Quasar 2 component framework, and a Vite-powered build pipeline, the application achieves fast load times, consistent UI patterns, and a maintainable structure that grows with the firm’s needs.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/fredy-rizo/despacho-frontend/llms.txt
Use this file to discover all available pages before exploring further.
Technology Stack
The frontend is assembled from a carefully chosen set of modern tools. Each layer was selected to minimize friction between development, styling, and deployment.Vue 3
Reactive, component-driven UI built on the Composition API and
<script setup> patterns for predictable state management.Quasar v2
Enterprise-grade component library and CLI that handles theming, icon packs, plugins, and multi-target builds out of the box.
Vite
Next-generation build tool offering near-instant hot-module replacement in development and optimized Rollup bundles in production.
Vue Router 4
Official router for Vue 3, configured in hash mode to enable deployment on any static host without server-side rewrite rules.
Axios
Promise-based HTTP client registered as a Quasar boot file, exposing
$axios and $api globally across all Vue components.Line Awesome Icons
SVG-based icon set loaded via
@quasar/extras, providing over 1,400 scalable icons with no additional font requests.Functional Areas
The application is divided into two primary areas that share the same router and Axios instance but serve different audiences.Public Landing Experience
Unauthenticated visitors land on the start page (/) and can navigate to the “Who We Are” section (/info_who_we_are) to learn about the firm’s practice areas, team, and values. Both routes are wrapped in MainLayout.vue, which renders the branded header with the Lex Consultoría logo and navigation bar. Users who do not yet have an account can register at /signUp, and returning clients sign in at /signIn.
Admin Dashboard
Authenticated users with the appropriate role are granted access to/dashboard, a protected workspace for internal operations. The validateUser helper in src/tools/User.js reads role data from localStorage and returns the session token, enabling fine-grained, role-based permission checks before any API request is dispatched.
Key Features
Landing Page
Start page and firm-information section served under
MainLayout.vue with the branded header and responsive Quasar components.Appointment Booking
Client-facing flow that lets visitors request consultations, backed by API calls through the configured Axios instance.
Admin Dashboard
Role-gated workspace at
/dashboard for firm staff to manage clients, appointments, and internal content.Authentication
Sign-up and sign-in pages with token-based sessions stored in
localStorage and validated by src/tools/User.js helpers.API Integration
Axios boot file registers a global
$api instance pointing to the backend, with session-expiry redirects handled automatically.Routing
Hash-mode Vue Router 4 configuration with lazy-loaded page chunks and a catch-all
ErrorNotFound fallback route.Backend Dependency
The frontend SPA communicates with a backend API server. During local development, the API is expected to be running at
http://localhost:2101. Requests made before the backend is started will result in network errors in the browser console. Ensure the backend service is up before running quasar dev.