Skip to main content

Prerequisites

Before you begin, ensure you have the following installed:
  • Node.js 18.0 or higher
  • Bun package manager (preferred)
  • Git for version control
  • A code editor (VS Code recommended)
This project uses Bun as the primary package manager. All commands in this documentation use bun, but you can also use npm or yarn if preferred.

Installation

1

Clone the repository

Clone the project repository to your local machine:
git clone <repository-url>
cd warehouse-management-app
2

Install dependencies

Install all required dependencies using your preferred package manager:
bun install
3

Set up environment variables

Create a .env.local file in the root directory for local environment variables:
cp .env.example .env.local
Never commit sensitive data to git. The .env.local file is already in .gitignore.
4

Start the development server

Run the development server with Turbopack for faster builds:
bun run dev
The application will be available at http://localhost:3000

Available Scripts

The following scripts are available in package.json:
bun run dev

Script Details

ScriptCommandDescription
devnext dev --turbopackStarts development server with Turbopack
buildnext buildCreates production build
startnext startStarts production server
linteslintRuns ESLint code analysis
formatprettier --write "**/*.{ts,tsx}"Formats TypeScript files
typechecktsc --noEmitChecks TypeScript types without emitting files

Development Workflow

Before Making Changes

  1. Pull latest changes from main branch:
    git checkout main
    git pull origin main
    
  2. Create a feature branch:
    git checkout -b feature/your-feature-name
    

During Development

  1. Make incremental changes and test frequently
  2. Run type checks to catch errors early:
    bun run typecheck
    
  3. Run linting to ensure code quality:
    bun run lint
    
  4. Format your code before committing:
    bun run format
    

Quality Checks

Before committing your code, run all quality checks:
bun run typecheck && bun run lint && bun run format
Always run type checks and linting before creating a pull request to ensure code quality and consistency.

Editor Setup

Install the following extensions for the best development experience:
  • ESLint - For code linting
  • Prettier - For code formatting
  • Tailwind CSS IntelliSense - For Tailwind class suggestions
  • TypeScript and JavaScript Language Features - Built-in

VS Code Settings

Add these settings to .vscode/settings.json:
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "tailwindCSS.experimental.classRegex": [
    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
  ]
}

Troubleshooting

Port Already in Use

If port 3000 is already in use, you can specify a different port:
bun run dev -- -p 3001

Module Not Found

If you encounter module not found errors, try:
rm -rf node_modules bun.lock
bun install

Type Errors

If TypeScript shows unexpected errors, restart the TypeScript server in VS Code:
  1. Open Command Palette (Cmd/Ctrl + Shift + P)
  2. Type “TypeScript: Restart TS Server”
  3. Press Enter

Next Steps

System Architecture

Learn about the application structure and architecture

Components

Explore the UI component library

Build docs developers (and LLMs) love