Apps & Packages

Overview of Portfolio OS applications and shared packages

Apps & Packages

Portfolio OS is organized as a monorepo with multiple applications and shared packages.

Applications

Site App

Public portfolio and blog at localhost:3000

Dashboard App

Admin interface at localhost:3001

Shared Packages

Reusable code across apps

UI Components

Component library

Architecture Overview

Application Matrix

App	Purpose	Port	Stack
Site	Public portfolio & blog	3000	Next.js, React, Tailwind
Dashboard	Admin CMS	3001	Next.js, Prisma, TipTap
Docs	Documentation	3002	Next.js, MDX

Package Overview

Core Packages

Package	Purpose	Size
`@mindware-blog/ui`	Shared React components	~50 components
`@mindware-blog/lib`	Business logic & services	~20 modules
`@mindware-blog/utils`	Utility functions	~15 functions
`@mindware-blog/db`	Prisma client & schema	Database layer
`@mindware-blog/hashnode`	Hashnode API client	GraphQL integration

Supporting Packages

Package	Purpose
`@mindware-blog/emails`	Email templates (Resend)
`@mindware-blog/tsconfig`	Shared TypeScript configs
`@mindware-blog/eslint-config-custom`	ESLint configuration

Getting Started

Running All Apps

# From repository root
pnpm dev

# All apps start in parallel
# Site: http://localhost:3000
# Dashboard: http://localhost:3001
# Docs: http://localhost:3002 (if configured)

Running Specific App

# Site only
pnpm dev --filter=@mindware-blog/site

# Dashboard only
pnpm dev --filter=@mindware-blog/dashboard

Development Workflow

Making Changes to Apps

# Navigate to app
cd apps/site

# Make changes
# Hot reload will update automatically

# Run tests
pnpm test

# Build
pnpm build

Making Changes to Packages

# Navigate to package
cd packages/ui

# Make changes to component
# All apps using this component will update

# Test package
pnpm test

# Typecheck
pnpm typecheck

Inter-Package Dependencies

Apps depend on packages, packages depend on each other:

// apps/site/package.json
{
  "dependencies": {
    "@mindware-blog/ui": "workspace:*",
    "@mindware-blog/lib": "workspace:*",
    "@mindware-blog/utils": "workspace:*",
    "@mindware-blog/hashnode": "workspace:*"
  }
}

// packages/ui/package.json
{
  "dependencies": {
    "@mindware-blog/utils": "workspace:*"
  }
}

Building for Production

# Build all apps and packages
pnpm build

# Build specific app
pnpm build --filter=@mindware-blog/site

# Build output
apps/site/.next/        # Next.js build
apps/dashboard/.next/   # Next.js build

Environment Variables

Each app has its own environment configuration:

apps/
├── site/
│   ├── .env.local          # Site environment
│   └── .env.example        # Template
├── dashboard/
│   ├── .env.local          # Dashboard environment
│   └── .env.example        # Template
└── docs/
    ├── .env.local          # Docs environment
    └── .env.example        # Template

See Environment Configuration for details.

Next Steps

Explore specific apps and packages:

Site App - Public portfolio
Dashboard App - Admin panel
Shared Packages - Package details
UI Components - Component library

Note:

For detailed package information, see Package System in the Developer Guide.

Authentication

Site App