Skip to content

CONTRIBUTING.md

Latest commit

 

History

History
166 lines (124 loc) · 4.86 KB

CONTRIBUTING.md

File metadata and controls

166 lines (124 loc) · 4.86 KB

Contributing to CodeSplain

First off, thank you for considering contributing to CodeSplain! It's people like you that make CodeSplain such a great tool.

Code of Conduct

This project and everyone participating in it is governed by respect and professionalism. Please be kind and courteous.

How Can I Contribute?

Reporting Bugs

Before creating bug reports, please check the issue list as you might find out that you don't need to create one. When you are creating a bug report, please include as many details as possible:

  • Use a clear and descriptive title
  • Describe the exact steps to reproduce the problem
  • Provide specific examples to demonstrate the steps
  • Describe the behavior you observed after following the steps
  • Explain which behavior you expected to see instead and why
  • Include screenshots if possible
  • Include your environment details (OS, Node version, browser, etc.)

Suggesting Enhancements

Enhancement suggestions are tracked as GitHub issues. When creating an enhancement suggestion, please include:

  • Use a clear and descriptive title
  • Provide a step-by-step description of the suggested enhancement
  • Provide specific examples to demonstrate the steps
  • Describe the current behavior and explain the behavior you expected to see
  • Explain why this enhancement would be useful

Pull Requests

  • Fill in the required template
  • Follow the coding style used throughout the project
  • Include appropriate test cases if applicable
  • Update documentation as needed
  • End all files with a newline

Development Setup

  1. Fork the repo and create your branch from main
  2. Install dependencies: 
    cd codesplain && npm install
cd ../server && npm install
  3. Create .env files (see .env.example)
  4. Make your changes
  5. Test your changes thoroughly
  6. Push to your fork and submit a pull request

Coding Style

JavaScript/JSX

  • Use 4 spaces for indentation
  • Use semicolons
  • Use single quotes for strings
  • Use arrow functions where appropriate
  • Use async/await over promises
  • Use destructuring when it improves readability

React Components

  • Use functional components
  • Use hooks appropriately
  • Keep components small and focused
  • Extract reusable logic into custom hooks
  • Use proper prop types or TypeScript

CSS/Tailwind

  • Use Tailwind utility classes
  • Follow the dark mode pattern used in the project
  • Keep styles consistent with existing components

Project Structure

codesplain/
├── codesplain/          # Frontend
│   ├── src/
│   │   ├── actions/     # Server actions
│   │   ├── components/  # React components
│   │   └── ...
│   └── ...
├── server/              # Backend
│   ├── server.js        # Express server
│   └── ...
└── README.md

Component Guidelines

When creating new components:

  1. Create a new file in src/components/
  2. Use functional components with hooks
  3. Handle loading and error states
  4. Support dark mode
  5. Make it responsive
  6. Add appropriate ARIA labels for accessibility
  7. Document complex logic with comments

API Guidelines

When adding new endpoints:

  1. Add to server/server.js
  2. Follow RESTful conventions
  3. Validate input
  4. Handle errors appropriately
  5. Return consistent JSON responses
  6. Update documentation

Testing

Currently, we don't have automated tests, but please:

  1. Test your changes manually
  2. Test in both light and dark modes
  3. Test on different screen sizes
  4. Test error conditions
  5. Test with different programming languages

Documentation

  • Update README.md if you change functionality
  • Update CHANGELOG.md with your changes
  • Add JSDoc comments for complex functions
  • Update API documentation if you add/change endpoints

Git Commit Messages

  • Use the present tense ("Add feature" not "Added feature")
  • Use the imperative mood ("Move cursor to..." not "Moves cursor to...")
  • Limit the first line to 72 characters or less
  • Reference issues and pull requests liberally after the first line
  • Consider starting the commit message with an emoji:
    • 🎨 :art: - Improving structure/format of the code
    • ⚡ :zap: - Improving performance
    • 🐛 :bug: - Fixing a bug
    • ✨ :sparkles: - Adding a new feature
    • 📝 :memo: - Writing docs
    • 🔒 :lock: - Fixing security issues
    • ♻️ :recycle: - Refactoring code

Adding New Languages

To add support for a new programming language:

  1. Add to the language dropdown in CodeExplainForm.jsx
  2. Ensure Monaco Editor supports it (most common languages are supported)
  3. Test with example code
  4. Update documentation

Questions?

Feel free to open an issue with your question or reach out to the maintainers.

License

By contributing, you agree that your contributions will be licensed under the MIT License.

Thank you for contributing! 🎉