Case Study - Marketing Website for Restaurant Review App with 115+ SEO Blog Posts

Overview

Foodaholix is a restaurant review and rating mobile app for the San Francisco Bay Area. They needed a marketing website and content hub to drive organic traffic and increase app downloads through SEO.

I built their landing page and comprehensive blog platform featuring 115+ restaurant guides targeting local food enthusiasts. The project evolved through multiple phases, starting from a simple HTML/CSS/JavaScript website to a sophisticated Gatsby-based marketing site optimized for search engines. The biggest challenge was creating a scalable content architecture that could handle hundreds of blog posts while maintaining excellent SEO performance and fast load times.

The Challenge

The initial website was built with vanilla HTML, CSS, and JavaScript, which made it difficult to:

• Scale content management for hundreds of blog posts
• Maintain consistent SEO optimization across pages
• Implement modern UI patterns and responsive design
• Manage component reusability and code maintenance

The marketing website needed to rank for highly competitive local search terms like "best restaurants in San Francisco," "romantic restaurants Palo Alto," and hundreds of other location and cuisine-specific queries to drive qualified traffic to the app download pages.

The Solution: Triple Evolution

Phase 1: Framework Migration

From HTML/CSS/JS to React + Gatsby

The first major revamp involved migrating the entire codebase to a modern stack:

• Implemented Gatsby for static site generation (SSG) ensuring fast page loads and excellent SEO
• Built reusable React components for scalability
• Integrated Styled Components for maintainable styling
• Set up automated sitemap generation and canonical URLs
• Implemented React Helmet for dynamic meta tags

Phase 2: Design Overhaul

Complete UI/UX Redesign

The second phase focused on modernizing the entire user experience:

• Redesigned all sections with modern, clean aesthetics
• Improved mobile responsiveness across all pages
• Enhanced navigation with smooth animations
• Created an accordion-based FAQ section
• Integrated React Hook Form for the contact section

Phase 3: Styling Migration

Graceful Migration to Tailwind CSS

The final evolution involved migrating from Styled Components to Tailwind CSS:

• Gradually refactored all components to use Tailwind utility classes
• Maintained backward compatibility during the transition
• Improved developer experience with utility-first CSS
• Reduced CSS bundle size and improved performance
• Achieved consistent design system across all components

Blog Architecture: Built for Scale

One of the most impressive features is the blog architecture designed to handle 115+ posts efficiently:

File-Based Routing System:

• Each blog post has its own directory under src/pages/blogs/{slug}/
• Individual SEO meta tags for every post
• Optimized for search engines with canonical URLs

Centralized Content Management:

• Blog registry in src/constants/blogLinks.js managing all posts
• Featured images hosted on DigitalOcean Spaces CDN for performance
• Structured data in src/constants/blogData/ for content

Custom Pagination:

• Client-side pagination showing 10 posts per page
• LocalStorage persistence for user's page position
• Smooth navigation with keyboard and mouse support

SEO-Optimized Content: Each blog post targets specific local searches:

• "Best Indian Restaurants in San Francisco 2025"
• "Top 10 Romantic Restaurants in Palo Alto"
• "Affordable Restaurants in Mountain View"
• 115+ more location and cuisine-specific posts

Technical Implementation

Technology Stack

Frontend Framework:

• Gatsby 5.5.0 (React 18.2.0)
• Static Site Generation for optimal performance

Styling:

• Tailwind CSS 3.3.5 (current implementation)
• PostCSS for processing
• Custom animations and transitions

SEO & Analytics:

• React Helmet for meta tag management
• Google Tag Manager integration
• Facebook Pixel tracking
• Automated sitemap and robots.txt generation
• Canonical URL implementation

Performance:

• Image optimization with gatsby-plugin-image
• CDN integration (DigitalOcean Spaces)
• Code splitting and lazy loading
• Optimized font loading (Google Fonts)

Forms & Validation:

• React Hook Form for contact forms
• Axios for API requests

Icons & UI Components:

• React Icons library
• Custom accordion component for FAQs
• Reusable card components

Key Features Delivered

Marketing Landing Page

• Hero section with app download CTAs
• "Why Foodaholix" value proposition
• For Restaurants section (B2B marketing)
• Foodaholix Place (app features showcase)
• Call-to-action sections driving to app stores
• About section highlighting app benefits
• FAQ with accordion interactions
• Contact form with validation

Content Hub (115+ Blog Posts)

• Restaurant guides for San Francisco Bay Area
• Custom pagination system
• Grid layout with hover effects
• Featured images with lazy loading
• Each post includes app download CTAs
• Responsive design for all devices

SEO Infrastructure

• Comprehensive meta tag system
• Structured data implementation
• Sitemap generation
• Canonical URLs for duplicate content
• Google Analytics integration
• Facebook Pixel tracking

Navigation

• Responsive header with mobile menu
• Smooth scroll animations
• Active link highlighting
• Hamburger menu for mobile
• Custom hover effects

Performance Metrics

The migration and optimizations delivered significant improvements:

• Page Load Time: Under 2 seconds for all pages
• Lighthouse Score: 95+ for Performance, SEO, Accessibility
• SEO Visibility: 115+ pages indexed on Google
• Mobile Experience: Fully responsive across all devices
• Build Time: Optimized static generation for 115+ pages

Technical Highlights

Gatsby Configuration

Custom Gatsby setup for optimal SEO:

;-gatsby -
  plugin -
  sitemap -
  gatsby -
  plugin -
  canonical -
  urls -
  gatsby -
  plugin -
  google -
  tagmanager -
  gatsby -
  plugin -
  facebook -
  pixel -
  gatsby -
  plugin -
  robots -
  txt -
  gatsby -
  omni -
  font -
  loader

Blog Pagination Logic

Implemented custom pagination with LocalStorage persistence:

• 10 posts per page
• Remembers user's last visited page
• Smooth transitions between pages
• Keyboard navigation support

Responsive Design

Mobile-first approach with Tailwind breakpoints:

• md: breakpoint for tablets
• lg: breakpoint for desktops
• Custom animations using Tailwind transitions
• Optimized touch targets for mobile

Challenges Overcome

1. Styled Components to Tailwind Migration

• Gradual refactoring approach to avoid breaking changes
• Maintained both libraries during transition period
• Ensured visual consistency throughout migration

2. Managing 115+ Blog Posts

• Created scalable file-based routing system
• Centralized blog registry for easy management
• Automated SEO tag generation

3. SEO at Scale

• Individual meta tags for 115+ pages
• Canonical URL management
• Sitemap generation for all posts
• Structured data implementation

4. Performance Optimization

• CDN integration for images
• Static site generation with Gatsby
• Code splitting and lazy loading
• Optimized font loading

What We Did

Results & Impact

The Foodaholix marketing website successfully established itself as a comprehensive resource for Bay Area food enthusiasts, driving organic traffic to the app:

SEO & Marketing Success:

• 115+ pages indexed and ranking on Google
• Targeting high-value local search terms for app discovery
• Comprehensive coverage of Bay Area restaurants driving qualified traffic
• Location-specific content for multiple cities (SF, Palo Alto, Mountain View, San Ramon, etc.)
• Strategic app download CTAs throughout content

Technical Excellence:

• Modern React architecture with Gatsby
• Clean, maintainable Tailwind CSS codebase
• Optimized performance across all devices
• Scalable blog architecture supporting ongoing content growth

User Experience:

• Fast, responsive design
• Intuitive navigation guiding users to app downloads
• Easy-to-use blog browsing with pagination
• Mobile-optimized experience (critical for app marketing)

Lessons Learned

Gradual Migration Works Best: The graceful migration from Styled Components to Tailwind CSS proved that incremental changes are safer and more maintainable than big-bang rewrites.

SEO-First Architecture: Building with Gatsby from the start ensured excellent SEO performance. Static site generation combined with proper meta tags, sitemaps, and canonical URLs created a solid foundation.

Content at Scale: Managing 115+ blog posts required thoughtful architecture. The file-based routing combined with centralized data management struck the right balance between scalability and maintainability.

Performance Matters: CDN integration and image optimization were crucial for maintaining fast load times across 115+ pages with multiple images per page.

Future Enhancements

Potential areas for growth on the marketing website:

• Sanity CMS integration for easier blog content management
• A/B testing for app download CTAs
• Advanced search and filtering for blog content
• Interactive maps showing featured restaurants
• Newsletter signup for content updates
• App review showcase section

---

Project Type: Marketing Website Development Duration: Multiple phases over 12 months Technologies: React, Gatsby, Tailwind CSS, DigitalOcean, Google Analytics Industry: Food & Restaurant App Marketing Location Focus: San Francisco Bay Area Purpose: Drive organic traffic and app downloads through SEO-optimized content