Create Odoo PWA Application

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