Welcome to the Stellar Tip Jar Frontend project! We're excited to have you contribute. This guide will help you get started.
- Node.js >= 20.0.0
- npm or pnpm
- Git
-
Fork the repository
# Visit https://github.com/Bonizozo/stellar-tipjar-frontend and click "Fork" -
Clone your fork
git clone https://github.com/YOUR_USERNAME/stellar-tipjar-frontend.git cd stellar-tipjar-frontend -
Install dependencies
npm install # or pnpm install -
Create a branch
git checkout -b feature/your-feature-name
-
Make your changes
# Edit files as needed -
Run tests
npm run test npm run test:e2e -
Commit your changes
git commit -m "feat: add your feature" -
Push to your fork
git push origin feature/your-feature-name
-
Create a Pull Request
- Visit your fork on GitHub
- Click "New Pull Request"
- Fill in the PR template
- Submit!
- Use TypeScript for all new code
- Avoid
anytypes; use proper typing - Export types from component files
# Run linting
npm run lint
# Type checking
npm run typecheck- Components: PascalCase (e.g.,
UserProfile.tsx) - Hooks: camelCase with
useprefix (e.g.,useUserData.ts) - Utilities: camelCase (e.g.,
formatDate.ts) - Constants: UPPER_SNAKE_CASE (e.g.,
MAX_RETRIES)
We follow Conventional Commits:
<type>(<scope>): <subject>
<body>
<footer>
feat: A new featurefix: A bug fixdocs: Documentation only changesstyle: Changes that don't affect code meaning (formatting, etc.)refactor: Code change that neither fixes a bug nor adds a featureperf: Code change that improves performancetest: Adding or updating testschore: Changes to build process, dependencies, etc.
git commit -m "feat(auth): add two-factor authentication"
git commit -m "fix(wallet): resolve connection timeout issue"
git commit -m "docs: update API integration guide"npm run testnpm run test:e2e
npm run test:e2e:ui # Interactive modenpm run test -- --coverage- Update documentation if needed
- Add tests for new features
- Ensure all tests pass
- Keep commits clean and descriptive
- Link related issues in PR description
- Request review from maintainers
When reviewing code:
- Check for TypeScript compliance
- Verify tests are included
- Ensure documentation is updated
- Look for performance issues
- Check accessibility (a11y)
- Verify security best practices
src/
├── app/ # Next.js App Router routes
├── components/ # Reusable React components
├── hooks/ # Custom React hooks
├── lib/ # Utilities and libraries
├── services/ # API service layer
├── contexts/ # React contexts
├── types/ # TypeScript type definitions
├── utils/ # Helper functions
└── styles/ # Global styles
- Create file in
src/components/ - Use TypeScript with proper types
- Add JSDoc comments
- Export from component index if needed
- Add tests in
__tests__/folder
- Create file in
src/hooks/ - Prefix with
use - Add TypeScript types
- Document with JSDoc
- Add tests if complex logic
- Add method to
src/services/api.ts - Use proper error handling
- Add TypeScript types
- Document with JSDoc
- Add tests
# Clear cache and reinstall
rm -rf node_modules package-lock.json
npm install
npm run buildnpm run typechecknpm run lint -- --fix- Check existing issues and discussions
- Ask in pull request comments
- Open a new discussion
By contributing, you agree that your contributions will be licensed under the MIT License.
Thank you for contributing! 🚀