NicholaiVogel
54909d79e5
- Initialize Next.js 15.5.4 with TypeScript and App Router - Configure Tailwind CSS v4 with ShadCN UI component library - Set up OpenNext for Cloudflare Workers deployment - Add Gitea Actions workflows for CI/CD (lint, build, deploy) - Create issue templates (bug, feature, question) and PR template - Add comprehensive CONTRIBUTING.md and README.md documentation - Configure build scripts and deployment configuration
262 lines
6.6 KiB
Markdown
262 lines
6.6 KiB
Markdown
# 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.
|
|
|