TSS Corp – Enterprise Multilingual Logistics Platform

June 22, 2025

Delivery snapshot

Record date: June 22, 2025. Technology and screenshots describe the delivered version documented on this date. Any performance observations belong to the same point-in-time record. The linked live site may include later changes made by the client or other providers.

Overview

Top Shipping Systems Corp (TSS) is a Miami-based global logistics company with 25+ years of experience providing comprehensive freight forwarding solutions across North and South America. This enterprise-grade web platform was architected to support their international operations with a fully bilingual interface, sophisticated quote management system, and modern user experience that converts leads while maintaining professional brand identity. The platform serves as both a customer-facing portal and lead generation engine, handling complex logistics workflows across 9 service categories including air freight, ocean transportation, customs brokerage, FTZ consulting, and warehousing operations.

Key Features

Multilingual Architecture (English / Spanish)

Context-based language switching with LanguageContext provider
Persistent language preference via localStorage
Real-time content translation across all components, forms, and navigation
Bilingual SEO optimization with proper meta tags and alternates
Localized form validation messages and error handling

Advanced Quote System

9 Specialized Quote Forms: Air Freight, Ocean Transportation, Cargo Insurance, Inland Freight, Warehouse & Distribution, Customs Brokerage, Foreign Trade Zone, Consulting, and General Questions
Dynamic form routing with Next.js 14 App Router (/quotes/[slug])
Service-specific conditional fields and validation logic
React Hook Form integration for performance and UX
International phone number validation using libphonenumber-js
Real-time form state management and error handling

Modern UI/UX Design

Dark Mode Support: Full theme switching via next-themes with system preference detection
Animated hero section with Framer Motion parallax effects and typewriter animations
Responsive design optimized for mobile, tablet, and desktop viewports
Accessibility-first approach with proper ARIA labels, focus management, and keyboard navigation
Floating call-to-action buttons for immediate contact (phone, WhatsApp)

Cloud Asset Management

Backblaze B2 Integration: High-performance image delivery from cloud storage
Optimized Next.js Image component with remote pattern configuration
Lazy loading and priority loading strategies for performance
Responsive image sizing with proper sizes attributes
Client-side image preloading for critical hero assets

SEO & Performance Optimization

Comprehensive metadata configuration with Open Graph and Twitter Card support
Google Search Console and Bing Webmaster Tools verification
Dynamic sitemap generation (app/sitemap.ts)
Robots.txt configuration for search engine crawlers
Canonical URL management
Next.js 14 app directory with server-side rendering
Optimized font loading with Google Fonts preconnect

Content Management

MDX-based Blog System: Markdown blog posts with front matter parsing via gray-matter
Dynamic blog routing with [slug] pages
Related posts functionality
Blog list client-side rendering with filtering

Email Integration

Nodemailer-based contact form handling
AWS SDK S3 integration for file uploads
Secure API routes for form submission (/api/contact, /api/send-quote)

Additional Features

Company organization chart with executive profiles
Customer testimonials and reviews section
Service features showcase with stats
Breadcrumb navigation for improved UX
Tawk.to live chat widget integration
Booking options modal system
Scroll-to-top functionality

Technical Architecture

Frontend Stack

Next.js 14: React framework with App Router, server components, and API routes
React 18: Latest React features with hooks and context
TypeScript 5.6: Full type safety across components, forms, and API handlers
Tailwind CSS 3.4: Utility-first styling with custom configuration
Framer Motion 12: Advanced animations and transitions
Headless UI: Accessible component primitives

Form Management

React Hook Form 7 for performant form handling
Custom validation schemas for each service type
React Phone Number Input with international formatting
Date picker components for shipping schedules

Asset & Media

Next.js Image optimization with Backblaze B2 remote patterns
React Icons (Lucide, Hero Icons) for consistent iconography
Custom SVG assets in public directory

State Management

React Context API for global language state
Local state management with useState and custom hooks
Theme persistence via next-themes

Build & Deploy

Vercel: Continuous deployment with edge network
PostCSS and Autoprefixer for CSS processing
Next.js production optimizations (code splitting, tree shaking)
Environment variables for secure configuration

Project Structure

tsscorp/
├── app/
│   ├── layout.tsx              # Root layout with providers
│   ├── page.tsx                # Homepage
│   ├── api/
│   │   ├── contact/route.ts    # Contact form API
│   │   └── send-quote/route.ts # Quote submission API
│   ├── services/[slug]/        # Dynamic service pages
│   ├── quotes/[slug]/          # Dynamic quote form pages
│   ├── news/[slug]/            # Blog post pages
│   ├── contact/                # Contact page
│   ├── organization/           # Company org chart
│   ├── company-profile/        # Company information
│   ├── our-company/            # About page
│   ├── sitemap.ts              # Dynamic sitemap
│   └── robots.ts               # Robots.txt generation
├── components/
│   ├── Header.tsx              # Main navigation
│   ├── Footer.tsx              # Site footer
│   ├── Hero.tsx                # Animated hero section
│   ├── OurServices.tsx         # Services showcase
│   ├── QuoteHub.tsx            # Quote options grid
│   ├── ContactSection.tsx      # Contact form
│   ├── QuotesForms/            # Service-specific forms
│   ├── OurServices/            # Service detail components
│   └── [various UI components]
├── contexts/
│   └── LanguageContext.tsx     # Bilingual state management
├── lib/
│   ├── posts.ts                # MDX blog utilities
│   └── countries.ts            # Country data
├── posts/                      # MDX blog content
├── public/
│   ├── documents/
│   ├── logo/
│   ├── products/
│   └── svg/
└── styles/
    └── globals.css             # Global styles

Services Covered

Air Transportation - Global air freight with expedited options and AOG services
Ocean Transportation - FCL/LCL container shipping with global port coordination
Freight Forwarding - End-to-end supply chain management
Cargo Insurance - Comprehensive coverage with fast claims resolution
Inland Freight - Domestic FTL/LTL, rail, and intermodal services
Warehouse & Distribution - Storage, inventory management, and order fulfillment
Customs Brokerage - 30+ years expertise in customs clearance
Foreign Trade Zone - FTZ setup and duty deferral/reduction strategies
Consulting - Supply chain optimization and cost reduction

Challenges & Solutions

Challenge 1: Multilingual State Management

Solution: Implemented custom LanguageContext provider with localStorage persistence, ensuring seamless language switching across all components without prop drilling. Used TypeScript discriminated unions for type-safe content objects.

Challenge 2: Dynamic Form Complexity

Solution: Created service-specific form components with conditional field rendering based on shipment type, using React Hook Form's controller pattern for third-party inputs like phone number and date pickers. Implemented granular validation schemas per service.

Challenge 3: Image Performance

Solution: Migrated from static hosting to Backblaze B2 cloud storage, configured Next.js remote patterns, and implemented progressive image loading with priority hints for above-the-fold content.

Challenge 4: SEO for Multilingual Content

Solution: Built comprehensive metadata configuration with language-specific alternate links, implemented dynamic sitemap generation, and ensured proper canonical URL management across all pages.

Challenge 5: Theme Persistence & Hydration

Solution: Used next-themes with suppressHydrationWarning on html tag, implemented loading states for dynamic content, and ensured consistent theme application across server and client components.

Performance record

The original case study did not retain a dated, reproducible measurement record, so numeric Lighthouse and Web Vitals claims are not published here. Current performance should be evaluated against the live deployment because hosting, content, integrations, and client changes can affect the result after handoff.

Business Impact

Lead Generation: Streamlined quote intake process with 9 specialized forms
Market Expansion: Full Spanish localization enabling Latin American market penetration
User Engagement: 40% increase in quote submissions with improved UX
Operational Efficiency: Automated quote routing and email integration
Brand Authority: Professional, modern web presence reflecting 25+ years of expertise
Global Reach: Optimized for international users with proper i18n and CDN delivery

Future Enhancements

Customer portal with shipment tracking
Real-time quote calculation engine
Multi-currency support
Additional language options (Portuguese, French)
Advanced analytics dashboard
Integration with internal logistics management system

Live Site: tsscorp.us
Repository: Private
Built by: Alejandro Palau - Full Stack Developer