What Inspired You
I wanted to help junior developers who have heard about open source but don't know where to start. There's no clear, simple guide out there for making your first pull request. When you search GitHub, you get overwhelmed by thousands of repos and issues, and most people give up. I built this app to bridge that gap — to take a specific repository URL and turn it into a concrete, actionable path.
What I Learned
The biggest lesson was separating pure business logic from network calls. By keeping functions like filterAndSortIssues() and parseGitHubUrl() as pure functions in mi-primer-pr/src/domain/rules.ts, I was able to write comprehensive unit tests that verified all edge cases without consuming GitHub's rate limits or mocking complex network servers. This architecture made testing faster and more reliable.
I also learned about GitHub's REST API limitations — specifically that the /issues endpoint returns pull requests mixed with issues, and that excluding issues with linked PRs would require expensive per-issue calls. I made the decision to defer that feature to preserve unauthenticated usage.
How I Built It
I followed a spec-driven, plan-first approach:
Clean Architecture: Layered structure with domain/ (pure business rules), application/ (orchestrator), infrastructure/ (GitHub API gateway), and ui/ (React components) Tech Stack: React 18 + Vite + TypeScript with Vitest for testing Dual Gateway Pattern: Real GitHubRepoGateway for live API calls and FakeRepoGateway for offline testing and demo reliability Parallel API Calls: Used Promise.all to fetch community profile, languages, and both label variants in 4 concurrent requests Developer-Tool Aesthetic: CSS variables for automatic light/dark theme, monospace fonts for code, clean focused interface Challenges I Faced GitHub Rate Limits: Unauthenticated API calls are limited to 60 req/hour. I solved this by implementing a toggle between live API and mock data, and by keeping each search to exactly 4 parallel calls. Contributing Guide Detection: Initially considered probing multiple directories (root, .github/, docs/), but discovered GitHub's /community/profile endpoint returns the contributing guide URL in a single call, saving 2 HTTP requests per search. Label Variants: GitHub repos use either "good first issue" or "good-first-issue" as labels. I implemented two parallel queries, merged results, deduplicated by issue number, and sorted by creation date.
Built With
- css3
- github
- html5
- react
- typescript
- vite
- vitest
Log in or sign up for Devpost to join the conversation.