Contributing Guide

We welcome contributions to God Panel! This guide will help you get started.

Ways to Contribute

🐛 Bug Reports

• Use the GitHub Issues page
• Provide detailed reproduction steps
• Include environment information (Node.js version, OS, etc.)
• Add relevant logs and error messages

💡 Feature Requests

• Search existing issues first
• Clearly describe the feature and use case
• Provide mockups or examples if applicable
• Consider implementation complexity

🔧 Code Contributions

• Fork the repository
• Create a feature branch
• Make your changes
• Add tests if applicable
• Submit a pull request

Development Setup

Prerequisites

# Required
Node.js >= 20.0.0
npm >= 9.0.0

# Optional (for full development)
Git
Docker

Local Development

# Clone the repository
git clone https://github.com/god-plans/god-panel-documention.git
cd god-panel/god-panel-nuxt

# Install dependencies
npm install

# Start development server (runs on port 3333)
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Run tests
npm run test

# Run linting
npm run lint

# Type checking
npm run typecheck

Project Structure

god-panel/
├── god-panel-nuxt/         # Nuxt application (main app)
│   ├── app/               # Nuxt application code
│   │   ├── components/    # Vue components
│   │   ├── composables/   # Nuxt composables
│   │   ├── pages/         # File-based routing
│   │   ├── layouts/       # Layout components
│   │   ├── stores/        # Pinia stores
│   │   ├── middleware/    # Route middleware
│   │   ├── plugins/       # Nuxt plugins
│   │   ├── services/      # Business logic services
│   │   └── utils/         # Utility functions
│   ├── assets/            # Static assets
│   ├── i18n/              # Internationalization files
│   ├── public/            # Public static files
│   ├── nuxt.config.ts     # Nuxt configuration
│   └── package.json       # Dependencies
├── god-panel-docs-vite/   # Documentation site
└── README.md              # Project overview

Code Standards

TypeScript

// ✅ Good
interface User {
  id: string
  email: string
  name?: string
}

const getUser = async (id: string): Promise<User> => {
  const user = await $fetch<User>(`/api/users/${id}`)
  return user
}

// ❌ Avoid
const getUser = async (id) => {
  const user = await $fetch('/api/users/' + id)
  return user
}

Vue Components

<!-- ✅ Good -->
<template>
  <div class="user-profile">
    <h2>{{ user.name }}</h2>
    <p>{{ user.email }}</p>
  </div>
</template>

<script setup lang="ts">
interface Props {
  user: User
}

const { user } = defineProps<Props>()
</script>

<!-- ❌ Avoid -->
<template>
  <div>
    <h2>{{ user?.name }}</h2>
    <p>{{ user?.email }}</p>
  </div>
</template>

<script>
export default {
  props: ['user'],
  data() {
    return {}
  }
}
</script>

Testing

// ✅ Good
describe('UserService', () => {
  it('should fetch user by id', async () => {
    const user = await userService.getById('123')
    expect(user).toBeDefined()
    expect(user.id).toBe('123')
  })

  it('should handle not found users', async () => {
    await expect(userService.getById('invalid')).rejects.toThrow('User not found')
  })
})

Pull Request Process

1. Fork & Branch

git checkout -b feature/amazing-feature
# or
git checkout -b fix/bug-description

2. Make Changes

• Follow the coding standards
• Add tests for new functionality
• Update documentation if needed
• Ensure all tests pass

3. Commit Guidelines

# Good commit messages
git commit -m "feat: add user authentication"
git commit -m "fix: resolve memory leak in dashboard"
git commit -m "docs: update installation guide"
git commit -m "test: add unit tests for UserService"

4. Push & Create PR

git push origin feature/amazing-feature
# Then create PR on GitHub

Testing Requirements

Unit Tests

• Cover all new functionality
• Mock external dependencies
• Test edge cases and error conditions

Integration Tests

• Test component interactions
• Test API integrations
• Test database operations

E2E Tests

• Test critical user flows
• Test cross-browser compatibility
• Test responsive design

Documentation

Content Guidelines

• Use clear, concise language
• Provide practical examples
• Include code snippets with syntax highlighting
• Add screenshots for UI changes

Markdown Format

---
title: Your Feature
description: Description of what this does
category: guides
order: 1
---

# Your Feature

Brief introduction.

## Section

### Subsection

Code examples:

\`\`\`typescript
const example = 'code'
\`\`\`

## Next Steps

Link to related documentation.

Review Process

Code Review Checklist

• [ ] Code follows project standards
• [ ] Tests are included and passing
• [ ] Documentation is updated
• [ ] No linting errors
• [ ] No security vulnerabilities
• [ ] Performance impact considered

PR Template

## Description
Brief description of changes

## Type of Change
- [ ] Bug fix
- [ ] New feature
- [ ] Breaking change
- [ ] Documentation update

## Testing
- [ ] Unit tests added
- [ ] Integration tests added
- [ ] Manual testing completed

## Screenshots
Add screenshots if UI changes

## Checklist
- [ ] Code follows style guidelines
- [ ] Tests pass
- [ ] Documentation updated
- [ ] No breaking changes

Community Guidelines

Be Respectful

• Treat all contributors with respect
• Use inclusive language
• Be collaborative and constructive

Code of Conduct

• No harassment or discrimination
• No spam or self-promotion
• No inappropriate content
• Professional communication

Recognition

Contributors

All contributors will be recognized in:

• README.md contributors section
• Release notes
• GitHub contributors graph

Special Recognition

• Regular contributors may be invited to join the core team
• Outstanding contributions may be highlighted in blog posts
• Community experts may be featured in documentation

Getting Help

Development Questions

• Check existing documentation first
• Search GitHub issues and discussions
• Ask in GitHub Discussions
• Join our Discord community

Reporting Issues

• Use the appropriate issue template
• Provide complete reproduction steps
• Include environment details
• Be responsive to follow-up questions

License

By contributing, you agree that your contributions will be licensed under the same license as the original project.

Next Steps

1. Read the Documentation: Understand the project structure and goals
2. Set Up Development Environment: Follow the setup guide
3. Explore Issues: Look for good first issues or feature requests
4. Start Contributing: Make your first contribution!

---

Thank you for contributing to God Panel! 🎉