Skip to content

Latest commit

 

History

History
206 lines (156 loc) · 4.73 KB

SETUP.md

File metadata and controls

206 lines (156 loc) · 4.73 KB

Development Setup Guide

Prerequisites

  • Node.js: v20.19.0 (use nvm: nvm use)
  • npm: v10+ (comes with Node.js)
  • Git: Latest version

Quick Start

Frontend Setup

  1. Clone the repository

    git clone https://github.com/DogStark/petChain-Frontend.git
    cd petChain-Frontend
  2. Install dependencies

    npm install
  3. Set up environment variables

    cp .env.example .env.local
    # Edit .env.local with your configuration
  4. Run development server

    npm run dev
  5. Open your browser Navigate to http://localhost:3000

Backend Setup

  1. Navigate to backend folder

    cd backend
  2. Install dependencies

    npm install
  3. Set up environment variables

    cp .env.example .env
    # Edit .env with your configuration
  4. Run development server

    npm run start:dev

Available Scripts

Frontend Scripts

  • npm run dev - Start development server
  • npm run build - Build for production
  • npm run start - Start production server
  • npm run lint - Run ESLint
  • npm run lint:fix - Fix ESLint errors
  • npm run format - Format code with Prettier
  • npm run format:check - Check code formatting
  • npm run type-check - Run TypeScript type checking
  • npm run validate - Run all checks (type-check, lint, format)
  • npm run test - Run the standalone password-policy unit tests
  • npm run test:unit - Run all Jest unit tests (single discovery convention)
  • npm run test:coverage - Run Jest unit tests with coverage report
  • npm run clean - Remove build artifacts (.next, coverage, dist, build, .turbo, out) using a cross-platform node utility
  • npm run clean:all - Also remove node_modules, caches, and performance results
  • npm run bundle:check - Validate route-level JS bundle budgets for wallet, analytics, and clinic routes; fails CI on threshold violations
  • npm run analyze - Build with bundle analyzer artifact
  • npm run audit:fix - Fix security vulnerabilities

Backend Scripts

  • npm run start:dev - Start development server with watch mode
  • npm run build - Build for production
  • npm run start:prod - Start production server
  • npm run lint - Run ESLint
  • npm run format - Format code with Prettier
  • npm run test - Run unit tests
  • npm run test:e2e - Run end-to-end tests
  • npm run test:cov - Run tests with coverage

Code Quality

Pre-commit Hooks

This project uses Husky and lint-staged to run checks before commits:

  • Prettier formatting
  • ESLint linting
  • TypeScript type checking

Manual Validation

Before pushing, run:

npm run validate

Project Structure

petChain-Frontend/
├── src/
│   ├── components/     # React components
│   ├── pages/          # Next.js pages
│   └── styles/         # Global styles
├── public/             # Static assets
├── backend/            # NestJS backend (separate)
├── .github/            # GitHub workflows and templates
└── ...config files

Environment Variables

Frontend (.env.local)

NEXT_PUBLIC_APP_NAME=PetChain
NEXT_PUBLIC_APP_URL=http://localhost:3000
NEXT_PUBLIC_API_URL=http://localhost:3001
NEXT_PUBLIC_STELLAR_NETWORK=testnet
NEXT_PUBLIC_STELLAR_HORIZON_URL=https://horizon-testnet.stellar.org

Backend (.env)

See backend/README.md for backend-specific environment variables.

Troubleshooting

Port Already in Use

If port 3000 is already in use:

# Kill the process using port 3000
lsof -ti:3000 | xargs kill -9

# Or use a different port
PORT=3001 npm run dev

Node Version Issues

Make sure you're using the correct Node.js version:

nvm use

Clean Install

If you encounter dependency issues:

npm run clean:all
npm install

Build Errors

  1. Clean the build cache:

    npm run clean
  2. Run type checking:

    npm run type-check
  3. Check for linting errors:

    npm run lint

Contributing

  1. Create a feature branch
  2. Make your changes
  3. Run npm run validate to ensure code quality
  4. Commit your changes (pre-commit hooks will run automatically)
  5. Push and create a pull request

See contributing.md for detailed guidelines.

Tech Stack

  • Frontend: Next.js 15, React 19, TypeScript, Tailwind CSS
  • Backend: NestJS, TypeScript
  • Blockchain: Stellar
  • Deployment: Vercel (Frontend), Heroku (Backend)

Support