Luca Sacchi Ricciardi
976dd95dc8
feat: add Docker development environment for frontend
...
Create containerized development setup for safe and consistent frontend development:
Docker Configuration:
- docker-compose.yml: Root-level orchestration with frontend service
- frontend/Dockerfile.dev: Node.js 20 Alpine optimized for dev
- Volume mounts for Hot Module Replacement (HMR)
- Named volume for node_modules to avoid conflicts
- Health check to verify service availability
- Environment variables for file watching (CHOKIDAR_USEPOLLING)
Vite Configuration Update:
- vite.config.ts: Add server config for Docker compatibility
- host: '0.0.0.0' to accept external connections
- usePolling: true for file watching in container
- port: 5173 explicitly configured
Documentation:
- README.md: Add Docker development procedure section
- Document docker compose up -d workflow
- Explain HMR and hot-reload capabilities
- List advantages of Docker-based development
Usage:
docker compose up -d # Start development server
docker compose logs -f # View logs
docker compose down # Stop container
Access: http://localhost:5173
Safety First:
- Isolated environment prevents system conflicts
- Reproducible setup across different machines
- No host Node.js installation required
- Easy team onboarding
Refs: Docker best practices for Node.js development
2026-04-03 14:47:36 +02:00
Luca Sacchi Ricciardi
84338ea861
feat: add ProblemSolution and HowItWorks sections with accessible animations
...
Create two new landing page sections following Day 3 objectives:
ProblemSolution.tsx:
- Before/After comparison layout (2-column grid)
- Terminal simulation showing cryptic PostgreSQL logs
- Telegram message simulation with clear solution
- Pain points vs benefits comparison lists
- Arrow connector between problem and solution
- Final CTA button
HowItWorks.tsx:
- 3-step card layout (Monitor, Analyze, Notify)
- StepCard sub-component with icons from Lucide React
- Server, Brain, MessageSquare icons for each step
- Detailed bullet points for each step
- Connector lines between cards (desktop)
- CSS fade-up animations with stagger effect
- Final CTA box with button
Accessibility Features:
- Respects prefers-reduced-motion media query
- Disables all animations if user prefers reduced motion
- Proper focus rings on interactive elements
- Aria-labels and aria-hidden on decorative icons
- Semantic HTML structure
Animation Implementation:
- Pure CSS animations (no Framer Motion - parsimony)
- @keyframes fadeUp: 600ms ease-out
- Stagger delays: 0.1s, 0.2s, 0.3s between cards
- Smooth hover transitions on cards
- Transform scale on icon hover
Responsive Design:
- Mobile: single column layout
- Tablet: 2-column grid
- Desktop: 3-column grid with connector lines
- Adaptive spacing and font sizes
Integration:
- Added exports to components/index.ts
- Integrated into App.tsx below Hero section
- Consistent styling with existing components
Build Verification:
- TypeScript compilation: ✓ 0 errors
- Vite build: ✓ Success
- Bundle size: 208KB (65KB gzipped)
- All components render correctly
Icons Installed:
- lucide-react for consistent iconography
- Terminal, AlertCircle, CheckCircle, ArrowRight
- Server, Brain, MessageSquare
Refs: .opencode/skills/ui-ux-master (animation best practices)
2026-04-03 14:42:02 +02:00
Luca Sacchi Ricciardi
a22e4bf7b5
feat: add Navbar and Hero components with Tailwind styling
...
Create landing page structure following 'Little Often' principle:
Components Created:
- Navbar.tsx: Logo + CTA button with sticky positioning
- Hero.tsx: Headline, sub-headline, dual CTAs, trust indicators, stats
- components/index.ts: Centralized exports
Design Features:
- Mobile-first responsive design (sm:, lg: breakpoints)
- WCAG AA compliant contrast ratios (4.5:1+)
- Accessible focus rings and aria-labels
- Modern color palette (indigo primary, slate neutrals)
- Smooth gradients and shadows
Layout Structure:
frontend/src/
├── components/
│ ├── layout/
│ │ └── Navbar.tsx
│ ├── sections/
│ │ └── Hero.tsx
│ └── index.ts
├── App.tsx: Clean integration of Navbar + Hero
Fixes Applied:
- Install @tailwindcss/postcss for Tailwind v4 compatibility
- Update postcss.config.js with new plugin
- Remove @tailwind directives from index.css (v4 style)
Build Verification:
✅ TypeScript compilation successful
✅ Tailwind CSS processing successful
✅ Production build completed (dist/ folder)
Content:
- Headline: 'Il DevOps tascabile che traduce i crash...'
- Sub-headline: Explains monitoring + AI + Telegram flow
- Primary CTA: 'Ottieni il tuo Webhook URL'
- Secondary CTA: 'Guarda la Demo'
- Stats: <5s response, 300+ models, €0.15/month
Refs: docs/frontend_landing_plan.md, .opencode/skills/frontend-ui-ux/
2026-04-03 14:26:16 +02:00
Luca Sacchi Ricciardi
c7b86de3fb
feat: setup React + Vite + TypeScript frontend with Tailwind CSS
...
Initialize frontend infrastructure for Sprint 3 Landing Page:
Infrastructure Setup:
- Create React + Vite + TypeScript project in frontend/ directory
- Install Tailwind CSS, PostCSS, Autoprefixer dependencies
- Generate tailwind.config.js with content paths
- Generate postcss.config.js with plugins configuration
- Add Tailwind directives (@tailwind base/components/utilities) to src/index.css
- Update root .gitignore to exclude frontend/node_modules and build artifacts
Documentation Updates:
- Add CHANGELOG.md entry for Sprint 3 Landing Page development start
- Update README.md with frontend development instructions
- Add Node.js and npm prerequisites
- Document npm commands: install, dev, build, preview
Project Structure:
├── frontend/
│ ├── src/
│ │ ├── App.tsx
│ │ ├── main.tsx
│ │ ├── index.css (with Tailwind)
│ │ └── assets/
│ ├── index.html
│ ├── package.json
│ ├── tailwind.config.js
│ ├── postcss.config.js
│ └── vite.config.ts
Safety First:
- Verified directory doesn't exist before creation
- Checked all configuration files are valid
- Excluded node_modules from git
- No project code modified, only new frontend directory added
Refs: docs/frontend_landing_plan.md
Next: Start developing landing page components
2026-04-03 13:20:48 +02:00
