ReactViteTypeScriptExpressNode.jsPostgreSQLDrizzle ORMTailwind CSSReact QueryReact Hook FormZodFramer MotionTeak FurnitureSagwan FurnitureLead Generation Website
Carve Teak Global - Handcrafted Wooden Furniture
A premium marketing and lead-generation platform for handcrafted Sagwan and Teak wood furniture, built to showcase collections and capture high-intent enquiries.
Project Overview
Carve Teak Global is a modern marketing and lead-generation website for premium handcrafted wooden furniture, focusing on Sagwan (teak) and other high-quality hardwoods. The platform blends an elegant React front end with a robust TypeScript Express API and PostgreSQL database to capture, validate, and store customer enquiries while reinforcing the brand’s heritage-driven craftsmanship.
Key Features & Functionality
🛈Brand & Experience
- Hero, About, Collections, Gallery, The Craft, Our Story, and Contact sections showcasing Sagwan and Teak furniture.
- High-impact hero banner highlighting handcrafted wooden furniture in real interiors.
- Curated collections and gallery views to explore sofas, dining sets, rocking chairs, and bespoke pieces.
- Story-driven copy emphasizing heritage, artisan craftsmanship, and heirloom-quality materials.
💬Lead Generation & Engagement
- Conversion-focused contact form with client and server-side validation to reduce junk submissions.
- Automatic email alerts to administrators for every verified enquiry.
- WhatsApp floating action button for instant chat and quick quote requests.
- Clear CTAs like Request Quote across hero and key sections to guide users toward enquiry.
⚙️Technical & Operational
- Shared validation and types between frontend and backend to minimize runtime errors.
- API-first architecture that cleanly separates marketing pages from data handling logic.
- SEO-optimized structure with semantic HTML, descriptive titles, and furniture-specific keywords.
- Production-ready build pipeline with Vite, TypeScript, and PostCSS for maintainable growth.
Technology Stack
Frontend
- React 18: Component-driven SPA architecture for fast, interactive browsing.
- Vite 5: Lightning-fast development server and optimized production builds.
- TypeScript: End-to-end type safety across components and hooks.
- Tailwind CSS 3: Utility-first styling for responsive, mobile-first layouts.
- shadcn/ui + Radix UI: Accessible, reusable UI primitives for forms and dialogs.
- Framer Motion: Subtle animations to enhance perceived quality and polish.
- Wouter: Lightweight client-side routing for page and section navigation.
Forms & Validation
- React Hook Form: Optimized, accessible form state management.
- Zod: Schema-driven validation shared between frontend and backend.
- drizzle-zod: Single source of truth for database and validation schemas.
Backend & Database
- Node.js + Express 4: JSON API under /api for secure enquiry handling.
- Drizzle ORM: Type-safe PostgreSQL access and migrations.
- PostgreSQL: Persistent storage for customer enquiries and contact requests.
Data Fetching & Messaging
- TanStack React Query: Declarative data fetching and mutation for contact APIs.
- FormSubmit.co: Email notification pipeline without managing SMTP credentials.
- Shared Types Module: Common TypeScript types across client and server.
SEO & Performance
- Custom useSEO hook: Dynamic meta tags and Open Graph data per section.
- Pre-configured sitemap, robots.txt, and web app manifest for better crawling.
- Optimized hero and gallery imagery with responsive layouts.
- WhatsApp integration: High-intent CTA for instant enquiries on mobile and desktop.