Architecture Technique

Stack Technologique

• Frontend: React 18, Remix 2.16, Shopify Polaris 12.0
• Backend: Node.js, Remix Server-Side Rendering
• Base de données: PostgreSQL avec Prisma ORM 6.2
• Plateforme: Shopify App avec App Bridge 4.1
• Extension: Shopify App Embed pour injection frontend
• Styling: CSS Modules, Polaris Design System
• Build: Vite 6.2, TypeScript 5.2

Structure du Projet

badge-xpress/

├── app/                          # Application Remix principale

│   ├── components/               # Composants React réutilisables

│   │   ├── BadgeEditor.tsx       # Éditeur de badges principal

│   │   ├── BadgePreview.tsx      # Aperçu des badges

│   │   ├── IconLibrary.tsx       # Bibliothèque d’icônes

│   │   ├── FontSelector.tsx      # Sélecteur de polices

│   │   ├── TextEditor.tsx        # Éditeur de texte

│   │   ├── MobilePreview.tsx     # Aperçu mobile

│   │   ├── DesktopPreview.tsx   # Aperçu desktop

│   │   └── Layout.tsx            # Layout principal

│   ├── routes/                   # Routes Remix

│   │   ├── app.tsx               # Layout principal de l’app

│   │   ├── app._index.tsx        # Dashboard principal

│   │   ├── app.badges.tsx        # Gestion des badges

│   │   ├── app.additional-features.tsx # Fonctionnalités avancées

│   │   ├── api.badges.tsx        # API badges

│   │   └── api.embed.tsx         # API pour l’extension

│   ├── services/                 # Services backend

│   │   ├── badge.server.ts       # Service badges

│   │   ├── additional-features.server.ts # Service fonctionnalités

│   │   ├── analytics.server.ts   # Service analytics

│   │   └── shop.server.ts        # Service boutique

│   ├── db.server.ts              # Configuration Prisma

│   └── shopify.server.ts         # Configuration Shopify

├── extensions/                   # Extensions Shopify

│   └── badge-xpress-app-embed/   # Extension App Embed

│       ├── assets/               # Scripts JavaScript

│       ├── blocks/               # Blocs Liquid

│       └── snippets/             # Snippets Liquid

├── prisma/                       # Configuration base de données

│   ├── schema.prisma             # Schéma Prisma

│   └── migrations/               # Migrations

└── public/                       # Assets statiques

    ├── brand-icons/              # Icônes de marques

    └── fonts/                    # Polices personnalisées