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