OTC

Appearance

Frontend Setup ​

This guide will walk you through setting up the EasyOTC Frontend application built with Nuxt.js.

Where this lives ​

  • Repo: clone into the sibling directory ../easty-otc (so it sits next to easy-otc-api)
  • API it talks to: configured via NUXT_PUBLIC_API_BASE_URL (see below)

Where to access ​

EnvironmentStorefront URLAPI base
Localhttp://localhost:3000http://localhost:8000/api
Staginghttps://stage.easyotc.comhttps://stage-api.easyotc.com/api

See /access for credentials and the full URL list.

Prerequisites ​

Before you begin, ensure you have the following installed on your system:

  • Node.js 18+
  • Bun (recommended) or npm
  • Git

Quick Start ​

1. Clone the Repository ​

bash
git clone <frontend-repo-url> easty-otc
cd easty-otc

2. Install Dependencies ​

bash
# Using Bun (recommended)
bun install

# Or using npm
npm install

3. Environment Configuration ​

bash
# Copy the environment file
cp .env.example .env

Edit the .env file with your configuration:

env
# API Configuration
NUXT_PUBLIC_API_BASE_URL=http://localhost:8000/api

# App Configuration
NUXT_PUBLIC_APP_NAME="EasyOTC"
NUXT_PUBLIC_APP_URL=http://localhost:3000

# Search Configuration
NUXT_PUBLIC_MEILISEARCH_HOST=http://localhost:7700
NUXT_PUBLIC_MEILISEARCH_KEY=your-search-key

4. Start Development Server ​

bash
# Using Bun (recommended)
bun dev

# Or using npm
npm run dev

Your frontend will be available at http://localhost:3000

Development ​

Available Scripts ​

bash
# Development server
bun dev

# Build for production
bun build

# Preview production build
bun preview

# Lint code
bun lint

# Type check
bun typecheck

Development Workflow ​

  1. Start the API server (from the backend project):

    bash
    cd ../easy-otc-api
php artisan serve

  2. Start MeiliSearch (if using search features):

    bash
    ./meilisearch

  3. Start the frontend development server:

    bash
    bun dev

Project Structure ​

frontend/
├── components/          # Vue components
│   ├── Auth/           # Authentication components
│   ├── Tables/         # Data table components
│   └── ...
├── composables/        # Vue composables
│   ├── admin/          # Admin-specific composables
│   └── ...
├── layouts/            # Page layouts
├── middleware/         # Route middleware
├── pages/              # Application pages
│   ├── admin/          # Admin pages
│   ├── products/       # Product pages
│   └── ...
├── plugins/            # Nuxt plugins
├── types/              # TypeScript type definitions
└── utils/              # Utility functions

Technology Stack ​

  • Nuxt.js 3 - Vue.js framework
  • Vue 3 - Progressive JavaScript framework
  • TypeScript - Type-safe JavaScript
  • UnoCSS - Utility-first CSS framework
  • MeiliSearch - Search functionality

Features ​

  • Modern UI: Built with Vue 3 and modern CSS frameworks
  • Authentication: Secure login/logout functionality
  • Product Management: Browse and search products
  • Shopping Cart: Full cart functionality
  • Admin Panel: Administrative interface for managing users and products
  • Responsive Design: Works on desktop and mobile devices

API Integration ​

The frontend communicates with the Laravel API backend. Ensure the API is running and accessible at the URL specified in your .env file.

Authentication Flow ​

  1. User logs in through the frontend
  2. Frontend sends credentials to API
  3. API returns authentication token
  4. Frontend stores token and uses it for subsequent requests

API Endpoints ​

The frontend uses these main API endpoints:

  • /api/auth/login - User authentication
  • /api/products - Product management
  • /api/members - Member management
  • /api/cart - Shopping cart operations

Troubleshooting ​

Common Issues ​

Port Already in Use

bash
# Use different port
bun dev --port 3001

API Connection Issues

  • Verify API server is running: php artisan serve
  • Check API URL in .env file
  • Ensure CORS is properly configured on the API

Build Issues

bash
# Clear cache and reinstall dependencies
rm -rf node_modules
bun install

TypeScript Errors

bash
# Run type checking
bun typecheck

Production Deployment ​

Build for Production ​

bash
# Build the application
bun build

# Preview the production build
bun preview

Environment Variables for Production ​

env
# Production API URL
NUXT_PUBLIC_API_BASE_URL=https://your-api-domain.com/api

# Production app URL
NUXT_PUBLIC_APP_URL=https://your-frontend-domain.com

# Production search configuration
NUXT_PUBLIC_MEILISEARCH_HOST=https://your-meilisearch-domain.com
NUXT_PUBLIC_MEILISEARCH_KEY=your-production-search-key

Next Steps ​

After setup, you can:

  1. Explore the API documentation
  2. Learn about the packages used
  3. Start developing new features
  4. Customize the UI components