AI Vibe-Coding Guide

# Claude Code (Desktop)
# Tilgjengelig på claude.ai/code
# Støtter Claude 3.5 Sonnet med 200K context

# Cursor IDE
brew install --cask cursor
# Støtter GPT-4o, Claude 3.5 Sonnet, og egne modeller

# ChatGPT Canvas
# Tilgjengelig på chat.openai.com (GPT-4o)
# Aktiveres automatisk for kode >10 linjer

# API-nøkkel fra Kassalapp
# Registrer på kassal.app/api
# Free tier: 60 requests/min
# Commercial: Unlimited requests

# .env
KASSALAPP_API_KEY=din-api-nøkkel
KASSALAPP_BASE_URL=https://kassal.app/api/v1/

// config.js
export const apiConfig = {
  baseURL: process.env.KASSALAPP_BASE_URL,
  headers: {
    Authorization: `Bearer ${process.env.KASSALAPP_API_KEY}`,
    Accept: 'application/json',
    'User-Agent': 'YourApp/1.0',
  },
  timeout: 10000, // 10 seconds
  // Rate limiting: 60 req/min for free tier
};

Bygg en komplett handleliste-applikasjon som bruker Kassalapp API.

**Teknisk stack:**
- React 18 med hooks
- Tailwind CSS for styling
- Axios for API-kall
- LocalStorage for persistering

**API Info:**
- Base URL: https://kassal.app/api/v1/
- Auth: Bearer token i Authorization header
- Rate limit: 60 requests/minutt (free tier)
- Endepunkter:
  - GET /products?search={query} - Søk etter produkter
  - GET /products/id/{id} - Hent spesifikt produkt
  - GET /products/ean/{ean} - Oppslag via strekkode
  - GET /physical-stores - List butikklokasjoner
  - GET /categories - Produktkategorier
  - POST /shopping-lists - Handlelister (krever auth)

**Funksjonalitet:**
1. Søkefelt som autocompleter produktnavn
2. Produktkort som viser navn, pris og butikker
3. "Legg til handleliste" knapp per produkt
4. Handleliste sidebar med:
   - Totalpris
   - Anslått besparelse ved å handle i billigste butikk
   - Mulighet å fjerne produkter
   - Tøm hele listen knapp
5. Responsiv design (fungerer på mobil)
6. Loading states og error handling
7. Lagrer handleliste i localStorage

**Design:**
- Moderne, ren design med Tailwind
- Primærfarge: rose/pink (#e11d48)
- Avrundede hjørner og shadows
- Smooth hover-effekter

Start med en enkel fil (App.jsx) med inline styles via Tailwind klasser. Vurder å inkludere mock API-responser for testing uten ekte API-nøkkel.

Lag et prissammenligning dashboard som viser prisutvikling over tid.

**Tech Stack:**
- Vue 3 Composition API
- Chart.js for grafer  
- Tailwind CSS
- Axios for API

**Features:**
1. Produktsøk med typeahead
2. Sammenlign priser på tvers av butikker
3. Prishistorikk graf (linjediagram)
4. "Beste tilbud akkurat nå" liste
5. Butikkfilter (checkbox-liste)
6. Export data som CSV
7. Responsive design

**API Mock Data:**
```json
{
  "products": [
    {
      "id": 1,
      "name": "Melk 1L Tine",
      "current_price": 23.90,
      "stores": [
        {"name": "Rema 1000", "price": 23.90, "updated": "2024-01-15"},
        {"name": "Kiwi", "price": 24.50, "updated": "2024-01-15"},
        {"name": "Meny", "price": 25.90, "updated": "2024-01-14"}
      ],
      "price_history": [
        {"date": "2024-01-01", "price": 22.90},
        {"date": "2024-01-08", "price": 23.50},
        {"date": "2024-01-15", "price": 23.90}
      ]
    }
  ]
}

### 🛒 Strekkode-Scanner PWA (Vanilla JS)

```markdown
Bygg en Progressive Web App for strekkodeskanning og produktoppslag.

**Teknologi:**
- Vanilla JavaScript (ES6+)
- QuaggaJS for strekkodeskanning
- Service Worker for offline support
- Tailwind via CDN
- Web APIs: Camera, Vibration, Storage

**Funksjonalitet:**
1. Kamera-tilgang for strekkodeskanning
2. Automatisk produktoppslag når strekkode detekteres
3. Viser produktinfo: navn, pris, butikker, bilde
4. Historikk over scannede produkter
5. Offline-støtte med cached data
6. Vibrasjon ved vellykket scan
7. "Legg til handleliste" funksjon
8. PWA manifest for app-installasjon

**Design:**
- Mobile-first design
- Stor scan-knapp i sentrum
- Live kamera-preview
- Toast notifications
- Bottom navigation

**Mock Barcode Data:**
```json
{
  "7038010055955": {
    "name": "Nugatti 400g",
    "brand": "Nudera", 
    "price": 89.90,
    "image": "https://via.placeholder.com/200x200",
    "stores": ["Rema 1000", "Kiwi", "Coop"]
  }
}

### 🤖 AI Matassistent Chatbot (Next.js + OpenAI)

```markdown
Bygg en AI-drevet matassistent som hjelper med handleliste og oppskrifter.

**Stack:**
- Next.js 14 App Router
- OpenAI API integration
- Tailwind CSS + shadcn/ui
- Kassalapp API for produktdata

**Features:**
1. Chat-interface med OpenAI
2. "Hva skal jeg lage til middag?" - foreslår oppskrifter
3. "Lag handleliste for pasta carbonara" - genererer ingrediensliste
4. Kobler OpenAI-forslag til Kassalapp produktsøk
5. Viser priser og butikker for ingredienser
6. "Smart handleliste" - optimaliserer rute mellom butikker
7. Kostnadskalkulator for hele oppskriften
8. Chat-historikk

**OpenAI Prompt Template:**
"Du er en norsk matassistent. Hjelp brukeren med:
- Oppskriftforslag basert på preferanser/ingredienser
- Lag handlelister fra oppskrifter
- Gi matkjedetips og besparelser
Svar på norsk og vær praktisk."

**UI Design:**
- Chat-bubbles layout
- Typing indicator
- Quick-actions: "Foreslå middag", "Lag handleliste", "Finn tilbud"
- Ingredient cards med priser
- Expandable oppskrifter

**Mock integrasjon:**
Lag mock OpenAI responses og Kassalapp data så det fungerer uten API-nøkler.

Lag en grunnleggende Next.js app struktur som utgangspunkt.

Bygg en komplett React Native Expo app for matvareshopping.

**Setup:**
```bash
npx create-expo-app MatApp --template blank-typescript
cd MatApp
npx expo install expo-camera expo-barcode-scanner
npm install axios react-query @react-navigation/native

#### Flutter App

```markdown
Lag en Flutter app for dagligvarehandel med Kassalapp API.

**Dependencies:**
```yaml
dependencies:
  flutter:
    sdk: flutter
  http: ^1.1.0
  provider: ^6.0.5
  sqflite: ^2.3.0
  camera: ^0.10.5
  qr_code_scanner: ^1.0.1
  geolocator: ^10.1.0

// lib/screens/
home_screen.dart        // Featured products
search_screen.dart      // Product search
scan_screen.dart        // Barcode scanner  
shopping_list_screen.dart // User lists
product_detail_screen.dart // Product info
store_map_screen.dart   // Store locations

### 🌐 Web Components & Micro-Frontends

```markdown
Lag et sett med Web Components for Kassalapp-integrasjon som kan brukes i hvilken som helst webbapplikasjon.

**Components å lage:**

1. `<kassal-product-search>`
   - Standalone søkekomponent
   - Custom CSS properties for theming
   - Events: product-selected, search-changed

2. `<kassal-price-comparison>`
   - Sammenligner priser på tvers av butikker
   - Accepts product ID som attribute
   - Viser prishistorikk som mini-chart

3. `<kassal-shopping-list>`
   - Fullstendig handleliste-komponent
   - LocalStorage sync
   - Export til CSV/JSON

4. `<kassal-barcode-scanner>`
   - Integrert kamera-scanner
   - Fallback til input-felt
   - Auto-lookup produkter

**Technical Requirements:**
- Vanilla JavaScript (no frameworks)
- Shadow DOM for style encapsulation
- Custom Elements v1 API
- Responsive design
- TypeScript definitions
- npm package ready

**Usage Example:**
```html
<kassal-product-search 
  api-key="your-key" 
  theme="dark"
  placeholder="Søk etter produkter..."
></kassal-product-search>

<kassal-shopping-list 
  api-key="your-key"
  auto-save="true"
></kassal-shopping-list>

src/
├── components/
│   ├── product-search.ts
│   ├── price-comparison.ts
│   ├── shopping-list.ts
│   └── barcode-scanner.ts
├── styles/
│   └── themes.css
├── types/
│   └── kassal-types.d.ts
└── index.ts

### 🎯 Real-World Integration Examples

#### E-commerce Product Comparison Plugin

```markdown
Lag en Shopify/WooCommerce plugin som sammenligner produktpriser med Kassalapp.

**Shopify App (Node.js + React):**

**Functionality:**
1. Merchant kobler sine produkter til Kassalapp
2. Automatisk prissammenligning på produktsider
3. "Finn billigere" widget på checkout
4. Price matching alerts til kunder
5. Konkurrent-analyse dashboard

**Technical Stack:**
- Node.js + Express backend
- React frontend med Polaris
- Shopify GraphQL API
- Kassalapp REST API
- MongoDB for mapping
- Webhook handling

**Key Files:**
```javascript
// server.js - Main Shopify app server
// components/PriceComparison.jsx - React widget
// services/KassalappService.js - API integration
// models/ProductMapping.js - Database model
// webhooks/product-update.js - Shopify webhook

## Claude Code & Cursor Workflow

### 🚀 Mega One-Shot Prompts for Full Applications

#### Complete E-commerce Site Generator

```markdown
Lag en basis e-commerce nettside med Kassalapp API-integrasjon.

**Tech Stack:**
- Next.js 14 App Router + TypeScript
- Tailwind CSS + shadcn/ui
- Prisma + SQLite database
- NextAuth.js authentication
- Stripe payment integration
- Kassalapp API for produktdata

**Site Structure:**

**Database Schema (Prisma):**
```prisma
model User {
  id           String @id @default(cuid())
  email        String @unique
  name         String?
  shoppingLists ShoppingList[]
  priceAlerts  PriceAlert[]
}

model Product {
  id           String @id
  name         String
  description  String?
  category     String
  brand        String?
  image        String?
  kassalappId  String @unique
  createdAt    DateTime @default(now())
}

model ShoppingList {
  id        String @id @default(cuid())
  name      String
  userId    String
  user      User @relation(fields: [userId], references: [id])
  items     ShoppingListItem[]
}

// lib/kassalapp.ts
export type SearchParams = Record<string, any>;
export type ProductResponse = any;
export type Product = any;
export type Coordinates = { lat: number; lng: number };
export type Store = any;

export interface IKassalappClient {
  searchProducts(query: SearchParams): Promise<ProductResponse>;
  getProduct(id: string): Promise<Product>;
  getStores(location?: Coordinates): Promise<Store[]>;
}

export class KassalappClient implements IKassalappClient {
  private apiKey: string;
  private baseUrl = 'https://kassal.app/api/v1';

  constructor(apiKey: string) {
    this.apiKey = apiKey;
  }

  async searchProducts(query: SearchParams): Promise<ProductResponse> {
    throw new Error('Not implemented in docs snippet');
  }

  async getProduct(id: string): Promise<Product> {
    throw new Error('Not implemented in docs snippet');
  }

  async getStores(location?: Coordinates): Promise<Store[]> {
    throw new Error('Not implemented in docs snippet');
  }
}

### 🎨 Advanced ChatGPT Canvas Prompts

#### Interactive Price Dashboard

```markdown
Lag et interaktivt prissammenligning dashboard som kan kjøres direkt i ChatGPT Canvas.

**Teknisk Stack:**
- HTML + CSS + Vanilla JavaScript
- Chart.js via CDN for grafer
- Tailwind CSS via CDN
- Mock Kassalapp API data

**Dashboard Features:**
1. **Header Section:**
   - Logo og tittel
   - Søkefelt med autocomplete
   - Filter dropdown (Kategori, Butikk)
   - Date range picker

2. **Main Content:**
   - Product cards grid (3 kolonner)
   - Price comparison table
   - Price history charts (Line + Bar)
   - "Best deals" sidebar

3. **Interactive Elements:**
   - Sortable columns i price table
   - Hoverable chart points med tooltips
   - Expandable product details
   - Add to comparison functionality

4. **Data Visualization:**
   - Line chart: Prishistorikk over tid
   - Bar chart: Sammenlign priser mellom butikker
   - Pie chart: Markedsandel per butikk
   - Donut chart: Kategoridistribusjon

**Mock Data Structure:**
```javascript
const mockData = {
  products: [
    {
      id: 1,
      name: "Melk 1L Tine",
      category: "Meieriprodukter",
      brand: "Tine",
      image: "https://via.placeholder.com/150x150",
      stores: [
        { name: "Rema 1000", price: 23.90, change: -0.50, updated: "2024-01-15" },
        { name: "Kiwi", price: 24.50, change: +0.20, updated: "2024-01-15" },
        { name: "Meny", price: 25.90, change: 0, updated: "2024-01-14" }
      ],
      priceHistory: [
        { date: "2024-01-01", price: 22.90 },
        { date: "2024-01-08", price: 23.50 },
        { date: "2024-01-15", price: 23.90 }
      ]
    }
  ]
}

#### Modern Shopping Cart Widget

```markdown
Bygg en moderne shopping cart widget som fungerer som embedded component.

**Design Specs:**
- Floating cart icon (bottom-right)
- Slide-out cart panel
- Modern glassmorphism design
- Smooth animations
- Mobile-responsive

**Features:**
1. **Cart Icon:**
   - Product count badge
   - Bounce animation på add
   - Price total preview

2. **Cart Panel:**
   - Product list med images
   - Quantity adjusters (+/- buttons)
   - Remove item functionality
   - Total price calculation
   - Estimated savings display
   - "Best store route" suggestion

3. **Product Items:**
   - Product image og navn
   - Current beste pris
   - Store availability
   - Last updated timestamp
   - Price trend indicator

4. **Smart Features:**
   - Auto-save til localStorage
   - Offline support
   - Price alerts for items
   - Store optimization
   - Share cart functionality

**Mock Products:**
```javascript
const cartItems = [
  {
    id: 1,
    name: "Melk 1L Tine",
    quantity: 2,
    bestPrice: 23.90,
    bestStore: "Rema 1000",
    image: "https://via.placeholder.com/80x80",
    trend: "down", // up, down, stable
    savings: 1.20
  }
]

## Avanserte Prompt-Teknikker

### 🧠 Chain-of-Thought Prompting

```markdown
**Prompt Template for Complex Applications:**

"Jeg vil bygge en [type applikasjon] som [hovedformål].

**Steg 1: Analyse**
Først, analyser kravene og foreslå:
- Optimal teknisk arkitektur
- Database design
- API struktur
- UI/UX approach

**Steg 2: Planning**
Basert på analysen, lag en detaljert plan med:
- Development milestones
- File structure
- Component hierarchy
- Data flow

**Steg 3: Implementation**
Implementer løsningen med:
- Full kodebase
- Error handling
- Loading states
- Responsive design

**Steg 4: Testing**
Legg til:
- Unit tests for kritisk logic
- Integration tests
- Mock data for utvikling
- Performance optimizations

Start med Steg 1 og vent på godkjenning før du fortsetter."

**Round 1 - MVP:**
"Lag en minimal versjon av [app] med kun kjernefeatures:
- [Feature 1]
- [Feature 2]
- Basic styling
- Mock data"

**Round 2 - Enhanced:**
"Bygge på MVP-en, legg til:
- Real API integration
- Better error handling
- Loading states
- Responsive design"

**Round 3 - Production:**
"Gjør appen production-ready:
- Performance optimizations
- Accessibility improvements
- SEO setup
- Deployment configuration"

**Med API Dokumentasjon:**
"Her er Kassalapp API dokumentasjon:
[Lim inn fra https://kassal.app/api/guides/[guide].md]

Basert på denne dokumentasjonen, bygg en [specific application]..."

**Med Eksisterende Kode:**
"Jeg har allerede denne kodebasen:
[Lim inn relevant kode]

Utvid den til å inkludere [new functionality]..."

**Med Design Specs:**
"Følg denne design-guiden:
- Colors: [palette]
- Typography: [fonts]
- Components: [style guide]

Bygg en [application] som følger disse guidelines..."

Build a complete shopping list app that uses Kassalapp API.

Tech stack:
- React 18 with hooks
- Tailwind CSS for styling
- Axios for API calls
- LocalStorage persistence

API Info:
- Base URL: https://kassal.app/api/v1/
- Auth: Bearer token in Authorization header
- Rate limit: 60 requests/min (free tier)
- Endpoints:
  - GET /products?search={query}
  - GET /products/id/{id}
  - GET /products/ean/{ean}
  - GET /physical-stores
  - GET /categories

Features:
1) Search with autocomplete
2) Product cards showing name, price, and stores
3) "Add to shopping list" per product
4) Sidebar list with total price, estimated savings (cheapest store), remove items, clear list
5) Responsive, loading/error states
6) Persist list in localStorage

Output: Start with a single App.jsx file using Tailwind classNames. Consider including mock API responses for testing without an API key.

Create a price comparison dashboard that visualizes price trends over time.

Tech:
- Vue 3 Composition API
- Chart.js
- Tailwind CSS
- Axios

Include:
- Typeahead product search
- Compare prices across stores
- Line chart price history
- "Best deals right now" list
- Store filters (checkbox)
- Export CSV
- Responsive design

Output: Begin with a single-file Vue component. Include mock data for testing without API key.

Build a PWA for barcode scanning and product lookup.

Tech:
- Vanilla JavaScript (ES6+)
- QuaggaJS for barcode scanning
- Service Worker for offline
- Tailwind via CDN
- Web APIs: Camera, Vibration, Storage

Include:
- Camera access + live preview
- Auto lookup on detection
- Product info: name, price, stores, image
- Scan history
- Offline cache with mock data
- Vibrate on successful scan
- PWA manifest

Output: Create an HTML file prototype with inline CSS/JS. Consider adding service worker and manifest for offline testing with mock data.

Build an AI food assistant that helps with recipes and shopping lists.

Stack:
- Next.js 14 App Router + TypeScript
- OpenAI API integration
- Tailwind + shadcn/ui
- Kassalapp API for product data

Features:
1) Chat UI with OpenAI
2) "What should I make for dinner?" recipe suggestions
3) "Create a shopping list for pasta carbonara" -> ingredient list
4) Link OpenAI suggestions to Kassalapp product search
5) Prices and stores for ingredients
6) "Smart list" optimizing route between stores
7) Cost calculator per recipe
8) Chat history

Output: Basic Next.js structure with mock responses for testing without API keys.

Generate a React Native Expo app for grocery shopping.

Setup commands:
- npx create-expo-app MatApp --template blank-typescript
- npx expo install expo-camera expo-barcode-scanner
- npm install axios @tanstack/react-query @react-navigation/native

Screens:
- Search, Scan, ShoppingList, Profile (tab navigation)
- Product search (infinite scroll)
- Barcode scanning
- Swipe-to-delete list
- Push notifications for deals (mock)
- Offline with AsyncStorage
- Geolocation for nearby stores

Output: Core files structure (App.tsx, screens/, components/, etc.) with mock data for testing.

Create a Flutter app for groceries integrated with Kassalapp API.

Dependencies:
- http, provider, sqflite, camera, qr_code_scanner, geolocator

Features:
- Material 3 UI, 4 tabs bottom nav
- Autocomplete product search
- QR/Barcode scanner
- Local DB shopping list
- Store locator (maps)
- Price comparison views
- Dark/light theme toggle

Architecture: Provider + Repository pattern + SQLite. Output a full project structure with models/services/db helpers and mock data so it runs without API access.

Build a set of Kassalapp-integrated Web Components usable anywhere.

Components:
- <kassal-product-search> (events: product-selected, search-changed)
- <kassal-price-comparison> (accepts product-id)
- <kassal-shopping-list> (LocalStorage sync, export CSV/JSON)
- <kassal-barcode-scanner>

Requirements:
- Vanilla JS, Shadow DOM, Custom Elements v1, responsive
- TypeScript definitions
- npm package with build setup, README, example HTML

Output: Basic package structure (src/components/*.ts, styles, types, index.ts) as a starting point.

Create:
- Shopify app (Node + React) that maps merchant products to Kassalapp and shows comparison widgets
- WooCommerce plugin (PHP) with admin settings, shortcodes, AJAX price loading, caching

Deliverables:
- Complete codebases, install docs, deployment guides, and a KassalappService abstraction.

Create a foundational Next.js 14 + TypeScript site with Kassalapp integration.

Include:
- Prisma + SQLite, NextAuth, Stripe
- Pages: /, /products, /product/[id], /shopping-list, /compare, /stores, /account, /admin
- Typed Kassalapp client (lib/kassalapp.ts)
- Mock mode when no API key present

Output: Core files structure (pages, components, api, etc.) with Tailwind and shadcn/ui as starting points.

Create a price comparison dashboard prototype in a single HTML file with inline CSS/JS, Tailwind + Chart.js via CDN, and mock data. Consider adding sorting, filtering, and export features.

Build a modern, floating shopping cart widget (glassmorphism, responsive) with slide-out panel, quantity controls, total price, estimated savings, store optimization hints, localStorage, offline support, and shareable state. Single HTML file, inline CSS/JS.

Chain-of-Thought (structured):
"I want to build a [application] that [primary goal].
Step 1: Analyze requirements (architecture, DB, API, UI/UX).
Step 2: Plan (milestones, file structure, components, data flow).
Step 3: Implement (full codebase, errors, loading, responsive).
Step 4: Test (unit, integration, mock data, performance). Start with Step 1 and wait for approval."

Iterative Development:
Round 1 (MVP): "Implement only core features: [F1], [F2], basic styling, mock data."
Round 2 (Enhanced): "Add real API integration, robust errors, loading states, responsive."
Round 3 (Production): "Optimize performance, accessibility, SEO, deployment config."

Context-Aware:
With API Docs: "Using Kassalapp API docs at https://kassal.app/api/guides/[guide].md, build a [specific app] that [details]."
With Existing Code: "Given this codebase: [paste], extend it to include [new feature] with tests."
With Design Specs: "Follow: colors [palette], typography [fonts], components [style guide]; build a compliant [app]."