Do SikiandClaude Sonnet 5
1600d99c5d
Alapinstalláció a Payload CMS-re való áttéréshez (EPIC MITHOME-85): - payload@3.88.0, @payloadcms/next, @payloadcms/db-mongodb, @payloadcms/richtext-lexical, graphql, sharp telepítve - src/payload.config.ts: mongooseAdapter a meglévő MONGODB_URI-ra (ugyanaz az adatbázis, mint a Mongoose/mongodb rétegnek), lexical editor, PAYLOAD_SECRET env-ből - src/collections/Users.ts: minimális auth collection — Payload nem tud admin felületet renderelni auth collection nélkül. Ez csak a bootstraphez kell; a valódi access control/jelszó-politika MITHOME-90 feladata. - App Router route group (src/app/(payload)/): admin UI ([[...segments]]), REST (api/[...slug]), GraphQL + playground route-ok, root layout — a szokásos Payload v3 Next.js integrációs minta szerint - next.config.ts: withPayload() wrapper a route handler bundling-hoz - tsconfig.json: @payload-config path alias -> src/payload.config.ts (ez oldja fel a webpack/turbopack importot is, nem csak a type-checket) - PAYLOAD_SECRET env var: generált dev érték a .env.local-ban (gitignore-olt), changeme placeholder + generálási megjegyzés a staging/production .env példafájlokban, dokumentálva a CLAUDE.md env-lista részében Ismert, még nem javított biztonsági advisory a felvett payload@3.88.0-ban (GHSA-jg8r-5jh2-v2xj, moderate, CWE-307: az admin account-unlock alapból más fiókok lockoutját is felold hitelesített usernek) — nincs újabb patch-elt verzió jelenleg, nyomon követve MITHOME-90 alatt. Ellenőrizve ezen a commiton: npm run build, npm run lint, tsc --noEmit, npm test (58 passed) — mind zöld. Az admin bejelentkezés/DB-kapcsolat élő tesztje MongoDB-t igényel (jelen környezetben Docker daemon nem fut, ez lokálisan `docker compose -f docker-compose.dev.yml up -d mongodb` után `npm run dev` + http://localhost:3000/admin-mal ellenőrizhető). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
mozdIT Bt. Website - Next.js Application
Modern Next.js 15 website for mozdIT Bt. - Hungarian IT services company.
🚀 Quick Start
# Install dependencies
npm install
# Development server (with Turbopack)
npm run dev
# Production build
npm run build
# Run tests
npm test
Open http://localhost:3000 to view the site.
📁 Project Structure
src/
├── app/ # Next.js App Router
│ ├── page.tsx # Homepage
│ ├── rolunk/ # About page
│ ├── szolgaltatasok/ # Services page
│ ├── kapcsolat/ # Contact page
│ ├── api/ # API routes
│ └── globals.css # Design system & styles
├── components/ # React components
│ ├── Header.tsx # Navigation header
│ ├── Footer.tsx # Site footer
│ └── ThemeProvider.tsx # Dark mode provider
├── content/ # JSON content management
│ ├── types.ts # Content type definitions
│ ├── index.ts # Content loader
│ ├── common.json # Shared texts
│ └── pages/ # Page-specific content
├── config/ # Site configuration
├── lib/ # Utilities
└── types/ # TypeScript definitions
🎨 Design System
The project uses a comprehensive design system defined in globals.css:
CSS Variables
- Brand colors (
--color-primary-*) - Semantic colors (
--color-background,--color-foreground) - Shadows, transitions, border radius
Dark Mode
- Automatic system preference detection
- Manual toggle via ThemeProvider
- Uses
data-theme="dark"attribute
Animations
animate-fade-in-up- Fade in with upward motionanimate-float- Floating effectanimate-pulse-slow- Slow pulsinghover-lift,hover-scale,hover-glow- Hover effects
Utility Classes
.card- Card component styling.btn,.btn-primary,.btn-secondary- Button styles.icon-container- Icon wrapper styling
📝 Content Management
All page content is managed through JSON files in src/content/:
import { content, getPageContent } from '@/content'
// Access specific page content
const aboutContent = content.pages.about
// Or use the helper function
const servicesContent = getPageContent('services')
Content Files
| File | Description |
|---|---|
common.json |
Shared texts (buttons, labels, validation) |
pages/home.json |
Homepage CTA section |
pages/about.json |
About page (hero, story, mission, team, CTA) |
pages/services.json |
Services (hero, details, support, CTA) |
pages/contact.json |
Contact (form labels, FAQ, info) |
🧪 Testing
# Unit tests
npm test
# Watch mode
npm run test:watch
# Coverage report
npm run test:coverage
# All test suites
npm run test:all
🐳 Docker Development
For full-stack development with MongoDB and monitoring:
# From project root
docker-compose -f docker-compose.dev.yml up -d
Services:
- Website: http://localhost:3000
- MongoDB UI: http://localhost:8081
- Grafana: http://localhost:3001