# Contributing to Biohazard VFX Website

Thank you for contributing to the official Biohazard VFX website! This document provides guidelines and instructions for internal developers working on this project.

## Table of Contents
- [Getting Started](#getting-started)
- [Development Workflow](#development-workflow)
- [Coding Standards](#coding-standards)
- [Git Workflow](#git-workflow)
- [Pull Request Process](#pull-request-process)
- [Testing](#testing)
- [Deployment](#deployment)

## Getting Started

### Prerequisites
- Node.js 20.x or higher
- npm (comes with Node.js)
- Git
- A code editor (VS Code recommended)

### Initial Setup
1. Clone the repository:
   ```bash
   git clone <repository-url>
   cd biohazard-vfx-website
   ```

2. Install dependencies:
   ```bash
   npm install
   ```

3. Create your environment file:
   ```bash
   cp .env.example .env.local
   ```
   Fill in the required environment variables.

4. Start the development server:
   ```bash
   npm run dev
   ```

5. Open [http://localhost:3000](http://localhost:3000) in your browser.

## Development Workflow

### Branch Strategy
- `main` - Production branch, always deployable
- `develop` - Development branch for integration
- Feature branches - `feature/description` or `feature/issue-number-description`
- Bug fix branches - `fix/description` or `fix/issue-number-description`
- Hotfix branches - `hotfix/description`

### Starting New Work
1. Always create a new branch from `develop`:
   ```bash
   git checkout develop
   git pull origin develop
   git checkout -b feature/your-feature-name
   ```

2. Make your changes and commit regularly with clear messages.

3. Keep your branch up to date:
   ```bash
   git fetch origin
   git rebase origin/develop
   ```

## Coding Standards

### TypeScript
- Use TypeScript for all new code
- Avoid using `any` type; use proper types or `unknown`
- Define interfaces for component props and API responses
- Use meaningful variable and function names

### React/Next.js
- Use functional components with hooks
- Follow the App Router conventions
- Keep components small and focused (single responsibility)
- Use server components by default, client components only when needed
- Place server components in the `app` directory
- Place reusable client components in `src/components`

### Styling
- Use Tailwind CSS utility classes
- Follow the ShadCN UI component patterns
- Use CSS variables for theming (defined in `globals.css`)
- Keep custom CSS to a minimum

### File Structure
```
src/
├── app/              # Next.js App Router pages
├── components/       # Reusable components
│   └── ui/          # ShadCN UI components
├── lib/             # Utility functions
└── hooks/           # Custom React hooks
```

### Code Quality
- Run linting before committing:
  ```bash
  npm run lint
  ```

- Run type checking:
  ```bash
  npm run type-check
  ```

- Fix auto-fixable issues:
  ```bash
  npm run lint -- --fix
  ```

## Git Workflow

### Commit Messages
Follow the 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, etc.)
- `refactor`: Code refactoring
- `perf`: Performance improvements
- `test`: Adding or updating tests
- `chore`: Maintenance tasks

Examples:
```
feat(portfolio): add project filtering functionality
fix(header): resolve mobile menu overflow issue
docs(readme): update installation instructions
```

### Commit Best Practices
- Make atomic commits (one logical change per commit)
- Write clear, descriptive commit messages
- Commit early and often
- Don't commit sensitive information or credentials

## Pull Request Process

### Before Creating a PR
1. Ensure your code builds successfully:
   ```bash
   npm run build
   ```

2. Run linting and fix any issues:
   ```bash
   npm run lint
   npm run type-check
   ```

3. Test your changes thoroughly in multiple browsers if applicable

4. Rebase your branch on the latest `develop`:
   ```bash
   git fetch origin
   git rebase origin/develop
   ```

### Creating a PR
1. Push your branch to the remote repository:
   ```bash
   git push origin feature/your-feature-name
   ```

2. Create a Pull Request on Gitea
   - Use the PR template provided
   - Fill in all relevant sections
   - Link to related issues
   - Add screenshots for UI changes
   - Request review from appropriate team members

3. Ensure CI checks pass
   - All tests must pass
   - No linting errors
   - Build must succeed

### PR Review Process
- Address all review comments
- Make requested changes in new commits (don't force push during review)
- Mark conversations as resolved once addressed
- Request re-review after making changes

### After PR Approval
- Squash commits if requested
- Merge using the "Squash and Merge" or "Rebase and Merge" option
- Delete your feature branch after merging

## Testing

### Manual Testing
- Test your changes in multiple browsers (Chrome, Firefox, Safari, Edge)
- Test responsive behavior on different screen sizes
- Verify accessibility (keyboard navigation, screen readers)
- Check performance (Lighthouse scores)

### Automated Testing
- Write tests for new features when applicable
- Ensure existing tests pass before submitting PR

## Deployment

### Environments
- **Development**: Automatic deployment from `develop` branch
- **Preview**: Automatic deployment for each PR
- **Production**: Automatic deployment from `main` branch

### Deployment Process
1. Changes merged to `develop` → Auto-deploy to development environment
2. PR opened against `main` → Auto-deploy preview environment
3. PR merged to `main` → Auto-deploy to production via Cloudflare

### Cloudflare Configuration
- Production deployments use OpenNext build
- Environment variables are managed through Gitea Secrets
- Wrangler configuration is in `wrangler.toml`

### Rollback
If a deployment causes issues:
1. Revert the problematic commit
2. Create a hotfix PR
3. Expedite review and merge
4. Monitor deployment

## Questions or Issues?

If you have questions or run into issues:
1. Check existing documentation
2. Search for similar issues in the issue tracker
3. Ask in the team chat
4. Create a new issue using the question template

## Additional Resources

- [Next.js Documentation](https://nextjs.org/docs)
- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
- [ShadCN UI Documentation](https://ui.shadcn.com/)
- [OpenNext Documentation](https://open-next.js.org/)
- [Cloudflare Workers Documentation](https://developers.cloudflare.com/workers/)

---

Thank you for contributing to Biohazard VFX! Your work helps us showcase amazing visual effects to the world.