npm package: @ofi-summer-ai/create-mark
Description: Scaffold a complete AI-powered marketing platform — React 19 + Vite + TypeScript + Tailwind CSS 4
Latest version: 1.1.0

# `@ofi-summer-ai/create-mark`

[![npm version](https://img.shields.io/npm/v/@ofi-summer-ai/create-mark)](https://www.npmjs.com/package/@ofi-summer-ai/create-mark)
[![license](https://img.shields.io/badge/license-MIT-blue)](LICENSE)
[![node](https://img.shields.io/badge/node-%3E%3D18-green)](https://nodejs.org)

> 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.

```bash
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`](https://github.com/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

```bash
# 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

```bash
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:

```bash
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](https://www.npmjs.com/package/@ofi-summer-ai/mark-ui)
- **Documentation:** [github.com/OFI-Summer-AI/mark-ui](https://github.com/OFI-Summer-AI/mark-ui/tree/main/docs)
- **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](https://github.com/OFI-Summer-AI/mark-frontend-templates)

---

## License

MIT — [OFI Summer AI](https://github.com/OFI-Summer-AI)