get-frontend/CLAUDE.md

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