Skip to content

Quick Start

Get up and running with Petfolio development in minutes.

Development Server

Start the development server for the main application:

npx nx serve petfolio-business

The app will be available at http://localhost:4200

!!! tip "Hot Reload" Changes to source files will automatically reload the browser.

Common Commands

Development

# Start the main app
npx nx serve petfolio-business

# Start Storybook
npx nx storybook ui-component-library

# Start documentation site
npx nx serve petfolio-docs

# Build for production
npx nx build petfolio-business

# Build all projects
npx nx run-many --target=build --all

# Build only affected projects
npx nx affected:build

# Run all tests
npx nx run-many --target=test --all

# Run tests for specific project
npx nx test ui-component-library

# Run e2e tests
npx nx e2e petfolio-ui-tests

# Test only affected projects
npx nx affected:test

# Lint all projects
npx nx run-many --target=lint --all

# Lint specific project
npx nx lint petfolio-business

# Auto-fix issues
npx nx lint petfolio-business --fix

Project Structure

petfolio-fe/
├── apps/
│   ├── petfolio-business/      # Main Next.js app
│   ├── petfolio-ui-tests/       # Playwright e2e tests
│   └── petfolio-docs/           # MkDocs documentation
├── libs/
│   ├── ui-component-library/    # Shared React components
│   └── util-global-theme/       # MUI theme utilities
├── tools/                       # Build scripts
├── .github/                     # CI/CD workflows
└── nx.json                      # Nx configuration

Monorepo Workflow

1. Create a Feature Branch

git checkout -b feature/my-new-feature

2. Make Changes

Edit files in the appropriate project:

# For UI components
code libs/ui-component-library/src/lib/atoms/Button/Button.tsx

# For app pages
code apps/petfolio-business/src/app/page.tsx

3. Test Your Changes

# Run affected tests
npx nx affected:test

# Run affected lint
npx nx affected:lint

4. Build and Verify

# Build affected projects
npx nx affected:build

5. Commit and Push

git add .
git commit -m "feat: add new feature"
git push origin feature/my-new-feature

6. Create Pull Request

The CI pipeline will automatically:

  • ✅ Lint your code
  • ✅ Run tests
  • ✅ Build your changes
  • ✅ Scan for security vulnerabilities

Working with the Component Library

View Components in Storybook

npx nx storybook ui-component-library

Open http://localhost:4400 to browse components.

Add a New Component

# Create component directory
mkdir -p libs/ui-component-library/src/lib/atoms/NewComponent

# Create component files
touch libs/ui-component-library/src/lib/atoms/NewComponent/NewComponent.tsx
touch libs/ui-component-library/src/lib/atoms/NewComponent/NewComponent.spec.tsx
touch libs/ui-component-library/src/lib/atoms/NewComponent/NewComponent.stories.tsx

Example component:

NewComponent.tsx
import { FC } from 'react';

export interface NewComponentProps {
  label: string;
}

export const NewComponent: FC<NewComponentProps> = ({ label }) => {
  return <div>{label}</div>;
};

Don't forget to export it from libs/ui-component-library/src/index.ts:

export * from './lib/atoms/NewComponent/NewComponent';

Running Documentation Locally

Start the MkDocs development server:

cd apps/petfolio-docs
mkdocs serve

Or using Nx:

npx nx serve petfolio-docs

Visit http://localhost:8000 to view the docs.

Docker Development

Build and run the app in Docker:

# Build Docker image
docker build -f apps/petfolio-business/Dockerfile -t petfolio-business .

# Run container
docker run -p 4200:4200 petfolio-business

Next Steps