websitebuilder/QUICKSTART.md

# MoreMinimore SAAS - Quick Start Guide

## Overview

This guide helps you get started with the MoreMinimore SAAS transformation project.

---

## Prerequisites

Before starting, ensure you have:

- **Node.js** >= 20 installed
- **PostgreSQL** >= 16 installed
- **Redis** >= 7 installed
- **Git** installed
- **npm** or **yarn** package manager
- **Python** 3.x (for UI/UX Pro Max)
- **Gitea** instance (self-hosted or cloud)
- **Easypanel** API access
- **Stripe** account (for billing)

---

## Getting Started

### 1. Clone the Repository

```bash
git clone https://github.com/kunthawat/moreminimore-vibe.git
cd moreminimore-vibe
```

### 2. Review Documentation

Read the following documents in the `Websitebuilder/` folder:

1. **SPECIFICATION.md** - Complete technical specification
2. **TASKS.md** - Detailed task breakdown
3. **QUICKSTART.md** - This file

### 3. Understand the Architecture

Key architectural decisions:

- **Platform**: Next.js 15 web application (removing Electron)
- **Database**: PostgreSQL (migrating from SQLite)
- **Cache**: Redis
- **Authentication**: Custom JWT with role-based access control
- **Code Storage**: PostgreSQL + Gitea backup
- **Deployment**: Easypanel API integration
- **Billing**: Stripe integration

### 4. Set Up Development Environment

#### 4.1 Install Dependencies

```bash
npm install
```

#### 4.2 Set Up PostgreSQL

```bash
# Create database
createdb moreminimore

# Or using psql
psql -U postgres
CREATE DATABASE moreminimore;
\q
```

#### 4.3 Set Up Redis

```bash
# Start Redis server
redis-server

# Test connection
redis-cli ping
# Should return: PONG
```

#### 4.4 Configure Environment Variables

Create a `.env.local` file:

```env
# Database
DATABASE_URL=postgresql://postgres:password@localhost:5432/moreminimore
REDIS_URL=redis://localhost:6379

# Authentication
JWT_SECRET=your-super-secret-jwt-key-change-this
JWT_REFRESH_SECRET=your-super-secret-refresh-key-change-this

# AI Providers (optional - users can add their own)
OPENAI_API_KEY=sk-...
ANTHROPIC_API_KEY=sk-ant-...
GOOGLE_API_KEY=...

# Easypanel (will be provided later)
EASYPANEL_API_KEY=your-easypanel-api-key
EASYPANEL_API_URL=https://panel.moreminimore.com/api

# Gitea
GITEA_API_URL=https://gitea.moreminimore.com/api/v1
GITEA_TOKEN=your-gitea-token

# Stripe (will be provided later)
STRIPE_SECRET_KEY=sk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...
STRIPE_PRICE_ID_FREE=price_...
STRIPE_PRICE_ID_PRO=price_...
STRIPE_PRICE_ID_ENTERPRISE=price_...

# Email (optional)
RESEND_API_KEY=re_...

# Application
NEXT_PUBLIC_APP_URL=http://localhost:3000
NEXT_PUBLIC_API_URL=http://localhost:3000/api
```

#### 4.5 Run Database Migrations

```bash
# Generate migrations
npm run db:generate

# Push schema to database
npm run db:push
```

#### 4.6 Start Development Server

```bash
npm run dev
```

Visit `http://localhost:3000` to see the application.

---

## Development Workflow

### Phase 1: Foundation (Weeks 1-4)

Start with Phase 1 tasks from `TASKS.md`:

1. **Project Setup**

   - Initialize Next.js project
   - Set up folder structure
   - Install dependencies

2. **Database Setup**

   - Set up PostgreSQL
   - Configure Drizzle ORM
   - Create database schema

3. **Authentication System**

   - Implement password hashing
   - Implement JWT tokens
   - Create authentication APIs
   - Create authentication middleware

4. **User Management**

   - Create user profile APIs
   - Create admin user APIs
   - Create user management UI

5. **CI/CD Pipeline**
   - Set up GitHub Actions
   - Set up automated testing

### Phase 2-9: Follow the Task Breakdown

Continue with the remaining phases as outlined in `TASKS.md`.

---

## Key Concepts

### User Roles

- **Admin**: Full system control (you)
- **Co-Admin**: Global settings and AI model management (your employees)
- **Owner**: Customer who controls their projects
- **User**: Customer's employees with permissions set by Owner

### Organization Structure

```
Organization (Owner)
├── Projects
│   ├── Project 1
│   ├── Project 2
│   └── Project 3
└── Members
    ├── Member 1 (Admin)
    ├── Member 2 (Member)
    └── Member 3 (Viewer)
```

### Deployment Flow

```
User develops in MoreMinimore
    ↓
Click "Deploy to Easypanel"
    ↓
MoreMinimore commits to Gitea
    ↓
MoreMinimore calls Easypanel API
    ↓
Easypanel creates database + app
    ↓
Easypanel pulls code from Gitea
    ↓
Application is live
```

---

## Common Commands

### Development

```bash
# Start development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

# Run tests
npm test

# Run tests in watch mode
npm run test:watch

# Run E2E tests
npm run e2e
```

### Database

```bash
# Generate migrations
npm run db:generate

# Push schema to database
npm run db:push

# Open Drizzle Studio
npm run db:studio
```

### Code Quality

```bash
# Run linter
npm run lint

# Fix linting issues
npm run lint:fix

# Format code
npm run prettier

# Check formatting
npm run prettier:check
```

### TypeScript

```bash
# Check TypeScript compilation
npm run ts

# Check main process
npm run ts:main

# Check worker processes
npm run ts:workers
```

---

## Project Structure

```
moreminimore-vibe/
├── Websitebuilder/          # SAAS transformation documents
│   ├── SPECIFICATION.md     # Complete technical specification
│   ├── TASKS.md            # Detailed task breakdown
│   └── QUICKSTART.md       # This file
├── src/
│   ├── app/                # Next.js App Router pages
│   ├── components/         # React components
│   ├── lib/                # Utility functions
│   ├── services/           # Business logic services
│   ├── db/                 # Database schema and queries
│   ├── hooks/              # Custom React hooks
│   ├── types/              # TypeScript type definitions
│   └── styles/             # Global styles
├── drizzle/                # Database migrations
├── public/                 # Static assets
├── tests/                  # Test files
└── package.json            # Project dependencies
```

---

## Important Notes

### Removing "dyad" Branding

The original codebase contains "dyad" branding that needs to be replaced with "moreminimore". This will be done in Phase 7.

### Removing External Services

The following external services will be removed in Phase 7:

- Supabase
- Neon
- Vercel
- Electron

### UI/UX Pro Max Integration

UI/UX Pro Max is an AI skill for design intelligence. It will be integrated in Phase 3.

### Easypanel API Details

Easypanel API details will be provided when you're ready to implement Phase 4.

### Gitea Integration

Gitea will be used for code backup and version control. You'll need a self-hosted Gitea instance.

---

## Getting Help

### Documentation

- **SPECIFICATION.md** - Complete technical specification
- **TASKS.md** - Detailed task breakdown
- **README.md** - Original project README

### Questions?

If you have questions:

1. Check the documentation first
2. Review the task breakdown
3. Ask for clarification on specific tasks
4. Provide Easypanel API details when ready

---

## Next Steps

1. ✅ Review all documentation in `Websitebuilder/`
2. ✅ Set up development environment
3. ✅ Start with Phase 1 tasks
4. ✅ Follow the task breakdown in `TASKS.md`
5. ✅ Ask for Easypanel API details when ready for Phase 4

---

## Progress Tracking

Use the task checklist in `TASKS.md` to track progress:

- [ ] Phase 1: Foundation
- [ ] Phase 2: Core Features
- [ ] Phase 3: UI/UX Pro Max Integration
- [ ] Phase 4: Easypanel Integration
- [ ] Phase 5: Gitea Integration
- [ ] Phase 6: Billing & Subscription
- [ ] Phase 7: Migration & Cleanup
- [ ] Phase 8: Testing & Optimization
- [ ] Phase 9: Deployment & Launch

---

**Document Version**: 1.0
**Last Updated**: January 19, 2026
**Author**: MoreMinimore Development Team