Contributing

Overview

Thank you for your interest in contributing to Hireable! This guide covers the development workflow, code standards, and contribution process.

Development Setup

Fork and clone the repository
Install dependencies: npm install
Set up environment: cp .env.example .env.local
Set up git hooks: npm run prepare
Start development: npm run dev

Code Standards

TypeScript

Use TypeScript for all new files
Enable strict type checking
Avoid any types - use unknown or proper types
Use interfaces for object shapes
Use type aliases for unions and complex types

// ✅ Good
interface User {
  id: string;
  name: string;
}
 
// ❌ Avoid
const user: any = { id: "123", name: "John" };

React

Use functional components with hooks
Follow React 19 best practices
Use proper dependency arrays in hooks
Implement error boundaries where appropriate

// ✅ Good
function UserCard({ user }: { user: User }) {
  return <div>{user.name}</div>;
}
 
// ❌ Avoid
class UserCard extends React.Component { ... }

Styling

Use Tailwind CSS utility classes
Follow the existing design system
Use CSS variables for theme values
Avoid inline styles unless necessary

// ✅ Good
<button className="bg-primary text-primary-foreground px-4 py-2 rounded-md">
  Click me
</button>
 
// ❌ Avoid
<button style={{ backgroundColor: "blue", color: "white" }}>
  Click me
</button>

Accessibility

Use semantic HTML elements
Include ARIA labels where needed
Ensure keyboard navigation works
Maintain color contrast ratios (WCAG AA)

// ✅ Good
<button aria-label="Close dialog">
  <XIcon aria-hidden="true" />
</button>
 
// ❌ Avoid
<div onClick={handleClose}>X</div>

Git Workflow

Branch Naming

Prefix	Purpose	Example
`feature/`	New features	`feature/user-auth`
`fix/`	Bug fixes	`fix/login-redirect`
`refactor/`	Code refactoring	`refactor/api-client`
`docs/`	Documentation	`docs/api-reference`
`test/`	Test additions	`test/auth-service`

Commit Messages

Follow conventional commits format:

type(scope): subject

body (optional)

footer (optional)

Types:

feat: New feature
fix: Bug fix
docs: Documentation changes
style: Code style changes (formatting)
refactor: Code refactoring
test: Test additions/updates
chore: Build process or auxiliary tool changes

Examples:

feat(auth): add password reset flow
fix(waitlist): resolve duplicate email validation
docs(readme): update installation instructions

Pull Request Process

Create a feature branch from main
Make your changes
Run all checks: npm run validate
Run tests: npm run test
Commit with conventional commit messages
Push to your fork
Create a pull request with:
- Clear title and description
- Reference to related issues
- Screenshots for UI changes
Address review feedback
Merge after approval

Testing

Writing Tests

Write tests for all new features
Test edge cases and error conditions
Use descriptive test names
Follow AAA pattern (Arrange, Act, Assert)

import { render, screen } from "@testing-library/react";
import { describe, it, expect } from "vitest";
import { Button } from "./Button";
 
describe("Button", () => {
  it("should render with correct text", () => {
    // Arrange
    const text = "Click me";
 
    // Act
    render(<Button>{text}</Button>);
 
    // Assert
    expect(screen.getByRole("button")).toHaveTextContent(text);
  });
 
  it("should call onClick when clicked", async () => {
    // Arrange
    const handleClick = vi.fn();
    render(<Button onClick={handleClick}>Click</Button>);
 
    // Act
    await userEvent.click(screen.getByRole("button"));
 
    // Assert
    expect(handleClick).toHaveBeenCalledOnce();
  });
});

Running Tests

# Run all tests
npm run test
 
# Run tests in watch mode
npm run test:watch
 
# Run tests with UI
npm run test:ui
 
# Generate coverage report
npm run test:coverage
 
# Run E2E tests
npm run test:e2e