Skip to main content

​
Overview

The Platform Frontend is a modern web application built with Nuxt 3 that provides users with analytics dashboards, data visualizations, and AI-powered insights for their e-commerce operations.

​
Technology Stack

Nuxt 3

Vue 3 meta-framework for building the application

Vuetify 3

Material Design component library for UI

TypeScript

Type-safe development with full IDE support

Pinia

State management with persistence

​
Key Features

​
Analytics Dashboard

The main dashboard provides:
  • Real-time metrics: Sales, orders, revenue by brand
  • Trend visualization: Interactive charts and graphs
  • Multi-brand views: Consolidated and isolated brand analytics
  • Custom date ranges: Flexible time period selection

​
AI Insights

Powered by OpenAI and Google Gemini AI, the platform generates automated insights and forecasts.
  • Sales forecasting and trend predictions
  • Inventory optimization recommendations
  • Customer behavior analysis
  • Automated daily/weekly reports

​
Data Management

  • Export data in multiple formats (CSV, Excel, JSON)
  • Create custom reports and dashboards
  • Schedule automated report delivery
  • Data filtering and segmentation

​
Architecture

​
Page Structure

The application contains 23 pages organized by functionality: 
pages/
├── index.vue                 # Dashboard home
├── analytics/
│   ├── sales.vue            # Sales analytics
│   ├── products.vue         # Product performance
│   └── customers.vue        # Customer insights
├── inventory/
│   ├── stock.vue            # Inventory levels
│   └── forecast.vue         # Demand forecasting
├── brands/
│   └── [id].vue             # Brand-specific dashboards
└── settings/
    ├── profile.vue          # User settings
    └── integrations.vue     # API integrations

​
Component Library

The application includes 29 reusable components:
  • DataTable - Advanced table with sorting, filtering, pagination
  • MetricCard - KPI display cards
  • ChartWidget - Configurable chart component
  • TrendIndicator - Up/down trend display

​
Authentication

​
Auth0 Integration

1

Login Flow

Users authenticate via Auth0 using email/password or social providers (Google, Microsoft).
2

Token Management

JWT tokens are automatically managed by @sidebase/nuxt-auth with refresh token rotation.
3

Protected Routes

Middleware guards all authenticated pages and redirects to login when needed.
4

Role-Based Access

User roles determine accessible features and visible data.

​
API Integration

​
GraphQL with Genql

The frontend uses Genql for type-safe GraphQL queries: 
import { useQuery } from '@/composables/useGraphQL'

// Fully typed query
const { data, loading, error } = useQuery({
  orders: {
    __args: {
      where: { brand_id: { _eq: selectedBrand } }
    },
    id: true,
    total: true,
    status: true,
    customer: {
      name: true,
      email: true
    }
  }
})
Genql provides full TypeScript autocompletion and compile-time type checking for all GraphQL operations.

​
Real-time Updates

The application supports GraphQL subscriptions for real-time data: 
const { data: liveOrders } = useSubscription({
  orders: {
    __args: {
      where: { status: { _eq: 'pending' } }
    },
    id: true,
    created_at: true,
    total: true
  }
})

​
State Management

​
Pinia Stores

The application uses Pinia for centralized state management:
  • Current user profile
  • Authentication state
  • User preferences
  • Selected brands
  • Selected date ranges
  • Active filters
  • Chart configurations
  • Dashboard layouts
  • API response caching
  • Optimistic updates
  • Offline data access

​
Persistence

User preferences and filters are persisted using pinia-plugin-persistedstate:
  • Survives page refreshes
  • Syncs across browser tabs
  • Encrypted localStorage for sensitive data

​
Deployment

​
Netlify Hosting

The frontend is automatically deployed to Netlify on every push to the main branch.
Deployment Features:
  • Automatic builds from GitHub
  • Preview deployments for pull requests
  • Custom domain with SSL
  • Edge caching for static assets
  • Serverless functions support

​
Build Process

# Install dependencies
npm install

# Generate GraphQL types
npm run genql

# Build for production
npm run build

# Preview production build
npm run preview

​
Performance

​
Optimization Strategies

Code Splitting

Nuxt automatically splits code by route for faster initial loads

Lazy Loading

Components and images load on-demand to reduce bundle size

API Caching

Response caching reduces redundant API calls

Static Generation

Public pages are pre-rendered at build time

​
Development

​
Local Development

cd platform-front
npm install
npm run dev
Access the application at http://localhost:3000

​
Environment Variables

# .env
NUXT_PUBLIC_API_URL=https://hasura.trendteller.com/v1/graphql
NUXT_PUBLIC_AUTH_DOMAIN=trendteller.auth0.com
NUXT_AUTH_SECRET=your-secret-key

​
Next Steps

Architecture Details

Explore the detailed frontend architecture

Component Inventory

Browse all available UI components

Development Guide

Start developing frontend features

API Integration

Learn GraphQL integration patterns