Create Odoo PWA Application

Generate a production-ready Progressive Web App with Odoo Studio backend, featuring offline-first architecture, smart caching, and automatic synchronization.

Before You Start

This skill generates a complete PWA project following proven architectural patterns:

• •Three-layer data flow: Component → Cache Store → API Client → Server Route → Odoo
• •Offline-first: IndexedDB/localStorage with background sync
• •Smart caching: Incremental fetch, stale detection, optimistic updates
• •PWA-ready: Service workers, manifest, installable

Required User Input

Ask the user for the following information before generating:

1. •

   Project name (required)

   • •Format: kebab-case (e.g., "inventory-tracker", "expense-manager")
   • •Used for directory name and package.json
2. •

   Framework (required)

   • •Options: sveltekit (recommended), react, vue
   • •Default: sveltekit if not specified
3. •

   Primary Odoo model (required)

   • •The main custom model name WITHOUT the x_ prefix
   • •Example: If Odoo model is x_inventory, user provides: inventory
   • •Will automatically add x_ prefix in code
4. •

   Model display name (required)

   • •Human-readable singular name (e.g., "Inventory Item", "Expense")
5. •

   Deployment target (optional)

   • •Options: vercel, github-pages, cloudflare, netlify
   • •Default: vercel if not specified

Generation Steps

Step 1: Project Initialization

Create the project directory and initialize the structure:

mkdir {{PROJECT_NAME}}
cd {{PROJECT_NAME}}

Generate the appropriate structure based on framework:

• •SvelteKit: Use SvelteKit 2.x structure with src/ directory
• •React: Use Vite + React structure
• •Vue: Use Vite + Vue structure

Step 2: Base Configuration Files

Generate these files using templates from skills/create-odoo-pwa/templates/{{FRAMEWORK}}/base/:

For SvelteKit:

• •package.json - Dependencies including @sveltejs/kit, @vite-pwa/sveltekit, @sveltejs/adapter-static
• •svelte.config.js - SvelteKit configuration with adapter-static
• •vite.config.js - Vite + PWA plugin configuration
• •jsconfig.json or tsconfig.json - Path aliases and compiler options

For React:

• •package.json - Dependencies including React 18, Vite, vite-plugin-pwa
• •vite.config.js - React + PWA plugin configuration
• •tsconfig.json - TypeScript configuration

For Vue:

• •package.json - Dependencies including Vue 3, Vite, vite-plugin-pwa
• •vite.config.js - Vue + PWA plugin configuration
• •tsconfig.json - TypeScript configuration

Step 3: Environment and Git Configuration

Create .env.example:

# Odoo Instance Configuration
ODOO_URL=https://your-instance.odoo.com
ODOO_DB=your-database-name
ODOO_USERNAME=your-username
ODOO_API_KEY=your-api-key

# Primary Model (use x_ prefix)
ODOO_PRIMARY_MODEL=x_{{MODEL_NAME}}

# Optional: For static hosting (GitHub Pages, etc.)
PUBLIC_API_URL=

Create .gitignore:

node_modules/
.env
dist/
build/
.svelte-kit/
.vercel/
.DS_Store
*.log

Step 4: Core Library Files

Generate these essential files from templates:

A. Odoo API Client (src/lib/odoo.js)

Features:

• •API URL configuration (supports PUBLIC_API_URL for static hosts)
• •callApi(action, data) - Core API communication
• •createRecord(model, fields) - Create records
• •searchRecords(model, domain, fields) - Search/read records
• •updateRecord(model, id, values) - Update records
• •deleteRecord(model, id) - Delete records
• •formatMany2one(id) - Format single relation fields
• •formatMany2many(ids) - Format multi-relation fields
• •Model-specific convenience methods

B. IndexedDB Manager (src/lib/db.js)

Features:

• •Database initialization with versioning
• •Store definitions for master data (partners, categories, config)
• •CRUD operations: add(), get(), getAll(), update(), remove()
• •Transaction helpers
• •Error handling

C. Smart Cache Store (src/lib/stores/{{MODEL_NAME}}Cache.js)

Features:

• •Framework-specific store pattern (Svelte store/React context/Vue composable)
• •Dual storage strategy (localStorage for metadata, IndexedDB for master data)
• •initialize() - Load cache and start background sync
• •sync(forceFullRefresh) - Incremental sync with Odoo
• •forceRefresh() - Clear cache and full sync
• •Partner name resolution with caching
• •Optimistic UI updates
• •Stale detection (5-minute cache validity)
• •Background sync (3-minute intervals)
• •Derived stores for UI states

D. Utility Functions (src/lib/{{MODEL_NAME}}Utils.js)

Features:

• •Business logic calculations
• •Data normalization helpers
• •Field formatters

Step 5: Server-Side API Proxy

For SvelteKit: src/routes/api/odoo/+server.js

Features:

• •JSON-RPC client for Odoo
• •UID caching to reduce auth calls
• •execute(model, method, args, kwargs) helper
• •POST request handler with actions:
  • •create - Create new record
  • •search - Search and read records
  • •search_model - Search any Odoo model
  • •update - Update existing record
  • •delete - Delete record
• •Error handling with descriptive messages
• •Environment variable access

For React/Vue: src/api/odoo.js (server endpoint)

Similar functionality adapted to framework conventions

Step 6: UI Components and Routes

Generate starter components and pages:

SvelteKit Routes:

• •src/routes/+layout.svelte - Root layout with navigation
• •src/routes/+layout.js - SSR/CSR configuration (ssr: false, csr: true)
• •src/routes/+page.svelte - Main form for creating records
• •src/routes/list/+page.svelte - List/table view with filtering
• •src/app.html - HTML template with PWA meta tags

React/Vue Pages:

Equivalent component structure adapted to framework conventions

Shared Components:

• •OfflineBanner - Shows online/offline status
• •SyncStatus - Displays sync state and last sync time
• •LoadingSpinner - Loading indicator
• •Form components with offline support

Step 7: PWA Configuration

Generate PWA files:

static/manifest.json (or public/manifest.json):

{
  "name": "{{PROJECT_NAME}}",
  "short_name": "{{PROJECT_NAME}}",
  "description": "{{MODEL_DISPLAY_NAME}} management app",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#667eea",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Configure service worker in vite.config.js:

• •Auto-update strategy
• •Cache all static assets
• •Offline support

Step 8: Deployment Configuration

Generate deployment files based on target:

Vercel (vercel.json):

{
  "buildCommand": "npm run build",
  "outputDirectory": "build",
  "framework": "sveltekit",
  "regions": ["iad1"]
}

GitHub Pages (.github/workflows/deploy.yml):

name: Deploy to GitHub Pages
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - run: npm ci
      - run: npm run build
      - uses: actions/upload-pages-artifact@v2
        with:
          path: build

Cloudflare/Netlify:

Generate appropriate configuration files

Step 9: Documentation

Generate comprehensive documentation:

README.md:

• •Project overview
• •Prerequisites (Node.js, Odoo account)
• •Installation steps
• •Odoo Studio model setup instructions
• •Development commands
• •Deployment guide
• •Architecture overview

CLAUDE.md:

Complete architecture documentation following the expense-split-pwa pattern:

• •Project overview
• •Development commands
• •Environment setup
• •Architecture diagrams
• •Key architectural patterns
• •Odoo model structure
• •Important development notes
• •Common gotchas

API.md:

• •Odoo integration patterns
• •Available API methods
• •Field formatting examples
• •Common operations

Step 10: Post-Generation Instructions

After generating all files, provide the user with:

✅ Project '{{PROJECT_NAME}}' generated successfully!

📋 Next Steps:

1. Navigate to the project:
   cd {{PROJECT_NAME}}

2. Install dependencies:
   npm install

3. Configure Odoo credentials:
   cp .env.example .env
   # Edit .env with your Odoo instance details

4. Create Odoo Studio Model:
   - Log into your Odoo instance
   - Go to Studio
   - Create a new model named: x_{{MODEL_NAME}}
   - Add custom fields with x_studio_ prefix
   - Example fields:
     * x_name (Char) - Required
     * x_studio_description (Text)
     * x_studio_value (Float)
     * x_studio_date (Date)
     * x_studio_category (Many2one → res.partner or custom)

5. Start development server:
   npm run dev

6. Generate PWA icons:
   - Create 192x192 and 512x512 PNG icons
   - Place in static/ or public/ directory
   - Name them icon-192.png and icon-512.png

7. Deploy (optional):
   - Vercel: vercel
   - GitHub Pages: Push to main branch
   - Cloudflare: wrangler deploy
   - Netlify: netlify deploy

📚 Documentation:
- README.md - Getting started guide
- CLAUDE.md - Architecture documentation
- API.md - Odoo integration patterns

🔗 Resources:
- Odoo API Docs: https://www.odoo.com/documentation/
- SvelteKit Docs: https://kit.svelte.dev/

Template Variables

When generating files, replace these placeholders:

• •{{PROJECT_NAME}} - User's project name (kebab-case)
• •{{MODEL_NAME}} - Odoo model name without x_ prefix
• •{{MODEL_DISPLAY_NAME}} - Human-readable model name
• •{{FRAMEWORK}} - sveltekit/react/vue
• •{{DEPLOYMENT_TARGET}} - vercel/github-pages/cloudflare/netlify
• •{{AUTHOR_NAME}} - User's name (if provided)

Common Patterns from expense-split-pwa

This skill implements proven patterns from the expense-split-pwa project:

1. •Smart Caching: Load from cache immediately, sync in background if stale
2. •Incremental Fetch: Only fetch records with id > lastRecordId
3. •Partner Resolution: Batch-fetch and cache partner names
4. •Dual-Phase Calculation: Process settled/unsettled records separately
5. •Optimistic Updates: Update UI immediately, sync to server in background
6. •Error Recovery: Graceful degradation when offline

Error Handling

If generation fails:

• •Verify all required input is provided
• •Check template files exist
• •Ensure proper permissions for file creation
• •Provide clear error messages to user

Framework-Specific Notes

SvelteKit

• •Use Svelte 5 runes syntax ($state, $derived, $effect)
• •Configure adapter-static for static deployment
• •Set ssr: false for client-side only apps
• •Use $app/paths for base path support

React

• •Use React 18+ with hooks
• •Context API for global state
• •React Query for server state (optional)
• •Vite for build tooling

Vue

• •Use Vue 3 Composition API
• •Pinia for state management
• •Composables for reusable logic
• •Vite for build tooling

Testing the Generated Project

After generation, verify:

1. •npm install completes without errors
2. •npm run dev starts development server
3. •Form renders correctly
4. •Offline banner appears when disconnecting
5. •Data persists in localStorage/IndexedDB
6. •Sync works when back online

Support

For issues or questions:

• •Check CLAUDE.md for architecture details
• •Review generated code comments
• •Consult Odoo API documentation
• •Verify environment variables are set correctly