Home / Projects / Mobelaris

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

Key Dependencies

🌍 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

🏗 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

Custom Components

Performance Features

🛒 E-commerce Features

Shopping Experience

Product Management

Payment Integration

🔧 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

Environment Variables

Deployment

📊 Analytics & Marketing

Tracking & Analytics

SEO & Marketing

Campaign Management

🔒 Security & Performance

Security Features

Performance Optimizations

📱 Mobile & Accessibility

Mobile Features

Accessibility

🔄 Content Workflow

TinaCMS Integration

Content Types

🚀 Getting Started

Prerequisites

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

Technical Improvements