4orm4

Metadata

• Type: E-commerce Platform
• Industry: Furniture & Home Decor
• Live URL: 4orm4.com
• Timeline: 2023
• Role: Lead Frontend Developer
• Team Size: Solo Developer
• Markets: EU, Scandinavia, Germany, France
• Stack: Next.js 15, Medusa, React 19, TypeScript
• Status: Production

Live

4orm4.com

Project Overview

This is a Next.js-based e-commerce storefront built on the Medusa headless commerce platform for "4orm4" - a furniture and home decor retailer specializing in modern, contemporary furniture and lighting.

Key Technologies & Architecture

Core Stack:

• Next.js 15 (App Router) with TypeScript
• Medusa (headless commerce engine)
• Tailwind CSS for styling
• Prisma with SQLite for database
• TinaCMS for content management
• React 19 with modern hooks

Payment & E-commerce:

• Stripe and PayPal payment integrations
• MeiliSearch for product search functionality
• Algolia search support (alternative)
• Cloudinary for image management

Additional Features:

• Google Tag Manager for analytics
• Microsoft Clarity for user behavior tracking
• Umami analytics
• React Query for data fetching
• DaisyUI component library

Project Structure

Dual Application Architecture:

1. Store Frontend (src/app/(store)/) - Customer-facing e-commerce site
2. Admin Panel (src/app/(admin)/) - Internal management tools

Store Features:

• Multi-region support (EU, Scandinavia, Germany, France, etc.)
• Product catalog with detailed furniture listings
• Shopping cart and checkout functionality
• Product galleries with interactive "shop the look" features
• Search functionality with filters
• Responsive design for mobile/desktop

Admin Features:

• Product management dashboard
• Gallery management with Cevoid integration
• Data crawling and synchronization tools
• Debug tools for development

Business Focus

The store specializes in:

• Designer furniture (chairs, tables, sofas, lighting)
• Contemporary and modern styles
• High-end materials (marble, velvet, leather, concrete)
• European design with direct factory pricing
• Residential and workplace furniture solutions

Key Integrations

• Cevoid for interactive product galleries
• Shopify data migration/sync
• Cloudinary for image optimization
• Multiple payment gateways
• Advanced search capabilities

Development Setup

The project uses:

• Yarn as package manager
• SQLite for local development
• Port 8000 for the frontend
• TinaCMS for content editing
• Static generation with Next.js

File Structure Highlights

designereditions-medusa-storefront/
├── src/
│   ├── app/
│   │   ├── (store)/          # Customer-facing store
│   │   │   ├── [locale]/     # Multi-language support
│   │   │   ├── _components/  # Store components
│   │   │   └── _context/     # Store context providers
│   │   └── (admin)/          # Admin panel
│   │       ├── _admin/       # Admin features
│   │       └── _debug/       # Debug tools
│   ├── lib/                  # Utility libraries
│   └── types/                # TypeScript definitions
├── prisma/                   # Database schema
├── scripts/                  # Utility scripts
└── store.config.json         # Store configuration

Supported Regions

The platform supports multiple European markets:

• EU (Euro)
• Sweden (sv-se)
• Germany (de-de, de-at, de-ch)
• Norway (no-no)
• France (fr-fr, fr-be)
• Netherlands (nl-nl, nl-be)
• Spain (es-es)
• Italy (it-it)

Content Management

• TinaCMS integration for visual content editing
• Dynamic content with Tina templates
• Shop the look galleries with interactive product tagging
• Multi-language content support

E-commerce Features

• Product catalog with detailed specifications
• Shopping cart with persistent state
• Checkout process with multiple payment options
• Order tracking and management
• Product recommendations
• Advanced search with filters and faceted navigation

Technical Highlights

• Server-side rendering with Next.js
• Static site generation for performance
• Image optimization with Cloudinary
• Responsive design with Tailwind CSS
• Type safety with TypeScript
• Database migrations with Prisma
• API routes for backend functionality

This is a sophisticated e-commerce platform that combines modern web technologies with a focus on high-end furniture retail, featuring both customer-facing and administrative interfaces with robust content management capabilities.