SAFEGUARD SHELTER

📌 Project Overview

SAFEGUARD SHELTER is a corporate website built for a Turkish manufacturer of custom shelters and survival solutions. The platform presents the company’s product lines and services in a clear, professional way.

🏗 Architecture & Tech Stack

Core The stack is built on Next.js 14 (App Router), React 18, and TypeScript. It uses a single codebase for server and client, API routes, and metadata, with full type safety across the project.

Styling & UI Tailwind CSS (utility-first) is used for the custom palette and theme, with a responsive mobile-first layout. Class composition is handled via clsx and tailwind-merge.

Animations Framer Motion provides section and scroll animations, Lucide React supplies the icons, and Swiper powers the product and series carousels.

Internationalization (i18n) Turkish and English are supported through a lightweight React Context and a t(key) translation pattern, without a heavy i18n library, keeping the bundle small and maintenance simple.

📨 Backend & API

Next.js API route /api/send-email powers contact and consultation forms. Nodemailer sends HTML emails. IP-based rate limiting (2 requests per hour) with 429 and Retry-After. Architecture supports an email queue for higher traffic.

🔎 SEO & Security

SEO & discoverability

• Next.js Metadata API for page titles, descriptions, and meta tags
• Open Graph and Twitter Card for social sharing
• Canonical URLs and language alternates (tr-TR / en-US)
• Dynamic sitemap and robots configuration
• Static generation for blog and listing pages (generateStaticParams)

Compliance & security

• KVKK disclosure and consent modal
• Cookie preference and consent modal
• Form validation with React Hook Form and Zod
• Rate limiting to reduce spam and abuse

📂 Structure & Outcome

Project structure

• app/ — routes, layouts, and pages
• app/components/ — reusable UI components
• app/contexts/ — language and app state
• app/api/ — backend API routes
• lib/ — rate limiter, email queue, and shared utilities

Page structure

• Home: hero, series overview, features, products, call-to-action
• Series detail pages, blog (list and single post)
• Pricing and comparison, FAQ, contact

Performance & deployment

• Optimized images with next/image, optimized Google Fonts (Nunito Sans)
• Minimal dependencies, mobile-first responsive layout
• Standalone build; runs on Vercel, Hostinger, or static export

Outcome

SAFEGUARD SHELTER is a modern corporate site with a full-stack Next.js setup, strong SEO, secure forms and email delivery, bilingual support, and a performance-focused, maintainable codebase.