Comprehensive development guide for a Next.js 15 service business website with TypeScript, Tailwind CSS, and App Router. Includes architecture patterns, component structure, brand guidelines, and SEO optimization for a plumbing/handyman business.
Comprehensive guidance for working with the Twin Handyman & Plumbing service business website codebase.
A Next.js 15 App Router website for a Bay Area plumbing and handyman service business featuring 60+ services, emergency contact features, and mobile-first responsive design.
**Business Details:**
**Technology Stack:**
1. **Start development server**: `npm run dev` (uses Turbopack)
2. **Build for production**: `npm run build`
3. **Start production server**: `npm start`
4. **Lint code**: `npm run lint`
5. **Type check**: `npx tsc --noEmit`
```
handymanproject/
├── public/ # Static assets (logo, service images)
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── layout.tsx # Root layout with Header/Footer
│ │ ├── page.tsx # Homepage
│ │ ├── globals.css # Global styles & Tailwind
│ │ └── services/ # Services pages
│ │ ├── page.tsx # Services listing
│ │ └── [slug]/ # Dynamic service pages
│ ├── components/ # React components
│ │ ├── Header.tsx # Navigation header
│ │ ├── Footer.tsx # Site footer
│ │ ├── Hero.tsx # Homepage hero section
│ │ ├── ServiceCard.tsx # Service display component
│ │ ├── RequestCallback.tsx # Contact form modal
│ │ └── ui/ # shadcn/ui components
│ └── lib/
│ ├── services.ts # Services data & utilities (60+ services)
│ └── utils.ts # Utility functions
├── tailwind.config.js # Tailwind with brand colors
├── tsconfig.json # TypeScript strict configuration
└── next.config.ts # Next.js configuration
```
Core data model in `/src/lib/services.ts`:
```typescript
interface Service {
slug: string; // URL-friendly identifier
title: string; // Display name
short: string; // Brief description
description: string; // Detailed description
benefits: string[]; // Service benefits list
faq: { question: string; answer: string }[]; // FAQ items
category: 'installation' | 'repair' | 'featured';
icon: string; // Lucide icon name
}
```
Always use explicit types and interfaces:
```typescript
// ✅ Good: Explicit interface definitions
interface ServiceCardProps {
service: Service;
className?: string;
onClick?: () => void;
}
const ServiceCard: React.FC<ServiceCardProps> = ({ service, className, onClick }) => {
// Implementation
};
// ❌ Avoid: Any types
```
Follow this pattern for all components:
```typescript
'use client'; // Only if client-side features needed
import { useState, useEffect } from 'react';
import { Button } from '@/components/ui/button';
interface ComponentProps {
// Props interface
}
export default function Component({ prop1, prop2 }: ComponentProps) {
// 1. State declarations
const [state, setState] = useState<Type>(initialValue);
// 2. Effects
useEffect(() => {
// Effect logic
}, [dependencies]);
// 3. Event handlers
const handleEvent = () => {
// Handler logic
};
// 4. Render
return (
<div className="component-styles">
{/* JSX content */}
</div>
);
}
```
Use organized class names and brand colors:
```typescript
// ✅ Good: Organized classes
const cardClasses = [
'bg-white rounded-lg shadow-md',
'p-6 hover:shadow-lg transition-shadow',
'border border-gray-200'
].join(' ');
// ✅ Good: Responsive design (mobile-first)
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
// ✅ Good: Brand color usage
<button className="bg-brand-blue hover:bg-brand-navy text-white">
// ❌ Avoid: Inline styles (use Tailwind instead)
```
Always organize imports in this order:
```typescript
// 1. React imports
import { useState, useEffect } from 'react';
// 2. Third-party libraries
import { motion } from 'framer-motion';
import { Phone, Mail } from 'lucide-react';
// 3. Internal components
import { Button } from '@/components/ui/button';
import ServiceCard from '@/components/ServiceCard';
// 4. Types and utilities
import { Service } from '@/lib/services';
import { cn } from '@/lib/utils';
```
Always use mobile-first approach:
```typescript
<div className="
flex flex-col space-y-4 p-4
md:flex-row md:space-y-0 md:space-x-6 md:p-6
lg:p-8 xl:max-w-7xl xl:mx-auto
">
```
Use Framer Motion with subtle animations:
```typescript
const cardVariants = {
hidden: { opacity: 0, y: 20 },
visible: {
opacity: 1,
y: 0,
transition: { duration: 0.3, ease: 'easeOut' }
}
};
// Tailwind hover effects
<div className="transform hover:scale-105 transition-transform duration-200">
```
Implement metadata for all pages:
```typescript
export async function generateMetadata({ params }: { params: { slug: string } }): Promise<Metadata> {
const service = getServiceBySlug(params.slug);
if (!service) {
return {
title: 'Service Not Found | Twin Handyman & Plumbing',
};
}
return {
title: `${service.title} | Twin Handyman & Plumbing`,
description: service.short,
keywords: `${service.title}, plumbing, handyman, Bay Area`,
openGraph: {
title: service.title,
description: service.short,
type: 'website',
},
};
}
```
```javascript
// tailwind.config.js
module.exports = {
content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
theme: {
extend: {
colors: {
'brand-navy': '#0B1D41',
'brand-blue': '#1F75A6',
'brand-gold': '#B88E3B',
'brand-red': '#B31E1E',
},
fontFamily: {
sans: ['var(--font-inter)', 'system-ui', 'sans-serif'],
},
},
},
plugins: [require('@tailwindcss/forms'), require('tailwindcss-animate')],
}
```
```json
{
"compilerOptions": {
"strict": true,
"noEmit": true,
"jsx": "preserve",
"moduleResolution": "bundler",
"baseUrl": ".",
"paths": { "@/*": ["./src/*"] }
}
}
```
1. **Mobile-First**: Base styles for mobile, progressively enhance for larger screens
2. **Type Safety**: Strict TypeScript with explicit interfaces
3. **Performance**: Optimize images, fonts, and bundle size
4. **Accessibility**: WCAG 2.1 compliance with proper ARIA labels
5. **SEO**: Dynamic metadata and structured data
6. **Brand Consistency**: Always use brand colors and design patterns
7. **Code Quality**: ESLint, type checking, and consistent formatting
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/twin-handyman-and-plumbing-project-guide/raw