Welcome to
Skip to main content
Home/Documentation/Contributing

Contributing

Code style, conventions, and pull request guidelines

On this page

Getting Started

  1. Fork the repository on GitHub
  2. Clone your fork locally
  3. Create a branch for your feature: git checkout -b feature/my-feature
  4. Make changes following the conventions below
  5. Test your changes locally
  6. Submit a pull request targeting main

Code Conventions

File Naming

  • Vue Components: PascalCase (e.g., UserProfileHeader.vue)
  • Composables: camelCase with use prefix (e.g., useAuthStore.ts)
  • Utilities: camelCase (e.g., formatDate.ts)
  • Types: PascalCase (e.g., User.ts)
  • Constants: camelCase (e.g., constants.ts)

Module Structure

When adding a new feature, create a module under modules/:

modules/<feature>/
├── components/     # Vue SFC components
├── composables/    # Reactive composition functions
├── constants.ts    # Static configuration
└── types.ts        # TypeScript types

Register the module paths in nuxt.config.ts under imports.dirs and components.

Component Guidelines

  • Use Vue 3 Composition API with <script setup lang="ts">
  • Use shadcn-vue components from modules/ui/ as building blocks
  • Keep components focused and reusable
  • Use Tailwind CSS for styling (avoid inline styles)
  • Use VeeValidate + Zod for form validation

TypeScript

  • All code must be strongly typed
  • Shared types go in packages/types/
  • Module-specific types go in the module's types.ts
  • Use satisfies for type assertions when possible

Internationalization

  • All user-facing text must use translation keys
  • Add translations to both en.json and pt.json in packages/i18n/translations/
  • Use $t('key') in templates or t('key') in scripts

Code Quality

Linting

pnpm lint        # Check for issues
pnpm lint:fix    # Auto-fix issues

Formatting

pnpm format      # Format with Prettier

Type Checking

cd apps/web
pnpm typecheck

Pull Request Guidelines

  1. Keep PRs focused — One feature or fix per PR
  2. Write descriptive titles — e.g., "Add course enrollment flow"
  3. Describe changes — Explain what and why in the PR description
  4. Test locally — Ensure pnpm lint and pnpm build pass
  5. Screenshots — Include screenshots for UI changes
  6. Translations — Include both PT and EN translations for new text

Branch Strategy

  • main — Production branch, auto-deploys via CI/CD
  • feature/* — Feature branches
  • fix/* — Bug fix branches
  • docs/* — Documentation changes