60 lines
No EOL
2.6 KiB
Markdown
60 lines
No EOL
2.6 KiB
Markdown
# 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 |