@ofi-summer-ai/create-mark

Scaffold a complete AI-powered marketing platform in one command.

What is this?

create-mark is a project scaffolder — it creates a brand-new, fully configured marketing platform application for you. Think of it like create-react-app or create-next-app, but specifically built for the Mark marketing platform stack.

Run one command → get a complete, working project with auth, dashboard, AI chat, brand management, and a full design system already wired up.

pnpm create @ofi-summer-ai/mark my-marketing-app

When should you use this?

Use create-mark when you are starting a new project from scratch and want:

• A full marketing/analytics dashboard application
• An AI-powered content creation interface (chat, brand DNA, post creation)
• A social media management and performance tracking tool
• Any application that needs the complete Mark platform as its foundation

You do NOT need this if you already have a React project and just want to add individual UI components — for that, use @ofi-summer-ai/mark-ui instead.

create-mark vs mark-ui — which one do you need?

| | create-mark | mark-ui | |---|---|---| | What it does | Scaffolds a complete new application | Provides individual components | | Use when | Starting a new project from scratch | Adding components to an existing project | | Output | A full project directory | Importable React components | | Install | pnpm create @ofi-summer-ai/mark | pnpm add @ofi-summer-ai/mark-ui | | Includes | Everything below, pre-configured | 66 UI components + Tailwind CSS design tokens |

What you get

Running create-mark gives you a production-ready project with:

Application Screens

| Screen | Description | |--------|-------------| | Authentication | Login, register, JWT token auto-refresh | | Dashboard | KPI cards, area charts, top posts table, date range picker | | Content Creation Studio | AI chat interface, post builder, video creator | | Brand DNA | Extract and manage brand voice, color palette, tone, keywords | | Social Network Analytics | Per-platform metrics (Instagram, TikTok, Facebook, LinkedIn) | | Content Calendar | Month/week view with post scheduling |

Technical Foundation

| Layer | Technology | |-------|-----------| | Framework | React 19 + Vite 6 + TypeScript 5 | | Routing | React Router DOM 7 (lazy-loaded routes) | | Global state | Redux Toolkit (auth, brands, posts, chat) | | Server state | TanStack Query v5 (5 min stale, 10 min GC) | | Local state | Zustand (chat, post creator) | | Forms | React Hook Form + Zod validation | | UI Components | 66 components from @ofi-summer-ai/mark-ui | | Styling | Tailwind CSS 4 + shadcn/ui + Radix UI | | Animations | Framer Motion | | Charts | Recharts | | HTTP | Axios (Django client + n8n webhook client) | | Notifications | Sonner (toast) |

Pre-configured Architecture

src/
├── core/        # API clients, Redux store, routes, TanStack Query config
├── domains/     # Business logic (auth, creation-studio, dashboard, social-network)
├── modules/     # UI orchestration layer
└── shared/      # Reusable components (all from @ofi-summer-ai/mark-ui)

Design System

• Dark mode and light mode (class-based, toggle included)
• Material Design 3-inspired color tokens (--primary, --surface, --on-surface, etc.)
• Full CSS variable system — override any token to match your brand
• Responsive layout with collapsible sidebar

Quick Start

Prerequisites

• Node.js v18 or higher
• pnpm v10 or higher (npm install -g pnpm)

Create your project

# pnpm (recommended)
pnpm create @ofi-summer-ai/mark my-app

# npm
npm create @ofi-summer-ai/mark my-app

# yarn
yarn create @ofi-summer-ai/mark my-app

Configure and run

cd my-app

# Install dependencies
pnpm install

# Copy the environment file and fill in your API keys
cp .env.example .env

# Start the dev server
pnpm dev

Your app is now running at http://localhost:5173.

Environment Variables

After running create-mark, copy .env.example to .env and fill in these values:

| Variable | Required | Description | |----------|----------|-------------| | VITE_API_BASE_URL | Yes | Django backend URL (default: https://mark-backend-sk46.onrender.com) | | VITE_N8N_BASE_URL | Yes | n8n webhook URL for AI generation tasks | | VITE_SIA_BASE_URL | No | Proxy target for local dev |

Available Commands

Inside your generated project:

pnpm dev        # Start dev server with HMR at localhost:5173
pnpm build      # TypeScript compile + Vite production build
pnpm lint       # Run ESLint
pnpm preview    # Preview the production build locally

Component Library

All 66 UI components used in the generated project come from @ofi-summer-ai/mark-ui. They are pre-installed and configured — but if you ever need to use them individually or in another project, the component library is published separately.

• npm: npmjs.com/package/@ofi-summer-ai/mark-ui
• Documentation: github.com/OFI-Summer-AI/mark-ui
• Install in any project: pnpm add @ofi-summer-ai/mark-ui

Project Repository

The source code for this scaffolder and the template project:

• GitHub: github.com/OFI-Summer-AI/mark-frontend-templates

License

MIT — OFI Summer AI