Skip to main content

​
Development Server

The André Ruperto Portfolio uses a monorepo structure with a React frontend and Express backend that run concurrently during development.

​
Quick Start

1

Start both frontend and backend

Run the full development environment with a single command:
npm run deploy:local
This uses concurrently to start both servers:
  • Frontend (Vite): http://localhost:8080
  • Backend (Express): http://localhost:3001
The frontend automatically proxies API requests to the backend.
2

Access the application

Open your browser and navigate to:
http://localhost:8080

​
Individual Server Commands

You can also run the frontend and backend separately:

​
Frontend Development

npm run dev
The frontend server features:
  • Hot Module Replacement (HMR)
  • Fast refresh with React SWC
  • TypeScript type checking
  • ESLint integration
  • Port: 8080

​
Backend Development

npm run backend:dev
The backend server features:
  • Auto-restart with --watch flag
  • Express.js API endpoints
  • Prisma database integration
  • CORS enabled for frontend
  • Port: 3001

​
Available Scripts

​
Frontend Scripts

CommandDescription
npm run devStart Vite development server on port 8080
npm run buildBuild for production
npm run build:devBuild for development with source maps
npm run build:prodBuild for production (optimized)
npm run previewPreview production build locally
npm run lintRun ESLint on all files
npm testRun tests with Vitest
npm run test:watchRun tests in watch mode
npm run cleanClean build artifacts and cache
npm run copy:imagesCopy images to build directory

​
Backend Scripts

CommandDescription
npm run backend:devStart backend in development mode
npm run backend:startStart backend in production mode
npm run backend:installInstall backend dependencies
npm run backend:seedSeed database with sample data
npm run backend:migrateRun Prisma migrations
npm run backend:generateGenerate Prisma client

​
Combined Scripts

CommandDescription
npm run deploy:localRun frontend + backend concurrently
npm run deploy:prodBuild frontend for production

​
Development Workflow

​
Making Changes

1

Frontend changes

Edit files in src/ directory:
  • src/components/ - React components
  • src/pages/ - Page components
  • src/hooks/ - Custom React hooks
  • src/lib/ - Utilities and helpers
Changes will hot reload automatically.
2

Backend changes

Edit files in backend/src/ directory:
  • backend/src/server.js - Express server
  • backend/src/routes/ - API routes
  • backend/prisma/schema.prisma - Database schema
The server will auto-restart on changes.
3

Database schema changes

When modifying the Prisma schema:
# 1. Edit backend/prisma/schema.prisma
# 2. Create and apply migration
npm run backend:migrate

# 3. Regenerate Prisma client
npm run backend:generate

​
Testing

​
Run Tests

npm test
The project uses:
  • Vitest - Test runner
  • React Testing Library - Component testing
  • jsdom - Browser environment simulation

​
Linting

Run ESLint to check code quality: 
npm run lint
ESLint will check:
  • TypeScript syntax
  • React hooks rules
  • Code formatting
  • Unused imports

​
Development Tools

​
Vite Features

  • Fast HMR: Changes reflect instantly
  • Path Aliases: Use @/ to import from src/
  • TypeScript: Full TypeScript support
  • SWC: Ultra-fast React refresh

​
Debugging

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src"
    }
  ]
}

​
Git Hooks

The project uses Husky for git hooks:
  • Pre-commit: Runs ESLint and tests on staged files
  • Lint-staged: Only lints changed files
"lint-staged": {
  "*.{ts,tsx}": [
    "eslint --fix",
    "vitest related --run"
  ]
}

​
Troubleshooting

​
Port already in use

If port 8080 or 3001 is already in use: 
# Find process using port
lsof -i :8080
lsof -i :3001

# Kill process
kill -9 <PID>

​
Database connection issues

Verify PostgreSQL is running and credentials are correct: 
# Test connection
psql -U postgres -d portfolio

# Check backend/.env
cat backend/.env | grep DATABASE_URL

​
Module not found errors

Reinstall dependencies: 
npm run clean
npm install
npm run backend:install

​
Prisma issues

Reset Prisma client: 
cd backend
rm -rf node_modules/.prisma
npm run generate

​
Next Steps

Build docs developers (and LLMs) love

Get started for freeTalk to us