VinylVibes Frontend Architecture and System Design

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/akibanks/tienda_musica_web/llms.txt

Use this file to discover all available pages before exploring further.

​

System Layers

┌─────────────────────────────────────────────────────────────┐
│  Browser                                                    │
│                                                             │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────────┐  │
│  │  index.html  │  │  login.html  │  │   admin.html     │  │
│  │  script.js   │  │  login.js    │  │   admin.js       │  │
│  └──────┬───────┘  └──────┬───────┘  └────────┬─────────┘  │
│         └─────────────────┴───────────────────┘            │
│                            │  fetch() + Authorization: Bearer│
│                    style.css (shared)                       │
│                    localStorage (shared)                    │
└────────────────────────────┼────────────────────────────────┘
                             │ HTTPS / REST
                             ▼
            ┌────────────────────────────────┐
            │  REST API                      │
            │  https://api-tienda-vinilos    │
            │        .onrender.com           │
            └───────┬──────────┬─────────────┘
                    │          │
          ┌─────────▼──┐  ┌────▼──────┐  ┌────────────┐
          │  Discogs   │  │  Last.fm  │  │  YouTube   │
          │  API       │  │  API      │  │  (embed)   │
          └────────────┘  └───────────┘  └────────────┘

​

Pages and Their Scripts

​

index.html + script.js — Main Catalog

• Debounced search — the search input fires GET /buscar?q=&pagina= after a 500 ms delay, renders results with pagination controls, and resets to the recent catalog when the query is cleared.
• Genre filter — ten fixed genre buttons each trigger GET /genero/:genre?pagina=. Results are cached in a client-side object keyed by genre:page so repeated clicks never issue duplicate network requests.
• Album detail modal — abrirModalDetalle(discogsId) fetches GET /disco/:id for base data, then fires three parallel requests: GET /disco/:id/historia (Last.fm biography), GET /disco/:id/video (YouTube embed ID), and GET /disco/:id/recomendaciones (personalized recommendations).
• Storytelling modal — abrirModalStorytelling(discogsId) opens the same modal in a presentation layout focused on the album biography, triggered from the novedades section.
• Shopping cart — cart items are stored in localStorage as vv_carrito. Add, remove, and quantity-change operations write to localStorage and immediately re-render the cart panel. The storage event syncs changes across tabs.
• Checkout flow — “Buy now” opens a shipping address form, then a card details form. On submission, POST /checkout is called with the item list and shipping object. The backend calculates the final price; the cart is cleared on success.
• Purchase history — authenticated users can open a history panel that calls GET /mis-compras and renders paginated order summaries.

​

login.html + login.js — Authentication

• Login — POST /login with { nombre_usuario, password }. On success, the response { token, nombre, es_admin, es_demo } is decomposed and written to localStorage. The browser is then redirected to index.html.
• Registration — POST /registro with { nombre_usuario, password }. On success, a success message is shown and the tab switches back to login after 1.5 seconds.

​

admin.html + admin.js — Admin Panel

• User management — displays a searchable table of all users with columns for ID, name, email, role badge, and creation date. Admins can change a user’s role via PUT /admin/usuarios/:id/rol or delete them via DELETE /admin/usuarios/:id. An inline confirmation replaces the action buttons before the destructive delete request is sent.
• Sales management — displays a searchable table of all orders with order ID, customer name, total, status badge, and date. Admins can update the order status via PUT /admin/ventas/:id/estado. A “View detail” button opens a modal fetching GET /admin/ventas/:id, which shows the line items, totals, and full shipping address.
• Demo mode — when _esDemo is true, all select dropdowns and action buttons in both tables are rendered as disabled. A read-only banner is injected into the DOM directly after the admin header element.

​

Shared: style.css

​

localStorage Keys

​

Cross-Tab Cart Synchronization

window.addEventListener('storage', (e) => {
    if (e.key === 'vv_carrito') {
        carrito = JSON.parse(e.newValue || '[]');
        renderizarCarrito();
    }
    if (e.key === 'usuarioLogueado' || e.key === 'esAdmin') {
        actualizarInterfazUsuario();
    }
});

​

Authentication Flow

1. The user submits the login form on login.html.
2. login.js sends POST /login with { nombre_usuario, password }.
3. The backend validates the credentials and returns { token, nombre, es_admin, es_demo }.
4. login.js writes vv_token, usuarioLogueado, esAdmin, and esDemo to localStorage.
5. The browser redirects to index.html.
6. On any protected action (checkout, purchase history, recommendations, admin operations), the relevant JS file calls authHeaders(), which reads vv_token from localStorage and returns the headers object:

function authHeaders() {
    return {
        'Content-Type':  'application/json',
        'Authorization': `Bearer ${localStorage.getItem('vv_token') || ''}`,
    };
}

7. The Authorization header is included in the fetch call. The backend validates the JWT and responds accordingly.

​

Third-Party Integrations

​

Demo Mode