Skip to content

Getting Started

Getting Started

Welcome to IONFLOW Frontend! This guide will help you set up your development environment and start contributing.

Prerequisites

Before you begin, ensure you have the following installed:

Tool	Version	Purpose
Node.js	18.x or 20.x	JavaScript runtime
pnpm	8.x+	Package manager
Git	Latest	Version control
VS Code / Cursor	Latest	Recommended IDE

Quick Start

# 1. Clone the repository
git clone [email protected]:altacrest/gateway-ion.git
cd ion

# 2. Install dependencies
pnpm install

# 3. Set up environment variables
cp .env.example .env.local

# 4. Start development server
pnpm dev

The application will be available at http://localhost:5173.

Development Workflow

graph LR
    A[Clone Repo] --> B[Install Deps]
    B --> C[Configure Env]
    C --> D[Start Dev Server]
    D --> E[Make Changes]
    E --> F[Test]
    F --> G[Commit]
    G --> H[Push & PR]

What’s Next?

Section	Description
Installation	Detailed installation instructions
Development	Development workflow and tips
Environment	Environment variables configuration

Recommended IDE Setup

VS Code / Cursor Extensions

Vue - Official (Vue Language Features)
TypeScript Vue Plugin
Tailwind CSS IntelliSense
ESLint
Prettier
GitLens

Recommended Settings

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "typescript.preferences.importModuleSpecifier": "non-relative"
}

Project Scripts

Command	Description
`pnpm dev`	Start development server
`pnpm build`	Build for production
`pnpm test:unit`	Run unit tests
`pnpm test:e2e`	Run E2E tests
`pnpm lint`	Lint code
`pnpm format`	Format code
`pnpm type-check`	TypeScript type checking

Getting Help

Check the FAQ for common issues
Review Architecture for understanding the codebase
Read Development Guides for best practices