MeisterFinder

A modern, regional craftsmen directory platform connecting customers with verified craftsmen in Bavaria, Germany.

🚀 Tech Stack

• Framework: Next.js 15 (App Router, React Server Components)
• Language: TypeScript (strict mode)
• Styling: Tailwind CSS + shadcn/ui
• Backend: Supabase (PostgreSQL, Auth, Storage)
• Forms: React Hook Form + Zod
• Icons: Lucide React
• Deployment: Vercel

📋 Prerequisites

• Node.js 18.x or higher
• npm or yarn
• Supabase account
• Stripe account (for payments)

🛠️ Getting Started

1. Clone the repository

git clone https://github.com/yourusername/meisterfinder.git
cd meisterfinder

2. Install dependencies

npm install

3. Set up environment variables

Copy .env.local.example to .env.local and fill in your credentials:

cp .env.local.example .env.local

Required environment variables:

• NEXT_PUBLIC_SUPABASE_URL: Your Supabase project URL
• NEXT_PUBLIC_SUPABASE_ANON_KEY: Your Supabase anonymous key
• SUPABASE_SERVICE_ROLE_KEY: Your Supabase service role key
• STRIPE_PUBLISHABLE_KEY: Your Stripe publishable key
• STRIPE_SECRET_KEY: Your Stripe secret key
• RESEND_API_KEY: Your Resend API key

4. Run the development server

npm run dev

Open http://localhost:3000 with your browser.

📁 Project Structure

├── app/                    # Next.js App Router
│   ├── (routes)/          # Public routes
│   ├── dashboard/         # Protected dashboard
│   ├── api/              # API routes
│   └── layout.tsx        # Root layout
├── components/
│   ├── ui/               # shadcn/ui components
│   ├── features/         # Feature-specific components
│   └── layout/           # Layout components
├── lib/
│   ├── supabase/         # Supabase clients
│   ├── actions/          # Server Actions
│   ├── utils/            # Utility functions
│   └── validations/      # Zod schemas
├── types/                # TypeScript types
├── config/               # Configuration files
└── public/              # Static assets

🎨 Design System

Colors

• Primary: Blue (#3B82F6) - Trust, professionalism
• Secondary: Orange (#F97316) - Energy, craftsmanship

Typography

• Font: Inter (system font)
• Scale: Tailwind default scale

Components

Built with shadcn/ui for:

• Consistency
• Accessibility (WCAG 2.1 AA)
• Customizability

🔐 Authentication

Using Supabase Auth with:

• Email/Password authentication
• Email verification
• Password reset
• Protected routes via middleware

📊 Database Schema

Main tables:

• profiles - User profiles
• listings - Business listings
• categories - Craftsmen categories
• reviews - Customer reviews
• leads - Customer inquiries

See types/database.ts for full schema.

🚢 Deployment

Vercel (Recommended)

1. Push to GitHub
2. Import project in Vercel
3. Add environment variables
4. Deploy

Environment Variables

Make sure to add all environment variables from .env.local to your Vercel project settings.

📝 Development Guidelines

Code Style

• TypeScript strict mode
• Named exports preferred
• Server Components by default
• Client Components only when needed
• Zod for validation

UI Language

• German for all user-facing text
• English for code and comments

Accessibility

• WCAG 2.1 AA compliance
• Semantic HTML
• ARIA labels where needed
• Keyboard navigation

🧪 Testing

# Run linter
npm run lint

# Format code
npm run format

📚 Learn More

• Next.js Documentation
• shadcn/ui Documentation
• Supabase Documentation
• Tailwind CSS Documentation

📄 License

MIT License - see LICENSE file for details

🤝 Contributing

Contributions are welcome! Please read our contributing guidelines first.

📧 Support

For support, email support@meisterfinder.de or open an issue on GitHub.