Skip to content

EXAMPLE_APP_CHECKLIST.md

Latest commit

 

History

History
437 lines (351 loc) · 12 KB

EXAMPLE_APP_CHECKLIST.md

File metadata and controls

437 lines (351 loc) · 12 KB
Raw

GitStreamer Example App - Development Checklist

Track your progress building the USDC Collector example app.

Phase 1: Project Setup ⚙️

Repository & Environment

  • Create new Next.js app with TypeScript and Tailwind
  • Install Web3 dependencies (wagmi, viem, connectkit)
  • Create .env.local with required variables
  • Initialize Git repository
  • Create GitHub repository
  • Push initial commit to GitHub

Web3 Configuration

  • Create lib/web3-provider.tsx with Wagmi config
  • Configure Base Sepolia network
  • Set up ConnectKit provider
  • Create lib/contracts.ts with ABIs
  • Add GitStreamReceiver contract address
  • Add USDC contract address (get from team)

Development Environment

  • Get Base Sepolia testnet ETH from faucet
  • Get WalletConnect project ID
  • Configure MetaMask for Base Sepolia
  • Test local development server (pnpm dev)

Estimated Time: 30 minutes Status: ⬜ Not Started | 🟡 In Progress | ✅ Complete

Phase 2: Core UI Components 🎨

Essential Components

  • Create components/DonationForm.tsx
    • Wallet connection button
    • USDC amount input field
    • Balance display
    • Two-step approval flow (approve → donate)
    • Loading states
    • Success confirmation
  • Create components/DonationStats.tsx
    • Fetch project balance from contract
    • Display total collected amount
    • Format USDC amounts correctly
  • Create components/GitStreamerBadge.tsx
    • "Powered by GitStreamer" branding
    • Link to GitStreamer platform

Optional Components (can add later)

  • Create components/ContributorBoard.tsx
    • Fetch contributor data from GitStreamer API
    • Display contributor avatars and usernames
    • Show tier assignments
    • Display revenue share percentages
  • Create components/DonationHistory.tsx
    • Fetch recent donations
    • Display transaction list

Estimated Time: 45 minutes Status: ⬜ Not Started | 🟡 In Progress | ✅ Complete

Phase 3: Main Application Pages 📄

Layout & Pages

  • Update app/layout.tsx
    • Wrap with Web3Provider
    • Set metadata (title, description)
    • Configure fonts
  • Update app/page.tsx
    • Add header with title and description
    • Add DonationStats component
    • Add DonationForm component
    • Add "How It Works" section
    • Add GitStreamerBadge
    • Add ContributorBoard (if ready)
  • Style with Tailwind CSS
    • Responsive design (mobile + desktop)
    • Color scheme matches branding
    • Smooth transitions and hover effects

Content

  • Write clear copy explaining the app
  • Add "How It Works" section with 3 steps
  • Add call-to-action for contributors
  • Add links to GitStreamer platform

Estimated Time: 30 minutes Status: ⬜ Not Started | 🟡 In Progress | ✅ Complete

Phase 4: GitStreamer Integration 🔗

Platform Registration

  • Access GitStreamer frontend
  • Connect wallet (owner address)
  • Navigate to "New Project" page
  • Enter repository URL
  • Configure tier settings:
    • Set tier thresholds (commits needed)
    • Set revenue share percentages
    • Set treasury share
    • Verify total = 100%
  • Submit and get PROJECT_ID
  • Save PROJECT_ID securely

Smart Contract Registration

  • Call registerProject() on GitStreamReceiver
  • Verify project is registered on-chain
  • Check project details with getProject()
  • Verify project is active

Environment Configuration

  • Update NEXT_PUBLIC_PROJECT_ID in .env.local
  • Test project ID in local development
  • Verify contract calls work with project ID

API Integration (Optional)

  • Create lib/gitstreamer-api.ts API client
  • Test fetching project data
  • Test fetching contributor data
  • Handle API errors gracefully

Estimated Time: 20 minutes Status: ⬜ Not Started | 🟡 In Progress | ✅ Complete

Phase 5: Testing 🧪

Local Testing

  • Run app locally (pnpm dev)
  • Test wallet connection
  • Test wallet disconnection
  • Verify USDC balance displays correctly
  • Test with wallet that has no USDC
  • Test with wallet that has USDC

Donation Flow Testing

  • Get test USDC from MockUSDC or faucet
  • Enter donation amount
  • Approve USDC spending
    • Verify approval transaction
    • Check transaction on explorer
  • Complete donation
    • Verify donation transaction
    • Check transaction on explorer
    • Verify funds reached GitStreamReceiver
  • Verify project balance updated
  • Verify success message displays

Edge Cases

  • Test with 0 amount (should be disabled)
  • Test with amount > balance (should fail)
  • Test transaction rejection
  • Test network switching mid-flow
  • Test disconnecting wallet mid-flow

Backend Verification

  • Check GitStreamer API logs
  • Verify revenue was detected
  • Verify contributor balances updated
  • Verify Yellow Network session created/updated

Contributor Claims

  • Go to GitStreamer platform
  • Connect wallet as contributor
  • Link GitHub account via OAuth
  • Verify tier assignment is correct
  • Verify earnings are correct
  • Claim USDC successfully

Estimated Time: 30 minutes Status: ⬜ Not Started | 🟡 In Progress | ✅ Complete

Phase 6: Multi-Contributor Setup 👥

Create Meaningful Issues

  • Create issue #1: Feature or bug fix
  • Create issue #2: Feature or bug fix
  • Create issue #3: Feature or bug fix
  • Label issues appropriately
  • Add clear acceptance criteria

Invite Contributors

  • Invite 2-3 collaborators to repository
  • Share contribution guidelines
  • Assign issues to contributors

Manage Contributions

  • Review and merge PR #1
  • Review and merge PR #2
  • Review and merge PR #3
  • Ensure commits are properly attributed
  • Wait for GitStreamer to sync and recalculate tiers

Verify Tier Assignments

  • Check contributor #1 tier assignment
  • Check contributor #2 tier assignment
  • Check contributor #3 tier assignment
  • Verify tier assignments make sense based on commits

Estimated Time: Variable (depends on contributors) Status: ⬜ Not Started | 🟡 In Progress | ✅ Complete

Phase 7: Documentation 📚

Repository README

  • Add clear project title and description
  • Add "What is GitStreamer?" section
  • Add "How This App Works" section
  • Add "Try It" section with live demo link
  • Add "For Contributors" section
  • Add "Tech Stack" section
  • Add "Local Development" instructions
  • Add "Integrating GitStreamer" link
  • Add license information
  • Add contributing guidelines

Integration Guide

  • Create INTEGRATION_GUIDE.md
  • Document prerequisites
  • Document step-by-step integration process
  • Add code examples
  • Add troubleshooting section
  • Add FAQs

Code Documentation

  • Add JSDoc comments to complex functions
  • Add inline comments for tricky logic
  • Document environment variables in .env.example
  • Add TypeScript types for all functions

Estimated Time: 45 minutes Status: ⬜ Not Started | 🟡 In Progress | ✅ Complete

Phase 8: Deployment 🚀

Pre-Deployment Checklist

  • All tests passing locally
  • No console errors or warnings
  • All environment variables documented
  • README is complete
  • Git history is clean
  • No sensitive data in commits

Vercel Deployment

  • Install Vercel CLI (npm i -g vercel)
  • Run vercel to deploy
  • Set environment variables in Vercel dashboard:
    • NEXT_PUBLIC_CHAIN_ID
    • NEXT_PUBLIC_RPC_URL
    • NEXT_PUBLIC_GITSTREAM_RECEIVER
    • NEXT_PUBLIC_USDC_ADDRESS
    • NEXT_PUBLIC_PROJECT_ID
    • NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID
    • NEXT_PUBLIC_GITSTREAMER_API
  • Deploy to production (vercel --prod)
  • Test production deployment
  • Set custom domain (optional)

Post-Deployment Testing

  • Test wallet connection on production
  • Test donation flow on production
  • Test all links work correctly
  • Test mobile responsiveness
  • Test on different browsers
  • Verify analytics/monitoring works

DNS & Domain (Optional)

  • Purchase custom domain
  • Configure DNS settings
  • Add domain to Vercel
  • Set up SSL certificate
  • Test custom domain

Estimated Time: 20 minutes Status: ⬜ Not Started | 🟡 In Progress | ✅ Complete

Phase 9: Polish & Optimization ✨

UX Improvements

  • Add loading spinners for all async operations
  • Add error messages for failed transactions
  • Add success animations
  • Add tooltips for complex features
  • Add confirmation modals for important actions
  • Improve mobile layout
  • Test with screen readers (accessibility)

Performance

  • Optimize images (use Next.js Image component)
  • Enable caching for contract reads
  • Minimize bundle size
  • Test Lighthouse score
  • Add loading skeletons

Analytics & Monitoring

  • Add analytics (optional: Vercel Analytics)
  • Add error tracking (optional: Sentry)
  • Monitor donation transactions
  • Track user engagement

Estimated Time: Variable Status: ⬜ Not Started | 🟡 In Progress | ✅ Complete

Phase 10: Marketing & Community 📢

Create Demo Content

  • Record demo video (2-3 minutes)
  • Take screenshots for social media
  • Write blog post explaining the app
  • Create Twitter thread

Share with Community

  • Post on Twitter/X
  • Post on Reddit (r/ethereum, r/crypto)
  • Share in Discord communities
  • Add to GitStreamer showcase

Gather Feedback

  • Create feedback form
  • Monitor GitHub issues
  • Respond to community questions
  • Iterate based on feedback

Estimated Time: Variable Status: ⬜ Not Started | 🟡 In Progress | ✅ Complete

Success Metrics 🎯

Technical Goals

  • ✅ Application deployed and accessible
  • ✅ No critical bugs or errors
  • ✅ All core features working
  • ✅ Lighthouse score > 90

GitStreamer Integration Goals

  • ✅ Project registered on GitStreamer
  • ✅ At least 3 contributors with commits
  • ✅ At least one successful donation
  • ✅ Contributors successfully assigned to tiers
  • ✅ At least one contributor successfully claimed earnings

Documentation Goals

  • ✅ README is clear and comprehensive
  • ✅ Integration guide is complete
  • ✅ Code is well-documented

Post-Launch Enhancements 🔮

Ideas for future versions:

Features

  • Add donation history page
  • Add contributor profile pages
  • Add donation leaderboard
  • Add NFT rewards for top donors
  • Add social sharing functionality
  • Add email notifications for claims
  • Add recurring donation subscriptions

Integrations

  • Support multiple tokens (not just USDC)
  • Add ENS name resolution
  • Add IPFS for decentralized hosting
  • Integrate with Farcaster for social features

Advanced Features

  • Add admin dashboard
  • Add project analytics
  • Add A/B testing
  • Add internationalization (i18n)

Notes & Learnings 📝

Use this space to track issues, solutions, and learnings during development:

Date: ___________
Issue:
Solution:
Learnings:

---

Date: ___________
Issue:
Solution:
Learnings:

---

Time Tracking

Phase Estimated Actual Notes
Phase 1: Setup 30 min
Phase 2: Components 45 min
Phase 3: Pages 30 min
Phase 4: Integration 20 min
Phase 5: Testing 30 min
Phase 6: Contributors Variable
Phase 7: Documentation 45 min
Phase 8: Deployment 20 min
Phase 9: Polish Variable
Phase 10: Marketing Variable
Total Core ~3.5 hours

Good luck building! Remember to commit regularly and push to GitHub often. Every commit brings you closer to demonstrating the power of GitStreamer! 🚀