https://github.com/vertocode/cloudmerce

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.
https://github.com/vertocode/cloudmerce

nuxt typescript vee-validate vue vuetify zod

Last synced: 19 days ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/vertocode/cloudmerce
• Owner: vertocode
• License: other
• Created: 2024-10-23T00:01:13.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-10-16T01:15:42.000Z (3 months ago)
• Last Synced: 2025-10-17T01:20:57.960Z (3 months ago)
• Topics: nuxt, typescript, vee-validate, vue, vuetify, zod
• Language: Vue
• Homepage: https://cloudmerce.vertocode.com
• Size: 8.68 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          


  



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:

```shell

git clone git@github.com:vertocode/cloudmerce.git

cd cloudmerce

bun install

```

Fire up the dev server:

```shell

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:

```env

# 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

```bash

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.