Boba Network Gateway

Quick Start

Prerequisites

• Node.js 18+
• pnpm 8+
• Make (optional, but recommended)

Installation

# Install dependencies
make install
# or
pnpm install

Development

# Start development server (staging)
make dev
# or
pnpm run dev:stage

# Start development server (production)
make dev-prod
# or
pnpm run dev:prod

Building

# Build for staging
make build
# or
pnpm run build:stage

# Build for production
make build-prod
# or
pnpm run build:prod

Testing

# Run tests
make test

# Run tests in watch mode
make test-watch

# Run tests with coverage
make test-coverage

Linting

# Run linter
make lint

# Fix linting issues
make lint-fix

Project Structure

src/
├── config/               # Configuration files
│   └── networks/        # Network-specific configurations
├── lib/                 # Core business logic
│   └── networks/       # Network-related logic
├── utils/              # Utility functions
├── components/         # Reusable components
│   ├── ui/            # Base UI components
│   ├── layout/        # Layout components
│   ├── forms/         # Form components
│   └── modals/        # Modal components
├── styles/            # Global styles
├── pages/             # Application pages
└── types/             # TypeScript types

Development Guidelines

Component Development

Base Components

All base UI components are in src/components/ui/. These follow our design system and include:

• Button
• Typography
• Card
• Modal
• Alert
• Toast

Component Guidelines

1. Use TypeScript for all components

2. Follow the component structure:

   // imports
   import * as React from 'react'
   import { cn } from '@/utils/class-merge'
   
   // types
   interface ComponentProps {
     // props
   }
   
   // component
   export const Component = React.forwardRef<HTMLElement, ComponentProps>((
     { prop1, prop2, className, ...props },
     ref
   ) => {
     return (
       // JSX
     )
   })
   
   // display name
   Component.displayName = 'Component'

3. Use proper prop types and validation

4. Include proper JSDoc comments

5. Add proper accessibility support

6. Add proper test coverage

Styling Guidelines

Colors

Use design system colors from tailwind.config.js:

colors: {
  primary: 'var(--primary)',
  secondary: 'var(--secondary)',
  // etc.
}

Typography

Use typography classes from our system:

<Typography variant="heading-1">Heading 1</Typography>
<Typography variant="body-sm">Body text</Typography>

Spacing

Use design system spacing:

<div className="space-y-4 p-6">

Icons

Use Tabler Icons:

import { IconName } from '@tabler/icons-react'

State Management

Use Zustand for global state:

import create from 'zustand'

interface Store {
  count: number
  increment: () => void
}

export const useStore = create<Store>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}))

Testing

• Write unit tests for all components
• Use React Testing Library
• Follow testing best practices

Documentation

• Add JSDoc comments for all components and functions
• Keep README up to date
• Document all props and variants

Available Scripts

See all available commands:

make help

Contributing

1. Create a feature branch
2. Make your changes
3. Run tests and linting
4. Submit a pull request

License

MIT