Popular Topics
PopularView All

HandwerkerList.com | Handwerker in Deiner Nähe Finden

HandwerkerList.com | Handwerker in Deiner Nähe Finden
HandwerkerList.com

HandwerkerList is a full-stack web application that connects users with trusted tradespeople (Handwerker) in their area. Similar to Fiverr but focused on local services like plumbing, electrical work, painting, and other trade professions. The platform enables users to search for professionals, view profiles with ratings and reviews, communicate via messaging, and save favorites. Tradespeople can create profiles showcasing their services, expertise, and pricing.

System Architecture

Frontend Architecture

Framework & Build System:

  • React 18 with TypeScript for type safety
  • Vite for fast development and optimized production builds
  • Wouter for lightweight client-side routing
  • React Query (TanStack Query) for server state management and caching

UI Component System:

  • Shadcn/ui component library with Radix UI primitives
  • Tailwind CSS for styling with custom design system
  • Custom theme provider supporting light/dark modes
  • Design follows trust-driven marketplace patterns (Fiverr/Airbnb inspired)

Internationalization:

  • i18next for multilingual support (English/German)
  • Browser language detection with manual override capability
  • Translation files organized by feature domains

State Management:

  • React Query for server state (API data, caching, optimistic updates)
  • React Context for theme and global UI state
  • Local component state with React hooks

Backend Architecture

Server Framework:

  • Express.js with TypeScript
  • RESTful API design pattern
  • Session-based authentication via express-session

Database & ORM:

  • PostgreSQL as primary database (Neon serverless)
  • Drizzle ORM for type-safe database queries
  • Schema-first design with Zod validation
  • Connection pooling via @neondatabase/serverless

Authentication Flow:

  • Dual Authentication Support:
    1. Google OAuth 2.0 via passport-google-oauth20
    2. Email/Password via passport-local with bcrypt hashing
  • Session storage in PostgreSQL using connect-pg-simple
  • User profile synchronization on login
  • Protected route middleware pattern
  • Automatic user creation/login on successful authentication

Database Schema Design

Core Entities:

  • users – User accounts with profile information
  • handwerker_profiles – Tradesperson business profiles (private individual or firm)
  • categories – Service categories (53 total, including Builder, Electrician, Plumber, Carpenter, Landscaper, Kitchen Fitter, etc.)
  • handwerker_categories – Many-to-many relationship for multi-category support
  • services – Individual service offerings with pricing
  • conversations & messages – Direct messaging system
  • reviews – Star ratings and written feedback
  • favorites – User bookmarking of profiles
  • sessions – Server-side session storage

Key Relationships:

  • Users can have one Handwerker profile
  • Profiles can belong to multiple categories
  • Reviews link users to Handwerker profiles
  • Conversations track message threads between users

Data Validation:

  • Drizzle-Zod schemas for runtime validation
  • Insert schemas separate from full entity types
  • Type inference from database schema to frontend

Search & Discovery

Search Implementation:

  • Keyword search across business names and descriptions
  • Location-based filtering (city, zip code)
  • Category filtering (single or all categories)
  • Sort options: relevance, rating, price, distance
  • Query parameter-based search state management

SEO Optimization:

  • Server-side rendering ready structure
  • Semantic HTML with proper heading hierarchy
  • Meta tags for social sharing
  • SEO-friendly URL slugs for profiles

File Upload System

Object Storage:

  • Google Cloud Storage backend (standard service account credentials)
  • Uppy.js integration for file uploads with modal UI
  • ACL-based access control (public/private objects)
  • Profile photos and service images (publicly accessible)
  • Presigned URL upload flow for security
  • Object path normalization and entity management
  • Dashboard UI for drag-and-drop uploads
  • Size restrictions (5MB for profile photos)

Design System

Color Philosophy:

  • Trust-focused color palette (professional blue primary)
  • Light and dark mode support via CSS variables
  • Consistent elevation system for interactive elements
  • Accessible contrast ratios

External Dependencies

Authentication & Session:

  • Google OAuth 2.0 via passport-google-oauth20 – User authentication
  • express-session with connect-pg-simple – Session management in PostgreSQL
  • Passport.js – Authentication middleware

Database:

  • Neon Serverless PostgreSQL – Primary database
  • Drizzle ORM – Type-safe database toolkit
  • @neondatabase/serverless – Serverless connection pooling

UI & Styling:

  • Radix UI – Accessible component primitives
  • Tailwind CSS – Utility-first styling
  • shadcn/ui – Pre-built component patterns
  • class-variance-authority – Variant styling system

Internationalization:

  • i18next – Translation framework
  • i18next-browser-languagedetector – Auto language detection
  • react-i18next – React bindings

Frontend Libraries:

  • TanStack React Query – Server state management
  • Wouter – Lightweight routing
  • React Hook Form + Zod – Form validation
  • cmdk – Command palette component

Development Tools:

  • Vite – Build tool and dev server
  • TypeScript – Type safety
  • ESBuild – Production bundling
  • PostCSS + Autoprefixer – CSS processing

Google Services:

  • Google Fonts API – Typography (Inter, Poppins, JetBrains Mono)
  • Google Maps API – Location integration (referenced in requirements)