Development Lifecycle

Comprehensive guide on the development workflow, useful scripts, and coding conventions for Data Explorer.

Development Scripts

Script	Directory	Description
`npm run dev`	client/	Start Vite dev server with HMR (port 5173)
`npm run build`	client/	Build production bundle (output: dist/)
`npm run preview`	client/	Preview production build locally
`npm run start:dev`	server/	Start NestJS in watch mode (auto-restart on code changes)
`npm run build`	server/	Compile TypeScript to JavaScript (output: dist/)
`npm run start:prod`	server/	Run production build
`npx prisma studio`	server/	Open GUI to browse internal PostgreSQL database
`npx prisma migrate deploy`	server/	Apply pending Prisma migrations

We recommend the following standard Git workflow for developing new features or fixing bugs:

Feature Branch Workflow

# Step 1: Create new branch from main

git checkout main

git pull origin main

git checkout -b feature/add-postgres-adapter

# Step 2: Develop the feature

# ... viết code, test ...

# Step 3: Commit atomic changes

git add -A

git commit -m "feat(adapter): add SQLite adapter with introspection"

# Step 4: Push and create Pull Request

git push origin feature/add-postgres-adapter

Follow the Conventional Commits convention to keep Git history clean and readable:

feat:New feature — feat(editor): add multi-cursor support

fix:Bug fix — fix(adapter): handle null values in PostgreSQL arrays

refactor:Restructure — refactor(auth): extract JWT logic to separate guard

docs:Documentation — docs(readme): update installation instructions

style:CSS style — style(sidebar): adjust padding on mobile view

chore:Maintenance — chore(deps): upgrade tailwindcss to 3.4

TypeScript strict mode for both client and server — no any unless absolutely necessary.
React components: Functional components + hooks. No class components.
File naming: PascalCase for components (UserProfile.tsx), camelCase for utilities (formatDate.ts), kebab-case for routes.
State management: Zustand stores separated by feature (useConnectionStore, useEditorStore, useAIStore).
CSS: Tailwind utility classes. Avoid inline styles. Use cn() helper for conditional classes.
Imports: Ordered — React → third-party → local modules → types. Use path aliases (@/).

Join the community on GitHub to contribute to the smartest local database IDE.