MAT Kitchen Design | Harsh Patel | Full Stack Developer & Engineer

Introduction

MAT Kitchen Design is a professional kitchen design and commercial support studio based in Ahmedabad, India, serving clients across the United States and beyond. The business offers residential kitchen layout design, cabinet drafting and elevations, 2D technical drawings, 3D kitchen views, commercial take-offs, shop drawings, bid support, and back-office project management — available for hire on both Upwork and Fiverr.

The client needed a professional, fast-loading, multi-page website that could clearly communicate their full range of services, showcase their portfolio with individual project pages, and give potential clients a working contact form to request a quote. I built the entire website from scratch — no templates, no page builders — using Next.js, Tailwind CSS, and a working email integration, deployed on Vercel with clean slug-based URLs and a proper sitemap.

What the website does

Homepage — hero section with rotating banner images, a "Why Choose MAT" section with six value propositions, a complete services overview (9 service types), a portfolio preview grid, a 4-step process walkthrough, a freelance platform section (Upwork + Fiverr hire links), an about section, and a full contact form.
Portfolio page — a full grid of completed projects with project name, category, and description. Each project links to its own individual slug-based detail page.
Individual portfolio pages — dynamic routes for each project: /portfolio/kitchen-with-island, /portfolio/u-shape-kitchen, /portfolio/linwood-cabinet-layout, /portfolio/kitchen-with-island-2, /portfolio/custom-kitchen-design. Each page shows the project's full details, images, and description.
Contact form with email integration — a full quote request form collecting name, company, email, phone, project type, timeline, and project details. On submission, the form sends a structured email notification to the business owner via SMTP integration, with all the submitted details formatted clearly for review.
Sitemap.xml — auto-generated sitemap covering the homepage, portfolio index, and all five individual portfolio project URLs, with correct lastmod, changefreq, and priority values for search engine indexing.

Tech stack

Next.js 14 (App Router) — used for file-based routing, dynamic slug pages (/portfolio/[slug]), Server Components for static content, and the API route handler for the contact form email submission. The .html extension is removed from all URLs using Next.js's clean routing — /portfolio not /portfolio.html, /portfolio/kitchen-with-island not /portfolio/kitchen-with-island.html.
React 18 — client components for the contact form (controlled inputs, validation, submission state) and the portfolio hero image carousel (rotating banner images with left/right navigation).
Tailwind CSS — utility-first styling throughout. The design system is clean, professional, and restrained — appropriate for a B2B design services business targeting US contractors and homeowners.
Nodemailer / SMTP email integration — the contact form's API route uses Nodemailer to send a formatted email to the business owner on every form submission. The email includes all form fields (name, company, email, phone, project type, timeline, and project details) in a clean layout for easy review and follow-up.
Dynamic portfolio slug routing — /portfolio/[slug] dynamic route renders individual project pages based on the slug parameter. The slug data maps to project content (images, title, category, description) stored in a static data file — no database needed for a portfolio of this scale.
Sitemap.xml — generated to cover all public URLs with correct SEO metadata for Google Search Console submission.
Vercel — production deployment with automatic preview builds and global CDN delivery.

Services showcased

The website communicates nine distinct service offerings that MAT Kitchen Design provides:

Kitchen Layout Design — efficient, well-planned layouts improving workflow, storage, and appliance placement for residential kitchens.
Cabinet Design & Elevations — custom cabinet planning with practical storage solutions, balanced proportions, and detailed elevations.
2D Drafting & Technical Drawings — floor plans, elevations, sections, and cabinetry drawings prepared for review, quoting, or execution.
3D Kitchen Views — presentation-ready visuals helping clients understand the final look before production or installation.
Cabinet & Countertop Take-Offs — accurate quantity take-offs and estimating support for commercial kitchen cabinets, countertops, and millwork packages.
Commercial Shop Drawings — detailed shop drawings, cabinet elevations, floor plans, sections, and installation-ready drawing packages.
Bid Support & Coordination — bidding support, scope reviews, RFIs, quantity verification, and project coordination during preconstruction.
Back-Office Support — end-to-end support for estimating, bidding, shop drawings, ordering, invoicing, scheduling, and punch list management.
Ordering, Scheduling & Punch Lists — ordering coordination, delivery schedules, installation sequencing, and final punch list management for commercial projects.

Portfolio projects

Five completed projects are showcased with individual slug-based pages, each representing a different project type:

Kitchen with Island (/portfolio/kitchen-with-island) — residential kitchen with improved storage, better appliance flow, and a cleaner overall layout.
U-Shape Kitchen (/portfolio/u-shape-kitchen) — residential kitchen with enhanced workflow through optimized layout and improved storage planning.
Linwood Cabinet Layout (/portfolio/linwood-cabinet-layout) — detailed cabinet planning and shop drawings prepared for production.
Kitchen with Island 2 (/portfolio/kitchen-with-island-2) — residential remodel with refined cabinetry layout, updated island design, and optimized storage.
Custom Kitchen Design (/portfolio/custom-kitchen-design) — custom layout tailored for functionality, aesthetics, and efficient space use.

Contact form and email integration

The quote request form is a full client component with controlled inputs for name, company name, email address, phone number, project type (dropdown selector), timeline, and project details (textarea). On submission, a Next.js API route handler validates the fields and sends a formatted email notification to the business owner via Nodemailer and SMTP. The form shows loading state during submission and a success or error message on completion. This gives the business owner an immediate email notification for every new enquiry — no CRM, no third-party form service, no monthly fee.

SEO and URL structure

Clean, extension-free URLs throughout — a deliberate decision to remove the .html suffix from every page. The sitemap covers all public routes with appropriate crawl priorities: the homepage at priority 1.0, the portfolio index and all project pages at 0.8. Dynamic metadata (page title, meta description, Open Graph tags) is generated per page using Next.js's metadata export — each portfolio project page has its own title and description rather than defaulting to the homepage metadata.

What I'd add

CMS for portfolio — currently portfolio content is in a static data file. A headless CMS like Sanity or Contentful would let the client add new projects without touching code.
More portfolio projects — the slug routing system is already in place; adding new projects is just adding a new data entry and images.
Testimonials section — pulling reviews from Upwork or Fiverr and displaying them as a testimonials carousel would add credibility for US-based clients evaluating the service.
Blog/resources section — SEO-targeted content about kitchen design, cabinetry planning, and commercial estimating would drive organic search traffic from US contractors and homeowners searching for these services.

Conclusion

MAT Kitchen Design is a real, production-deployed client project — not a personal project or a demo. It's live at matkitchendesign.com, serving actual clients. Building it required understanding the client's business, their target audience (US-based contractors, builders, homeowners, and cabinet companies), and the specific information those clients need to make a hiring decision. The result is a fast, professional, SEO-ready website that communicates the service offering clearly and gives potential clients a direct path to getting in touch.