Thank you for your interest in contributing to MergeFi! This guide will help you get started.
- Getting Started
- Development Setup
- Project Structure
- Making Changes
- Pull Request Process
- Coding Standards
- Bounty System
-
Find an issue: Browse open issues and look for issues labeled with the Stellar Wave program or issues without assignees.
-
Claim the issue: Comment on the issue to let others know you're working on it. A maintainer will assign you.
-
Fork the repository: Click the "Fork" button on GitHub to create your own copy.
-
Clone your fork:
git clone https://github.com/<your-username>/frontend.git cd frontend
-
Add upstream remote:
git remote add upstream https://github.com/MergeFi/frontend.git
- Node.js 20+ (see
.nvmrcfor the exact version) - npm (comes with Node.js)
# Install dependencies
npm install
# Copy environment variables
cp .env.example .env.local
# Start the dev server
npm run devOpen http://localhost:3000. The app works with bundled mock data when no backend is running.
| Command | Description |
|---|---|
npm run dev |
Start dev server with Turbopack |
npm run build |
Production build |
npm run lint |
Run ESLint |
npm test |
Run Jest test suite |
npm run test:watch |
Run tests in watch mode |
npm run verify:headers |
Verify security headers (run build first) |
npm run verify:env |
Validate environment variable handling |
src/
app/ App Router routes (one folder per route)
components/ Reusable UI components
ui/ Primitives: Button, Badge, StatCard, Avatar, Tabs
layout/ Navbar, Footer, CopyrightYear
bounty/ BountyCard, BountyDescription
dashboard/ ActivityList, DashboardShell
context/ React contexts (Auth, Theme, Wallet)
hooks/ Custom React hooks
lib/ Utilities, API client, types, mock data
types/ Shared TypeScript types
-
Sync with upstream before starting work:
git fetch upstream git rebase upstream/main
-
Create a feature branch:
git checkout -b fix/issue-title # or git checkout -b feat/feature-name -
Make your changes following the coding standards.
-
Write or update tests if your change affects component behavior.
-
Run checks before committing:
npm run lint npm test -
Commit with a clear message:
git commit -m "fix: describe what you fixed Fixes #<issue-number>"
-
Push your branch to your fork:
git push origin fix/issue-title
-
Open a PR from your fork to
MergeFi/frontend:main. -
Use this PR description template:
Fixes #<issue-number> ## What changed - ## Why - ## How to test - -
Ensure CI passes: The PR must pass lint, tests, build, and security header checks before it can be merged.
-
Respond to review feedback: A maintainer will review your PR and may request changes. Address feedback promptly.
- TypeScript: All new code should be TypeScript.
- ESLint: Follow the project's ESLint configuration (
eslint.config.mjs). - Tailwind CSS: Use Tailwind utility classes for styling. Follow the existing
slate/emeralddark-mode-first design system. - Components: Place reusable UI primitives in
src/components/ui/. Feature-specific components go in their own folders undersrc/components/. - Testing: Write tests using Jest and React Testing Library. Place test files
next to the components they test (e.g.,
Button.test.tsx). - No
any: Avoidanytypes. Use proper TypeScript types.
MergeFi uses a bounty system to reward contributors:
- Browse bounties: Visit
/issuesto see available bounties with rewards. - Claim a bounty: Click "Claim" on a bounty to start working on it.
- Submit your work: Open a PR that fixes the issue.
- Get paid: Once your PR is merged, the Soroban smart contract automatically releases the bounty to your Stellar wallet.
Bounties are funded by sponsors and held in escrow by Soroban smart contracts on the Stellar network. Payment is automatic upon PR merge — no manual payout needed.
If you have questions about contributing:
- Check the existing issues for answers.
- Open a new issue with the
questionlabel. - Reach out in the project's discussion channels.
Thank you for contributing to MergeFi!