This page covers the environment setup for working on Wupxy Docs and Wupxy Portfolio. Both projects run on Node.js and deploy to Vercel.

Required tools

ToolMinimum versionPurpose
Node.js18Runtime for both projects
npm9+Package management
Git2.xVersion control
VS CodeLatestEditor (recommended)

Node.js setup

Install Node.js 18 or newer. Use nvm to manage versions:
# Install nvm (macOS/Linux)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh | bash

# Install and use Node 20
nvm install 20
nvm use 20

# Verify
node --version
npm --version

VS Code extensions

Install these for the best experience with this workspace:
  • MDX (unifiedjs.vscode-mdx) — syntax highlighting and autocompletion for .mdx files
  • Prettier (esbenp.prettier-vscode) — consistent formatting
  • Tailwind CSS IntelliSense (bradlc.vscode-tailwindcss) — for the portfolio project
  • TypeScript (built-in) — type checking in the portfolio

Workspace structure

The workspace is a monorepo at /Users/wupxy/WORK/Code/website/wupxy-workspace/:
wupxy-workspace/
├── wupxy-docs/        # Mintlify docs → docs.wupxy.my.id
├── wupxy-portfolio/   # Next.js portfolio → wupxy.my.id
└── package.json       # Root workspace scripts

Running the projects

From the workspace root:
# Run docs locally
npm run dev:docs      # alias: cd wupxy-docs && npx mintlify dev

# Run portfolio locally
npm run dev:portfolio # alias: cd wupxy-portfolio && npm run dev

# Build both
npm run build

# Validate docs links
npm run validate:docs

# Deploy (requires Vercel CLI)
npm run deploy:docs
npm run deploy:portfolio
Or from within each project folder:
# From wupxy-docs/
npx mintlify dev
npm run build
npm run validate

# From wupxy-portfolio/
npm run dev
npm run build
npm run lint

Git workflow

This workspace uses a single git repository for both projects. Standard workflow:
git checkout -b feat/my-change
# make changes
git add [specific files]
git commit -m "feat: short description"
git push origin feat/my-change
# open PR or deploy directly
Use git add [specific files] rather than git add . to avoid accidentally staging unrelated changes from the other project’s build artifacts.

Environment variables

Neither project requires environment variables for local development. For production deployments on Vercel, each project has its own environment variable scope set in the Vercel dashboard.

AI Tools Overview

Tools used for AI-assisted development: Claude, OpenClaw, and Codex.