Mobelaris

Live

mobelaris.com

🏪 Project Overview

Mobelaris is a multi-language e-commerce furniture storefront built with modern web technologies. It's a sophisticated online furniture retailer specializing in designer furniture with a focus on European markets.

🛠 Technical Stack

Core Technologies

Frontend Framework: Next.js 14.2.25 (App Router)
Backend: Medusa.js (Headless Commerce)
Language: TypeScript
Styling: TailwindCSS + DaisyUI
Content Management: TinaCMS
State Management: TanStack React Query
Payment: Stripe + PayPal integration

Key Dependencies

React 18 with modern hooks
Headless UI for accessible components
React Hook Form for form handling
Keen Slider for carousels
Meilisearch for search functionality
Sharp for image optimization
Supabase for additional backend services

🌍 Multi-Language & Localization

Supported Markets

The website supports 15+ European markets including:

Market	Locale	Language	Display Name
UK	`en`	English	United Kingdom
EU	`eu`	English	Euro
Germany	`de-de`, `de`	German	Germany
France	`fr-fr`, `fr`	French	France
Netherlands	`nl-nl`, `nl`	Dutch	Netherlands
Belgium	`nl-be`, `fr-be`	Dutch/French	Belgium (Dutch/French)
Austria	`de-at`, `en-at`	German/English	Austria (German/English)
Switzerland	`de-ch`	German	Switzerland (German)
Spain	`es-es`, `es`	Spanish	Spain
Italy	`it-it`, `it`	Italian	Italy
Sweden	`sv-se`, `se`	Swedish	Sweden
Norway	`no-no`, `no`	Norwegian	Norway

Internationalization Features

Locale-based routing (/[locale]/...)
Automatic locale detection and redirection
Translation management with JSON files
Region-specific content and pricing
Currency localization

🏗 Architecture & Structure

App Router Structure

src/app/[locale]/
├── (homepage)/          # Homepage routes
├── (marketing)/         # Marketing pages
├── (checkout)/          # Cart & checkout
├── (orders)/           # Order management
├── (account)/          # Customer account
├── (custom-page)/      # Custom content pages
├── products/           # Product catalog
├── category/           # Category pages
├── collections/        # Collection pages
├── cart/               # Shopping cart
├── customer/           # Customer portal
├── mobelarisblog/      # Blog section
├── instagram/          # Instagram feed
├── photocontest/       # Photo contest
├── ordertracking/      # Order tracking
├── reset-password/     # Password reset
├── sitemap/            # Sitemap generation
├── preview/            # Preview mode
├── 404/                # Error pages
├── @header/            # Header component
├── @footer/            # Footer component
├── @announcementBar/   # Announcement bar
├── @modals/            # Modal components
└── @adminbar/          # Admin bar

Content Management Structure

content/
├── category/           # Category definitions
├── collection/         # Collection content
│   ├── en/            # English collections
│   └── [other-langs]/ # Other languages
├── custom_page/        # Custom pages
├── home/              # Homepage content
├── page/              # Static pages
├── product/           # Product content
├── posts/             # Blog posts
└── store/             # Store configuration

Public Assets Structure

public/
├── _next_assets/       # Next.js assets
├── _next_tina/         # TinaCMS assets
├── fonts/             # Custom fonts
├── images/            # Image assets
│   ├── 2024-autumn/   # Seasonal campaigns
│   ├── 2024-black-friday/
│   ├── 2024-product-labels/
│   ├── 2024-winter/
│   ├── 2025-spring/
│   ├── 2025-summer/
│   ├── flags/         # Country flags
│   ├── new-year-sale/
│   ├── saleoff/
│   └── xmas-sale/
└── [other-assets]/

🎨 Design & UX

Styling Approach

TailwindCSS for utility-first styling
DaisyUI for component library
Custom design system with consistent theming
Responsive design with mobile-first approach
Dark/light theme support

Custom Components

Magic button with hover effects
Carousel components with Keen Slider
Modal system with DaisyUI
Form components with React Hook Form
Image lightbox for product galleries

Performance Features

Static generation for most pages
Image optimization with Next.js Image component
Lazy loading and code splitting
CDN integration for assets
Caching strategies for better performance

🛒 E-commerce Features

Shopping Experience

Product catalog with advanced filtering
Search functionality with Meilisearch
Shopping cart with persistent state
Checkout process with multiple payment options
Order tracking and management
Customer accounts with order history

Product Management

Product variants and options
Inventory management
Pricing strategies (regular, sale, seasonal)
Product categories and collections
Product reviews and ratings

Payment Integration

Stripe for card payments
PayPal for alternative payments
Multi-currency support
Secure checkout process

🔧 Development & Deployment

Build System

{
  "scripts": {
    "dev": "tinacms dev -c \"next dev -p 8000\"",
    "build": "tinacms build && next build",
    "build:locale": "tinacms build --local && next build",
    "start": "next start -p 8000",
    "lint": "next lint",
    "analyze": "ANALYZE=true next build"
  }
}

Configuration Files

next.config.js: Next.js configuration with image optimization, redirects, and rewrites
tina/config.ts: TinaCMS configuration for content management
tailwind.config.js: TailwindCSS configuration
package.json: Dependencies and scripts

Environment Variables

NEXT_PUBLIC_MEDUSA_BACKEND_URL: Medusa backend URL
NEXT_PUBLIC_MEDUSA_BACKEND_PROXY: Proxy configuration
NEXT_PUBLIC_ASSET_PREFIX_URL: Asset prefix for CDN
QUICKSHIP: Quick deployment mode

Deployment

Netlify deployment (based on netlify.toml)
Docker support (Dockerfile present)
Static site generation for performance
CDN integration for global delivery

📊 Analytics & Marketing

Tracking & Analytics

Google Analytics integration
GTM events for conversion tracking
Brevo for email marketing
Trustpilot reviews integration

SEO & Marketing

Structured data for products
Sitemap generation
RSS feeds for content
Social media integration
Instagram feed integration

Campaign Management

Seasonal campaigns (Autumn, Black Friday, Winter, Spring, Summer)
Sale banners and promotional content
Product labels for different markets
Countdown timers for limited offers

🔒 Security & Performance

Security Features

CSRF protection
Input validation
Secure payment processing
Environment variable management
Content Security Policy

Performance Optimizations

Static generation for content pages
Image optimization and lazy loading
Code splitting and tree shaking
Caching strategies
CDN delivery for assets
Bundle analysis capabilities

📱 Mobile & Accessibility

Mobile Features

Responsive design across all devices
Touch-optimized interactions
Mobile-specific image assets
Progressive Web App capabilities

Accessibility

WCAG compliance with Headless UI
Keyboard navigation support
Screen reader compatibility
Focus management for modals and forms

🔄 Content Workflow

TinaCMS Integration

Visual content editing
Real-time preview
Version control for content
Multi-language content management
Asset management with image optimization

Content Types

Hero blocks with countdown timers
Product pages with variants
Category pages with filtering
Collection pages with curated content
Custom pages with flexible layouts
Blog posts with markdown support

🚀 Getting Started

Prerequisites

Node.js 18+
Yarn package manager
Medusa backend running
TinaCMS account

Installation

# Clone the repository
git clone [repository-url]

# Install dependencies
yarn install

# Set up environment variables
cp .env.example .env.local

# Start development server
yarn dev

Development Commands

# Development with TinaCMS
yarn dev

# Build for production
yarn build

# Start production server
yarn start

# Lint code
yarn lint

# Analyze bundle
yarn analyze

📈 Future Enhancements

Planned Features

Advanced search with filters
Wishlist functionality
Product recommendations
Advanced analytics dashboard
Mobile app development
Voice search integration

Technical Improvements

Performance optimization for large catalogs
Advanced caching strategies
Micro-frontend architecture
GraphQL integration
Real-time inventory updates