README.md

A white-label e-commerce platform built for creating and managing online stores. This is the frontend application that handles the customer-facing storefront and admin dashboard.

Demo

What is this?

Cloudmerce is a full-featured e-commerce system that lets you run multiple online stores from a single codebase. Think of it as your own customizable shopping platform where each store can have its own branding, products, and settings.

The platform handles everything you'd expect from a modern e-commerce site - product catalogs, shopping carts, order management, and payment processing. It's built to be fast, scalable, and easy to customize.

Tech Stack

Built with modern web technologies:

• Nuxt 3 - The Vue.js framework that powers the whole thing
• Vue 3 - Composition API for reactive components
• Vuetify 3 - Material Design components for a clean UI
• VeeValidate + Zod - Form validation with schema validation
• TypeScript - For type safety and better developer experience
• SCSS - CSS with superpowers for styling
• Tiptap - Rich text editor for product descriptions and content
• EmailJS - Contact form handling
• Stripe - Credit card payment processing
• Mercado Pago - Split payment support for marketplace functionality
• Asaas - PIX payment integration for Brazilian market

Getting Started

Clone the repo and install dependencies:

git clone git@github.com:vertocode/cloudmerce.git
cd cloudmerce
bun install

Fire up the dev server:

bun dev

That's it. Your local server should be running at http://localhost:3000

Project Structure

cloudmerce/
├── components/          # Vue components
│   ├── Admin/          # Admin-specific components
│   ├── Md/             # Main design system components
│   ├── Page/           # Page section components
│   └── Vee/            # VeeValidate form components
├── composables/         # Reusable composition functions
├── layouts/             # App layouts (default, admin, no-container)
├── middleware/          # Route middleware (auth guards)
├── pages/               # File-based routing pages
│   ├── admin/          # Admin dashboard pages
│   └── orders/         # Order management pages
├── plugins/             # Nuxt plugins
├── public/              # Static files
├── styles/              # Global styles and SCSS variables
├── types/               # TypeScript type definitions
├── assets/              # Images, fonts, etc
└── nuxt.config.ts       # Nuxt configuration

Environment Variables

Create a .env file in the root directory with the following variables:

# API Configuration
API_URL=your_api_url

# Stripe
STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key
STRIPE_SECRET_KEY=your_stripe_secret_key

# EmailJS
EMAILJS_SERVICE_ID=your_emailjs_service_id
EMAILJS_TEMPLATE_ID=your_emailjs_template_id
EMAILJS_USER_ID=your_emailjs_user_id

# Mercado Pago
MERCADO_PAGO_CLIENT_ID=your_mercado_pago_client_id

Main Features

For Customers:

• Browse products with filters and search
• Product catalog with image galleries and zoom functionality
• Add items to cart with variant selection (colors, sizes, custom options)
• Multiple payment methods: Credit Card (Stripe), PIX (Asaas), Mercado Pago
• Real-time order tracking and history
• User authentication with email verification
• Password reset functionality
• Responsive design optimized for mobile and desktop

For Admins:

• Full product management (CRUD operations) with CSV import/export
• Product variants with colors, sizes, and custom options
• Rich text editor for product descriptions
• Product validation system with status indicators
• Order management with status updates and email notifications
• Customer information display in order details
• Financial dashboard with Mercado Pago split payment tracking
• Store whitelabel customization:
  • Custom colors, logos, and branding
  • Custom homepage layouts with drag-and-drop sections
  • Custom page builder with rich content blocks
  • Navigation menu configuration
  • Device-specific visibility controls (mobile/desktop)
• User role management (admin/superadmin)
• Cart management and cleanup tools
• Real-time order status updates sent to customers
• Mercado Pago OAuth integration for marketplace features

Key Technical Features

Payment Processing:

• Stripe integration for international credit card payments
• Mercado Pago with split payment support for marketplace scenarios
• Asaas integration for PIX payments (Brazil)
• QR code generation for PIX payments
• Automatic order status updates based on payment status

White-label System:

• Multi-tenant architecture supporting multiple stores
• Per-store customization (colors, logos, branding)
• Custom page builder with draggable sections:
  • Banner sections with optional links
  • Product carousels with manual product selection
  • Rich text content blocks
  • Product listing sections with filters
• Device-specific content visibility (mobile/desktop)
• Custom navigation menu configuration

Product Management:

• Flexible product variant system (colors, sizes, text fields, numbers)
• Color variants with hex code support
• Image galleries with multiple images per product
• Stock management (limited, unlimited, out of stock)
• Product validation system with real-time status indicators
• CSV import/export for bulk operations
• Product type categorization

User Experience:

• Server-side rendering (SSR) for better SEO and performance
• Responsive design with mobile-first approach
• Image zoom and gallery navigation
• Quick shop modal for products with variants
• Real-time cart updates
• Email notifications for order status changes
• Contact form with EmailJS integration

Scripts

bun dev           # Start development server
bun build         # Build for production
bun preview       # Preview production build
bun lint          # Run ESLint
bun lint:fix      # Fix ESLint errors automatically

License

Custom license - commercial use restricted to the author, Everton Vanoni Fernandes. Check the LICENSE file for full details.