biohazard-vfx-website/CONTRIBUTING.md

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
• Development Workflow
• Coding Standards
• Git Workflow
• Pull Request Process
• Testing
• 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:

   git clone <repository-url>
   cd biohazard-vfx-website
   

2. Install dependencies:

   npm install
   

3. Create your environment file:

   cp .env.example .env.local
   

   Fill in the required environment variables.

4. Start the development server:

   npm run dev
   

5. Open 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:

   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:

   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:

  npm run lint
  

• Run type checking:

  npm run type-check
  

• Fix auto-fixable issues:

  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:

   npm run build
   

2. Run linting and fix any issues:

   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:

   git fetch origin
   git rebase origin/develop
   

Creating a PR

1. Push your branch to the remote repository:

   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
• Tailwind CSS Documentation
• ShadCN UI Documentation
• OpenNext Documentation
• Cloudflare Workers Documentation

---

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