Home / Projects / 4orm4

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.