Do Siki
d1213f9b3f
- Add comprehensive design system with CSS variables, animations, and utility classes - Implement dark mode with ThemeProvider (system preference + manual toggle) - Create JSON-based content management system in src/content/ - Update all pages to use structured JSON content - Add ThemeProvider component with theme toggle button - Update Header with glass effect and animated mobile menu - Update Footer with dark mode support - Update documentation (README.md, CLAUDE.md, knowledge.md, proto/README.md) - Sync with Linear (ZEE-29 completed)
132 lines
4.7 KiB
Markdown
132 lines
4.7 KiB
Markdown
# mozdIT Bt. Website Development
|
|
|
|
[](https://github.com/your-username/websitedev/actions/workflows/ci.yml)
|
|
[](./docker-compose.dev.yml)
|
|
[](https://linear.app/zeener)
|
|
[](https://mozdit.hu)
|
|
|
|
Modern Next.js 14 website for mozdIT Bt. - Hungarian IT services company specializing in web hosting, email services, and DNS administration.
|
|
|
|
## 🚀 Quick Start
|
|
|
|
```bash
|
|
# Development server
|
|
cd proto && npm run dev
|
|
|
|
# Docker development environment
|
|
docker-compose -f docker-compose.dev.yml up -d
|
|
|
|
# Run tests
|
|
cd proto && npm run test:all
|
|
```
|
|
|
|
## 🔄 Dual Sync Architecture
|
|
|
|
This project uses **separated sync systems** for optimal management:
|
|
|
|
### 🧪 **Linear Sync (Test Management)**
|
|
- **Requirements**: [ZEE-47: Contact Form Validation](https://linear.app/zeener/issue/ZEE-47)
|
|
- **Test Cases**: [ZEE-48: Email Validation](https://linear.app/zeener/issue/ZEE-48), [ZEE-49: Rate Limiting](https://linear.app/zeener/issue/ZEE-49)
|
|
- **Test Execution**: Automatic sync with Linear issues
|
|
- **Traceability**: Requirements → Test Cases → Automated Tests
|
|
|
|
### 🐙 **GitHub Sync (CI/CD)**
|
|
- **Code Versioning**: Git-based source control
|
|
- **CI/CD Pipeline**: Automated testing and deployment
|
|
- **Docker Integration**: Container build and registry
|
|
- **Deployment**: Staging and production via Dokploy
|
|
|
|
### 🧪 Test Types
|
|
- **Unit Tests**: Component and logic testing
|
|
- **Browser Integration**: jsdom + mocked APIs
|
|
- **Docker Integration**: Real HTTP calls to services
|
|
- **E2E Tests**: Complete user workflows
|
|
|
|
## 🛠️ Tech Stack
|
|
|
|
- **Frontend**: Next.js 14, TypeScript, Tailwind CSS 4
|
|
- **Design System**: CSS Variables, Dark Mode, Custom Animations
|
|
- **Content Management**: JSON-based structured content
|
|
- **Backend**: Next.js API Routes, MongoDB
|
|
- **Testing**: Jest, React Testing Library, Docker
|
|
- **Deployment**: Dokploy, Docker
|
|
- **Monitoring**: Winston, Loki, Grafana
|
|
- **Project Management**: Linear, GitHub Issues
|
|
|
|
## 📈 Current Status
|
|
|
|
|
|
|
|
|
|
|
|
### ✅ Completed Features
|
|
- [x] Responsive website with modern design
|
|
- [x] **Design System** with CSS variables, animations, and micro-interactions
|
|
- [x] **Dark Mode** with system preference detection and manual toggle
|
|
- [x] **JSON Content Management** - Structured, easily modifiable content system
|
|
- [x] Contact form with validation & spam protection
|
|
- [x] Rate limiting and security features
|
|
- [x] Docker development environment
|
|
- [x] Comprehensive test suite
|
|
- [x] CI/CD pipeline with Linear integration
|
|
- [x] Requirements traceability system
|
|
|
|
### 🚧 In Progress
|
|
- [ ] Performance optimization (ZEE-44)
|
|
- [ ] SEO enhancements
|
|
- [ ] Analytics integration
|
|
|
|
## 🔗 Links
|
|
|
|
- **Production**: https://mozdit.hu
|
|
- **Staging**: https://staging.mozdit.hu
|
|
- **Linear Project**: https://linear.app/zeener
|
|
- **Docker Registry**: ghcr.io/your-username/websitedev
|
|
|
|
## 📚 Documentation
|
|
|
|
### **Sync Systems:**
|
|
- [Linear Sync Guide](./LINEAR-SYNC-GUIDE.md) - Test management with Linear
|
|
- [GitHub CI/CD Guide](./GITHUB-CICD-GUIDE.md) - Code & deployment pipeline
|
|
- [Sync Status Analysis](./SYNC-STATUS-ANALYSIS.md) - Current state overview
|
|
|
|
### **Development:**
|
|
- [Test Management Strategy](./TEST-MANAGEMENT.md)
|
|
- [Traceability Matrix](./TRACEABILITY-MATRIX.md)
|
|
- [Docker Setup](./DOCKER.md)
|
|
- [Development Guide](./proto/README.md)
|
|
|
|
## 🎨 Design System
|
|
|
|
The project uses a comprehensive design system with:
|
|
|
|
- **CSS Variables**: Brand colors, spacing, shadows, transitions
|
|
- **Dark Mode**: Automatic system preference + manual toggle via ThemeProvider
|
|
- **Animations**: fadeIn, float, pulse, hover effects (lift, scale, glow)
|
|
- **Components**: Buttons, cards, icons with consistent styling
|
|
|
|
## 📝 Content Management
|
|
|
|
All website text content is managed through JSON files:
|
|
|
|
```
|
|
proto/src/content/
|
|
├── types.ts # TypeScript definitions
|
|
├── index.ts # Content loader utility
|
|
├── common.json # Shared texts (buttons, labels)
|
|
└── pages/
|
|
├── home.json # Homepage content
|
|
├── about.json # About page content
|
|
├── services.json # Services page content
|
|
└── contact.json # Contact page content
|
|
```
|
|
|
|
**Usage:**
|
|
```typescript
|
|
import { content, getPageContent } from '@/content'
|
|
|
|
// Access content
|
|
const aboutContent = content.pages.about
|
|
const servicesContent = getPageContent('services')
|
|
```
|