Wisdom Clean

Wisdom Clean is a modern, high-performance web application designed for a leading professional cleaning service provider in Melbourne, Australia. The platform focuses on delivering a seamless user experience, showcasing professional expertise, and facilitating direct client interaction through a dynamic, CMS-driven architecture.

🚀 Overview

The project was built to replace a static presence with a dynamic, scalable solution. It features a comprehensive service catalog, a real-time review system, and a managed gallery, all powered by a headless CMS for effortless content updates.

---

🛠️ Tech Stack

Category	Technology
Framework	Next.js 15 (App Router), React 19, TypeScript
Styling	Tailwind CSS, Shadcn UI, Lucide React
Animation	Framer Motion (Micro-interactions & Scroll Animations)
Headless CMS	Contentful (Services, Gallery, Reviews, Logos)
Data Fetching	TanStack Query (React Query)
Integrations	Nodemailer (Email Alerts), Swiper.js, React Photo Album
Deployment	Netlify

---

✨ Key Features

1. Dynamic Service Catalog

A structured showcase of specialized cleaning services including Residential, Commercial, Medical Centre, and Childcare cleaning. Each service is presented with high-quality imagery and detailed descriptions.

2. CMS-Powered Gallery & Reviews

• Headless CMS Integration: Utilizes Contentful for managing the project gallery and client reviews, allowing the business owner to update content without touching the code.
• Infinite Scroll Reviews: Implemented using TanStack Query and react-intersection-observer for a smooth browsing experience of customer testimonials.

3. Integrated Review System

• Real-time Submissions: Users can submit reviews directly through a custom-built form with Zod-based validation.
• Automated Notifications: Integration with Nodemailer sends instant email alerts to the administration team upon new review submissions.
• Server Actions: Securely handles data mutations using Next.js Server Actions.

4. Premium UI/UX Design

• Fluid Animations: Leverages Framer Motion for scroll-triggered entrance animations and smooth transitions.
• Fully Responsive: Optimized for all devices, from desktop workstations to mobile phones, using Tailwind's utility-first approach.
• Interactive Components: Features a sliding client logo carousel and a responsive, masonry-style photo gallery.

---

🏗️ Architecture Highlights

• Server-Side Excellence: Uses Next.js App Router for optimized SEO and fast initial page loads.
• Type Safety: Comprehensive TypeScript implementation across the entire codebase to ensure reliability and maintainability.
• Modular Design: Components are built following a clean, reusable architecture with a focus on separation of concerns.

---

📈 Impact

• Professionalism: Established a premium digital identity that reflects the high quality of Wisdom Clean's services.
• Efficiency: Reduced administrative overhead by automating review handling and content updates.
• Engagement: Improved user retention through modern design aesthetics and interactive elements.

---

🔗 Project Structure

├── app/                  # Next.js App Router (Pages & Layouts)
├── components/           # Reusable UI components (Shadcn, Custom)
├── lib/                  # API clients (Contentful), Utilities
├── public/               # Static assets (Icons, Images)
├── schemas/              # Zod validation schemas
└── tailwind.config.ts    # Custom Design System tokens

---