# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Development Environment

This project uses **Nix Flakes** for development environment management:
- Run `nix develop` to enter the development shell with Node.js v22 and git
- The flake.nix configures a reproducible development environment

## Project Structure

This is a **frontend web development educational project** with two main areas:

### 1. Pensum (Curriculum Modules)
Five learning modules in `/pensum/` directory, each focusing on different aspects of frontend development:
- `Framworkless/` - Vanilla JavaScript/HTML/CSS implementations
- `HTML-CSS/` - Web fundamentals and styling
- `Functional Programming/` - Programming paradigm concepts  
- `Typescript/` - Type-safe JavaScript development
- `Vue/` - Vue.js framework implementations

### 2. Webshop Application (`/webshop_app/`)
The main practical project implementing a progressive web store:
- **PRD Location**: `webshop_app/prd.md` contains complete requirements and implementation phases
- **Current Phase**: MVC implementation in `webshop_app/mvc-emne2/`
- **Architecture**: Designed for progressive complexity - starting with plain JS/HTML/CSS MVC, then enhanced with TypeScript, Vue.js, and advanced features

## Key Implementation Details

### MVC Architecture (Current Phase)
- **Model**: Handle data (products, cart) using local storage/JSON
- **View**: HTML templates and DOM manipulation
- **Controller**: Business logic and user interaction handling
- **Requirements**: Pure JavaScript (ES6+), HTML5, CSS3, no external frameworks

### Progressive Enhancement Strategy
The webshop will be rewritten multiple times during the course:
1. **Phase 1**: Plain JS/HTML/CSS with MVC pattern
2. **Phase 2**: Enhanced with modern JavaScript features
3. **Phase 3**: TypeScript implementation  
4. **Phase 4**: Vue.js implementation
5. **Phase 5**: Advanced features (auth, payment, etc.)

## Core Application Features
- Product listing page with basic product information
- Product detail page with purchase functionality
- Basic navigation and routing
- Shopping cart functionality (localStorage-based)
- Responsive design for desktop and mobile

## Data Structure
- **Products**: id, name, price, description, image, category
- **Cart**: product references and quantities
- **Storage**: localStorage for client-side persistence

## Development Notes
- No package.json files exist yet - modules are currently empty placeholders
- Entry point for webshop MVC implementation: `webshop_app/mvc-emne2/index.html`
- Educational focus: demonstrating core web development concepts through practical implementation