Thank you for your interest in contributing to BBB! We welcome contributions from developers of all skill levels.

• 🐛 Bug Reports - Report bugs and issues
• 💡 Feature Requests - Suggest new features
• 📝 Documentation - Improve docs and examples
• 🔧 Code Contributions - Submit bug fixes and features
• 🎨 Design - Improve UI/UX
• 🧪 Testing - Add or improve tests

• Node.js 18+
• pnpm (recommended)
• Git

1. Fork the repository

   # Click the "Fork" button on GitHub, then:
   git clone https://github.com/yourusername/BBB.git
   cd BBB

2. Install dependencies

   pnpm install

3. Create environment file

   cp example .env.local

4. Start development server

   pnpm dev

5. Create a new branch

   git checkout -b feature/your-feature-name
   # or
   git checkout -b fix/your-bug-fix

We use the following tools to maintain code quality:

• TypeScript - Strict type checking
• ESLint - Code linting
• Prettier - Code formatting
• Tailwind CSS - Utility-first CSS

• Files: Use kebab-case (my-component.tsx)
• Components: Use PascalCase (MyComponent)
• Variables/Functions: Use camelCase (myVariable)
• Constants: Use UPPER_SNAKE_CASE (MY_CONSTANT)

We follow Conventional Commits:

feat: add search functionality
fix: resolve navigation bug on mobile
docs: update installation guide
style: format code with prettier
refactor: restructure component logic
test: add unit tests for markdown editor
chore: update dependencies

• Use strict TypeScript settings
• Define proper interfaces and types
• Avoid any type unless absolutely necessary
• Use meaningful type names

Example:

interface BlogPost {
  id: string;
  title: string;
  content: string;
  tags: string[];
  publishedAt: Date;
  featured: boolean;
}

• Use functional components with hooks
• Keep components small and focused
• Use TypeScript interfaces for props
• Include proper JSDoc comments

Example:

interface ButtonProps {
  /**
   * The button variant
   */
  variant?: "primary" | "secondary";
  /**
   * Button click handler
   */
  onClick?: () => void;
  /**
   * Button content
   */
  children: React.ReactNode;
}

/**
 * A reusable button component
 */
export function Button({
  variant = "primary",
  onClick,
  children,
}: ButtonProps) {
  // Component implementation
}

# Run all tests
pnpm test

# Run tests in watch mode
pnpm test:watch

# Run tests with coverage
pnpm test:coverage

• Write unit tests for utility functions
• Write integration tests for components
• Use descriptive test names
• Follow the AAA pattern (Arrange, Act, Assert)

Example:

import { render, screen } from "@testing-library/react";
import { Button } from "./Button";

describe("Button Component", () => {
  it("should render with correct text", () => {
    // Arrange
    const buttonText = "Click me";

    // Act
    render(<Button>{buttonText}</Button>);

    // Assert
    expect(screen.getByText(buttonText)).toBeInTheDocument();
  });
});

1. Test your changes

   pnpm test
   pnpm build
   pnpm lint

2. Update documentation if needed

3. Add tests for new features

4. Update CHANGELOG.md if applicable

1. Create descriptive PR title

   feat: add dark mode toggle to navigation
   fix: resolve mobile menu overlap issue
   

2. Fill out PR template with:

   • Description of changes
   • Type of change (bug fix, feature, docs, etc.)
   • Testing instructions
   • Screenshots (if UI changes)

3. Link related issues

   Closes #123
   Fixes #456
   

4. Request review from maintainers

• All PRs require at least one approval
• PRs must pass all CI checks
• Address reviewer feedback promptly
• Keep PRs focused and atomic

When reporting bugs, please include:

• Environment details (OS, browser, Node.js version)
• Steps to reproduce the issue
• Expected behavior
• Actual behavior
• Screenshots or error messages
• Minimal reproduction if possible

**Bug Description**
A clear description of the bug.

**Steps to Reproduce**

1. Go to '...'
2. Click on '...'
3. See error

**Expected Behavior**
What you expected to happen.

**Screenshots**
If applicable, add screenshots.

**Environment**

- OS: [e.g. macOS 12.0]
- Browser: [e.g. Chrome 95]
- Node.js: [e.g. 18.0.0]
- Version: [e.g. 1.0.0]

When suggesting features:

• Use clear, descriptive titles
• Explain the use case and problem it solves
• Provide examples or mockups if helpful
• Consider implementation complexity
• Check existing issues to avoid duplicates

Help improve our documentation:

• Fix typos and grammatical errors
• Add missing information
• Create tutorials and examples
• Improve code comments
• Update outdated content

We use the following labels to organize issues and PRs:

• bug - Something isn't working
• feature - New feature request
• documentation - Documentation improvements
• enhancement - Improve existing feature

• critical - Critical issue requiring immediate attention
• high - High priority
• medium - Medium priority
• low - Low priority

• good first issue - Good for newcomers
• help wanted - Extra attention needed
• needs review - Waiting for review
• work in progress - Currently being worked on

This project follows our Code of Conduct. Please read it before contributing.

Contributors will be:

• Listed in our README
• Mentioned in release notes
• Invited to join our Discord community
• Eligible for contributor swag (when available)

Need help with contributing?

• 💬 Join our Discord community
• 🐛 Open a GitHub issue
• 📧 Email us at contributors@bbb-blog.dev

• Next.js Documentation
• TypeScript Handbook
• Tailwind CSS Documentation
• shadcn/ui Documentation

Thank you for contributing to BBB! 🚀