mozdIT Bt. Website Development

Modern Next.js 14 website for mozdIT Bt. - Hungarian IT services company specializing in web hosting, email services, and DNS administration.

🚀 Quick Start

# 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:

📊 Plane Sync (Task Management)

• Project: MITHOME — mozdIT website dev (workspace: developments)
• TODO.md: Local mirror, Plane is the authoritative source
• Sync: node plane-sync.js (one-way Plane → TODO.md)
• Status Mapping: completed → ✅, started → 🔄, unstarted → ⏳, backlog → 📋

🐙 GitHub Sync (CI/CD)

• Code Versioning: Git-based source control
• CI/CD Pipeline: Automated testing and deployment
• Docker Integration: Container build and registry
• Deployment: Docker Compose (deploy.sh)

🧪 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: Docker Compose (deploy.sh), native
• Monitoring: Winston, Loki, Grafana
• Project Management: Plane, GitHub Issues

📈 Current Status

✅ Completed Features

• Responsive website with modern design
• Design System with CSS variables, animations, and micro-interactions
• Dark Mode with system preference detection and manual toggle
• JSON Content Management - Structured, easily modifiable content system
• Contact form with validation & spam protection
• Rate limiting and security features
• Docker development environment
• Comprehensive test suite
• CI/CD pipeline with Plane sync integration
• Requirements traceability system

🚧 In Progress

• Performance optimization (ZEE-44)
• SEO enhancements
• Analytics integration

🔗 Links

• Production: https://mozdit.hu
• Staging: https://staging.mozdit.hu
• Plane Project: https://pm.llmdev.mozdit.hu (workspace: developments, project: MITHOME)
• Docker Registry: ghcr.io/your-username/websitedev

📚 Documentation

Sync Systems:

• Plane Sync Guide - Task management with Plane
• GitHub CI/CD Guide - Code & deployment pipeline
• Sync Status Analysis - Current state overview

Development:

• Test Management Strategy
• Traceability Matrix
• Docker Setup
• Development Guide

🎨 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:

import { content, getPageContent } from '@/content'

// Access content
const aboutContent = content.pages.about
const servicesContent = getPageContent('services')