Quick Start
Get Portfolio OS up and running in 10 minutes
Quick Start Guide
Get Portfolio OS running on your local machine in just a few minutes. This guide will walk you through the essential setup steps.
Note:
Estimated Time: 10-15 minutes to have your development environment fully operational.
What You'll Build
Portfolio OS is a production-ready monorepo that includes:
Public-facing portfolio, blog, and projects showcase
Content management and analytics dashboard
Reusable UI components, utilities, and integrations
Prerequisites Checklist
Before you begin, ensure you have:
- Node.js 18+ installed (Download)
- PNPM package manager (Installation Guide)
- Git for version control
- A code editor (VS Code recommended)
Note:
Already have the prerequisites? Skip to Installation Steps below.
Installation Steps
Clone the Repository
git clone https://github.com/jschibelli/portfolio-os.git
cd portfolio-os
Install Dependencies
pnpm install
This will install all packages across the monorepo using PNPM workspaces.
Setup Environment Variables
# Copy environment templates
cp apps/site/.env.example apps/site/.env.local
cp apps/dashboard/.env.example apps/dashboard/.env.local
Edit the .env.local files with your API keys. See Environment Configuration for details.
Generate Prisma Client
cd apps/dashboard
pnpm prisma generate
cd ../..
This generates the TypeScript types for database access in the dashboard.
Start Development Servers
pnpm dev
Both apps will start in parallel:
- Site: http://localhost:3000
- Dashboard: http://localhost:3001
Note:
🎉 Success! Your Portfolio OS development environment is ready. Open your browser to see the apps running.
Next Steps
Now that you have Portfolio OS running, explore these guides:
Learn the basics by building your first feature
Understand how the system is structured
Configure the multi-agent development system
Common Issues
Note:
Port Already in Use? If ports 3000 or 3001 are busy, stop the conflicting process or change ports in next.config.js.
Having trouble? Check our Troubleshooting Guide or see detailed Installation & Prerequisites.
Available Scripts
| Command | Description |
|---|---|
pnpm dev | Start all apps in development mode |
pnpm build | Build all packages and apps for production |
pnpm lint | Run ESLint across the workspace |
pnpm test | Run all test suites |
pnpm typecheck | Type check all TypeScript code |
Note:
For a deeper dive into the tech stack, architecture patterns, and development workflow, continue to the Developer Guide.