Luminos Tech – Next.js 14 Website

Production-ready, responsive site for a fictional local tech repair shop.

Tech Stack

• Framework: Next.js 14 (App Router) + TypeScript
• Styling: Tailwind CSS + shadcn/ui components
• Forms: React Hook Form + Zod validation
• Icons: lucide-react
• Email: Nodemailer with Gmail SMTP
• Authentication: JWT-based admin authentication
• SEO: JSON-LD structured data, sitemap, robots.txt

Features

• ✅ Responsive design with mobile-first approach
• ✅ Contact and service request forms with email notifications
• ✅ Admin panel for content management
• ✅ SEO optimized with metadata and structured data
• ✅ Security hardened (XSS protection, rate limiting, secure headers)
• ✅ Performance optimized (image optimization, caching headers)

Getting Started

Prerequisites

• Node.js 18+
• pnpm (recommended) or npm

Installation

# Install dependencies
pnpm install

# Set up environment variables
# Create .env.local with:
# [email protected]
# EMAIL_PASS=your-gmail-app-password
# ADMIN_USERNAME=admin
# ADMIN_PASSWORD=your-secure-password
# ADMIN_SESSION_TOKEN=your-random-secret-key
# NEXT_PUBLIC_SITE_URL=http://localhost:3000

# Run development server
pnpm dev

# Open http://localhost:3000

Building for Production

# Build the application
pnpm build

# Start production server
pnpm start

Project Structure

├── app/                    # Next.js app router pages
│   ├── api/               # API routes
│   ├── admin/             # Admin panel
│   └── [pages]/           # Public pages
├── components/            # React components
│   └── ui/                # Reusable UI components
├── content/               # Content management (TypeScript)
├── lib/                   # Utility functions
│   ├── admin-auth.ts      # Admin authentication
│   ├── email.ts           # Email functionality
│   └── html-escape.ts     # Security utilities
└── public/                # Static assets

Key Features Implementation

Email Functionality

• Contact form sends emails via Gmail SMTP
• Service request form with ticket ID generation
• HTML escaping prevents email injection attacks

Security

• JWT-based admin authentication
• Rate limiting on form submissions
• XSS protection with HTML escaping
• Security headers (CSP, X-Frame-Options, etc.)

Admin Panel

• Content management system
• Protected routes with authentication
• Real-time content updates

Environment Variables

Required environment variables:

# Email Configuration
EMAIL_USER=[email protected]
EMAIL_PASS=your-gmail-app-password
EMAIL_TO=[email protected]  # Optional

# Admin Authentication
ADMIN_USERNAME=admin
ADMIN_PASSWORD=your-secure-password
ADMIN_SESSION_TOKEN=your-random-secret-key  # Required!

# Site Configuration
NEXT_PUBLIC_SITE_URL=https://yourdomain.com

Deployment

This project is configured for deployment on Vercel:

1. Push code to GitHub
2. Import project in Vercel
3. Set environment variables in Vercel dashboard
4. Deploy!

License

This project is a portfolio demonstration project.