Building Apres Surf Club

When Oliver, the founder of Apres Surf Club, approached us with his vision for an inclusive surf community platform, we faced an exciting challenge: How could we translate a vibrant, community-focused brand into a digital experience that was both technically robust and emotionally resonant?

The result was a dynamic platform handling thousands of registered members that seamlessly combines authentication, e-commerce, and content management—all wrapped in a design that authentically represents the brand's unique identity.

Project Context

Apres Surf Club stands apart in the surfing world with its focus on inclusivity and community over competition.

In 2023, Après Surf Club emerged as a vibrant counterpoint to conventional surf culture. By building a social surf club in the sometimes hard-to-get-into California surf scene, Après Surf Club set out on a path previously untaken.

Oliver needed a digital platform that would

• Serve as a membership hub for a growing community
• Provide e-commerce functionality for merchandise and memberships
• Showcase curated content including member-submitted photos
• Scale with the rapid growth of the community
• Embody the brand identity we would develop together

With these requirements in mind, we set out to build not just a website, but a digital cornerstone for the Apres Surf community.

The Technical Challenge

The project presented several interesting technical challenges

• Authentication System: Creating a secure yet frictionless experience for members
• Custom E-commerce: Building a tailored shopping experience rather than using off-the-shelf solutions
• Content Management: Empowering the client to update content without developer intervention
• Performance: Ensuring fast load times despite rich media content and dynamic elements
• Brand Alignment: Translating distinctive brand aesthetics to functional web design

Rather than cobbling together multiple plugins or using restrictive templates, we opted to build custom solutions that would give us complete control over the user experience.

Brand Development Process

Before diving into code, we embarked on a comprehensive brand development process with Oliver. This collaborative journey was crucial to establishing Apres Surf Club's unique identity:

• Discovery Phase: We gathered inspiration from existing surf brands, art styles, and cultural touchpoints
• Conceptualization: We explored color palettes, typography, and visual elements that communicated the inclusive ethos of Apres
• Refinement: Through iterative feedback sessions, we narrowed down design concepts that resonated with Oliver's vision
• Finalization: We created a cohesive brand identity system that would inform every aspect of the digital experience

This upfront investment in brand development proved invaluable, establishing a strong foundation for the technical implementation that followed.

Our Technical Approach

After evaluating multiple technical approaches, we selected a modern stack that prioritized performance, maintainability, and developer experience:

// tech-stack.ts
const apresProjectStack = {
  frontend: {
    framework: "Next.js",
    language: "TypeScript",
    styling: "Tailwind CSS",
    stateManagement: "Native React State"
  },
  backend: {
    runtime: "TypeScript",
    serverless: "Vercel Functions",
    database: "Firestore",
    auth: "Firebase Authentication",
    payments: "Custom Stripe Integration",
    cms: "Sanity.io"
  },
  devOps: {
    versionControl: "Git",
    deployment: "Vercel",
    analytics: "Google Analytics"
  }
};

This combination gave us the flexibility to build custom solutions while maintaining excellent performance and developer productivity.

Implementation Details

Authentication System

We implemented a custom authentication flow using Firebase Authentication with a bespoke frontend experience:

• Clean, on-site email/password login flow (no redirects)
• Role-based access control for members vs. admins
• Persistent sessions for a seamless user experience
• Profile customization options for members

The authentication system was designed to keep users within the Apres brand experience throughout the entire process—maintaining the immersive feel of the platform while handling thousands of user accounts securely.

Custom E-commerce Solution

Rather than using a pre-built e-commerce platform, we created a custom solution that integrated directly with Stripe:

// Simplified snippet from checkout-handler.js
async function createCheckoutSession(items, customerId) {
  const lineItems = items.map(item => ({
    price_data: {
      currency: 'usd',
      product_data: {
        name: item.name,
        images: [item.image],
        metadata: {
          productId: item.id
        }
      },
      unit_amount: item.price * 100,
    },
    quantity: item.quantity,
  }));

  // Create Stripe checkout session with custom success/cancel routes
  const session = await stripe.checkout.sessions.create({
    customer: customerId,
    payment_method_types: ['card'],
    line_items: lineItems,
    mode: 'payment',
    success_url: `${process.env.DOMAIN}/success?session_id={CHECKOUT_SESSION_ID}`,
    cancel_url: `${process.env.DOMAIN}/cart`,
    shipping_address_collection: {
      allowed_countries: ['US', 'CA'],
    },
  });

  return session;
}

This approach gave us complete control over:

• The checkout experience and flow
• Product presentation and categorization
• Inventory management
• Membership subscription processes
• Order fulfillment systems

Sanity CMS Integration

To empower Oliver to manage content without developer involvement, we implemented Sanity.io as a headless CMS:

The custom Sanity Studio interface allows easy content management for blog posts, product details, and photo galleries

The CMS integration included:

• Custom content models for blog posts, products, and photo galleries
• Specialized workflows for member-submitted photos
• Image optimization pipeline
• GROQ queries for efficient content delivery
• Preview functionality for content drafts
• User management allowing future editors to contribute content

Performance Optimization

Performance was critical for user retention, so we implemented several optimizations:

• Image Optimization: Leveraging Next.js Image component with automatic WebP conversion and responsive sizing
• Code Splitting: Reducing initial bundle size through component-level code splitting
• Incremental Static Regeneration: Combining the performance of static sites with the freshness of server rendering
• API Route Caching: Implementing stale-while-revalidate patterns for API responses
• Lazy Loading: Deferring non-critical resources until needed

Results & Impact

The launch of the Apres Surf Club website marked a significant milestone for both the brand and our team. The platform now:

• Handles thousands of registered members
• Processes memberships and merchandise sales seamlessly
• Provides Oliver with complete content control
• Maintains sub-2 second load times despite rich content
• Authentically embodies the brand identity we created together

Before long, Après Surf sessions became a social phenomena in San Diego. Associated with surfing, making new friends, and a certified good time, 'going to Après' became a thing.

The digital platform we built has become an extension of this movement, supporting a community that "celebrates community, having a good time, and leaving a positive impact on the surf world at large."

Key Lessons & Takeaways

This project reinforced several important principles:

• Brand development is foundational: Starting with a collaborative brand creation process established a strong identity that informed every technical decision.
• Custom solutions provide flexibility: Building from scratch allowed us to tailor every aspect of the experience to Apres Surf Club's unique needs.
• Performance matters: The investment in optimization techniques directly translated to user engagement and conversion rates.
• Empowering clients is crucial: The Sanity CMS integration meant Oliver could maintain the platform's freshness without developer dependency.
• Community platforms need room to grow: Our architectural decisions with Firebase and Firestore were made with scaling in mind as the community continues to expand.

Conclusion

The Apres Surf Club website represents the kind of project we love most at JJH Digital—one that combines technical excellence with meaningful brand storytelling. By building custom solutions rather than relying on off-the-shelf components, we created a digital platform that truly feels like an extension of the Apres Surf Club experience. For other brands looking to build community-centered platforms, this project demonstrates the value of a tailored approach that prioritizes both technical performance and authentic brand expression.