frontend-development

## Frontend Development

Frontend built with modern tooling and seamlessly integrated with Nette backend through Nette Assets.

For complete Nette Assets reference, see [assets.md](assets.md).
For Vite integration details, see [vite.md](vite.md).

### Technology Stack

- **Build system:** Vite with TypeScript support
- **JavaScript:** ES Modules (ESM) with `"type": "module"` in package.json
- **Styling:** SCSS with modular component architecture
- **Asset integration:** Nette Assets for PHP-frontend bridge
- **Admin framework:** Bootstrap for rapid interface development
- **Code quality:** ESLint with @nette/eslint-plugin
- **Forms:** Nette Forms with progressive enhancement

## Asset Architecture Strategy

**Source vs Built Assets separation:**
- **Development assets:** `assets/` directory with source files (SCSS, TypeScript, images)
- **Production assets:** `www/assets/` with optimized, versioned files for browsers

### Coding Standards

- Use single quotes for strings unless containing apostrophes (CSS, SCSS, JavaScript)


### Entry Point Decision Matrix

**Use separate entry points when:**
- Different user contexts with distinct dependencies (frontend vs admin)
- Bundle size optimization is critical

**Example strategy:**
```javascript
// assets/front.js - Public website (custom design)
import './css/front.scss';
import './js/components/product-gallery.js';

// assets/admin.js - Administration (Bootstrap-based)
import 'bootstrap/dist/css/bootstrap.css';
import './css/admin.scss';
```

### Organization Patterns

**File-per-component approach:**
```
assets/js/
├── components/
│   ├── product-form.js     ← Reusable form component
│   ├── image-gallery.js    ← Product image viewer
├── pages/
│   ├── blog.css            ← Page-specific enhancements
│   └── checkout.css        ← Multi-step checkout flow
└── utils/
	├── ajax.js            ← AJAX utilities
	└── validation.js      ← Form validation helpers
```

### Nette Assets Integration Patterns

**Basic asset loading