Mahdaad Dev Handbook

Appearance

Development Tools ​

Introduction ​

This section includes tools and technologies used in project development.

Main Tools ​

Node.js ​

  • Version: 18.x or higher
  • For running JavaScript on the server side
  • Package management with npm/yarn/pnpm

Vue.js ​

  • Version: 3.x
  • Main frontend framework
  • Composition API
  • Vue Router for routing
  • Pinia for state management

Vite ​

  • bundler and dev server
  • Hot Module Replacement (HMR)
  • Build optimization
  • Plugin system

Development Tools ​

TypeScript ​

  • Main programming language
  • Type safety
  • IntelliSense
  • Better refactoring

ESLint ​

  • Linting for JavaScript/TypeScript
  • Coding rules
  • Auto-fix capabilities

Prettier ​

  • Code formatting
  • Consistent style
  • Integration with ESLint

Stylelint ​

  • Linting for CSS/SCSS
  • Consistent styling
  • Best practices

Testing Tools ​

Vitest ​

  • Unit testing framework
  • Fast execution
  • Vue component testing
  • Coverage reporting

Cypress ​

  • End-to-end testing
  • Real browser testing
  • Visual testing
  • API testing

Playwright ​

  • Cross-browser testing
  • Mobile testing
  • Performance testing

Code Quality Tools ​

Husky ​

  • Git hooks
  • Pre-commit checks
  • Pre-push validation

lint-staged ​

  • Lint only staged files
  • Faster feedback
  • Better performance

Commitlint ​

  • Conventional commits
  • Consistent commit messages
  • Automated changelog

CI/CD Tools ​

GitHub Actions ​

  • Automated testing
  • Build and deploy
  • Code quality checks
  • Security scanning

Docker ​

  • Containerization
  • Consistent environments
  • Easy deployment

Vercel/Netlify ​

  • Static site hosting
  • Automatic deployments
  • Preview deployments

Monitoring Tools ​

Sentry ​

  • Error tracking
  • Performance monitoring
  • User feedback

Google Analytics ​

  • User behavior
  • Traffic analysis
  • Conversion tracking

Design Tools ​

Figma ​

  • UI/UX design
  • Design system
  • Collaboration

Storybook ​

  • Component documentation
  • Visual testing
  • Design system

Project Management Tools ​

GitHub ​

  • Version control
  • Issue tracking
  • Pull requests
  • Project management

Linear/Jira ​

  • Task management
  • Sprint planning
  • Bug tracking

Installation and Setup ​

Prerequisites ​

bash
# Install Node.js
# Install pnpm
npm install -g pnpm

# Install dependencies
pnpm install

Useful Scripts ​

bash
# Development
pnpm dev

# Build
pnpm build

# Test
pnpm test

# Lint
pnpm lint

# Format
pnpm format

IDE Setup ​

VS Code Extensions ​

  • Volar (Vue 3)
  • TypeScript
  • ESLint
  • Prettier
  • GitLens
  • Auto Rename Tag

WebStorm ​

  • Built-in Vue support
  • TypeScript support
  • Testing tools
  • Git integration