Tidehaus Online Surf Shop
A premium surf gear and beachwear e-commerce platform designed as a concept project, creating a high-end, mobile-first shopping experience.
Figma
Illustrator
Photoshop
Cursor
Context
Tidehaus is a premium surf gear and beachwear e-commerce platform designed as a concept project. The goal was to create a high-end, mobile-first shopping experience while managing complex product variants like surfboard dimensions, wetsuit sizing, and accessories.
This project focused on design implementation, showcasing how thoughtful design paired with scalable technology can deliver a premium e-commerce experience. The dark theme provided a sleek aesthetic while making product photography stand out.
Design Direction
The design direction was centered on surf culture while maintaining a modern e-commerce standard. Key decisions included a dark theme for premium aesthetics, ocean-inspired color palette with crisp whites and green accents, and the Outfit font family for modern readability.
The layout system used a 4px spacing grid with card-based product layouts and reusable components. Micro-interactions included smooth hover effects, typography scaling, and subtle animations to enhance the user experience.
Design Highlights
Hero Section
Full-screen surf video with CTA to immerse users immediately.
Product Cards
Clean hover states, consistent ratios, quick-action buttons.
Product Details
Modal-based exploration with gallery and variant selection.
Micro-interactions
Smooth hover effects, typography scaling, subtle animations.
Key Design Elements
The interface showcases a modern e-commerce experience with intuitive navigation, product discovery, and seamless shopping interactions. Each screen demonstrates key user flows and design patterns that enhance the shopping experience.
Product Catalog
Clean product grid showcasing surf gear with clear pricing, categories, and visual hierarchy for easy browsing.
Product Detail Modal
Detailed product view with specifications, features, stock availability, and clear call-to-action for purchase.
Design & Development Stack
Design Tools
- • Figma for UI design
- • Illustrator & Photoshop for visuals
- • Cursor + ChatGPT for iteration
- • Framer Motion for interactive prototyping
Development Stack
- • Next.js 13+ (TypeScript)
- • Tailwind CSS for styling
- • Prisma with PostgreSQL
- • Cloudinary for image hosting
- • NextAuth.js for authentication
- • Vercel for deployment
Technical Approach
The build was grounded in a component-driven approach with a modern frontend + backend stack. The frontend used Next.js 13+ with TypeScript, Tailwind CSS for styling, and Framer Motion for animations.
The backend utilized Prisma with PostgreSQL for database management, Cloudinary for scalable image hosting, and NextAuth.js for authentication. The entire application was deployed on Vercel for optimal performance.
Next.js
Frontend Framework
Prisma
ORM & Database
Cloudinary
Image Hosting
PostgreSQL
Database
Key Technical Challenges
Product Variants
Created a flexible schema and UI to handle surfboard dimensions, wetsuit sizes, and accessories.
Image Hosting
Learned Cloudinary integration to store and optimize product media efficiently.
Admin Dashboard
Built intuitive CRUD forms with validation and preview to simplify product management.
Project Outcomes
Key Achievements
This project demonstrated how thoughtful design paired with scalable technology can deliver a premium e-commerce experience. It delivered a full-stack e-commerce concept showcasing premium UI/UX while strengthening React, TypeScript, and API integration skills.
Learning Outcomes
The project provided valuable experience in designing with scalability in mind through reusable UI components, learning Cloudinary integration for image management, and building comprehensive admin dashboards for product management.
Future Opportunities
Potential enhancements include advanced filtering and personalization features, AR product visualization, and expansion into a dedicated mobile app for an even more immersive shopping experience.
Desktop & Mobile Views
The Tidehaus experience is optimized for both desktop and mobile users, ensuring a seamless shopping experience across all devices with responsive design and touch-friendly interactions.
