Logify360 Website

A modern, production-ready website built with Next.js 16, React 19, TypeScript, and Tailwind CSS 4.

Requirements

• Node.js >= 20.9.0
• PNPM >= 8.0.0

Quick Start

# Install dependencies
pnpm install
# Set up environment variables
cp .env.example .env.development
# Start development server
pnpm dev
# Build for production
pnpm build

Tech Stack

• Framework: Next.js 16 (App Router)
• UI: React 19, TypeScript 5.9
• Styling: Tailwind CSS 4
• Animations: Framer Motion
• Testing: Cypress (E2E & Component)
• Deployment: Docker, GitHub Actions

Project Structure

├── app/ # Next.js App Router pages
├── components/ # React components
├── content/ # Content data files
├── lib/ # Utilities and helpers
├── public/ # Static assets
└── scripts/ # Build scripts

Features

• ⚡️ Next.js 16 App Router with server/client components
• 🎨 Tailwind CSS 4 with design tokens
• 📱 Fully responsive design
• 🌐 SEO optimized (metadata, Open Graph, structured data)
• ♿️ WCAG 2.1 AA compliant
• 🎯 Performance optimized (Lighthouse scores: Perf + A11y >= 90)
• 🧪 Comprehensive Cypress testing
• 🐳 Docker support

Testing

# Interactive mode
pnpm cy:open
# Headless mode
pnpm cy:run
# Run specific test
pnpm cy:run --spec "cypress/e2e/home.cy.ts"

Docker

# Build image
docker build -t logify360-website .# Run with Docker Compose
docker-compose up -d

Environment Variables

Required:

NEXT_PUBLIC_PLAYGROUND_URL=your_playground_url

Optional:

NEXT_PUBLIC_GA_ID=your_google_analytics_idNEXT_PUBLIC_GTM_ID=your_google_tag_manager_id

Documentation

• Quick Reference Guide
• Launch Ready
• Project Complete
• Changelog
• Troubleshooting

Architecture

• Server Components by default for optimal performance
• Client Components only when needed (interactivity, animations)
• Centralized content management in /content directory
• 2D SVG-based visualizations (no heavy 3D libraries)
• Code splitting and lazy loading
• Image optimization with Next.js Image component