OpenVeda Playbook: Hoppscotch

Your guide to contributing to a beautiful, lightweight, and community-loved API development ecosystem.

1. The "Why": Mission & Impact

• The Mission: Hoppscotch is a free, blazing-fast, and beautifully designed open-source API testing tool. It's a lightweight and web-first alternative to heavy clients like Postman.
• Your Impact: You'll be working on a modern, fast-growing tool that is loved by frontend developers, API engineers, and students. Your contributions will help make the process of API development faster and more enjoyable for thousands.
• Why it's a Career Supercharger: This project is a masterclass in modern frontend development. It's built with Vue.js (Nuxt 3) and TypeScript, a highly in-demand skill set. The codebase is clean, modern, and a fantastic place to learn how to build beautiful, performant web applications.

2. The "What": Tech Stack

• Core Stack: TypeScript.
• Frontend Framework: Vue.js (specifically, Nuxt 3).
• UI: Tailwind CSS.
• Backend Services: They use a variety of technologies for their cloud features, including Go.
• Key Tools: GitHub and Discord.

3. The "How": Your Onboarding Journey

3.1: Join the Community

• Primary Channel (Discord): The Hoppscotch community and core team are extremely active on Discord.
  • Link: Join the Hoppscotch Discord Server
• Your First Action: Introduce yourself in the #introductions channel and check out the #-contributing channel for help.

3.2: The Setup Guide

• Official Guide: Their contribution guide is clear and contains the full setup instructions.
  • Link: Hoppscotch Contribution Guide on GitHub
• The Recommended Path:
  1. Prerequisites: Git, Node.js (use nvm), and pnpm (they use pnpm as their package manager). Install pnpm with npm install -g pnpm.
  2. Fork & Clone: Fork the hoppscotch repo and clone it.
  3. Install Dependencies: cd hoppscotch then pnpm install.
  4. Run the Dev Server: pnpm dev.
  5. Access: http://localhost:3000.

3.3: The Contribution Workflow

• A standard, friendly GitHub PR process.
• Key Point: They follow the Conventional Commits specification. Your commit messages must be formatted correctly (e.g., feat: Add new feature or fix: Correct a bug).

4. GSoC History & Focus Areas

• Historical Focus: Hoppscotch is a newer but very active GSoC participant. Projects often focus on adding new features to the API client (like new authentication methods), improving the user interface, building out their backend services, and enhancing their plugin/extension system.
• What Mentors Look For: Strong frontend skills and a good eye for design. They value contributors who can not only write clean TypeScript and Vue code but also care about the user experience.

5. Key Repositories to Know

• Main Web App: github.com/hoppscotch/hoppscotch

6. Find Your First Task Right Now

• The Golden Link: They have a well-maintained list of issues for newcomers.
  • Link: "good first issue" tag
• Help Wanted: Issues labeled "help wanted" are also great places to start.

7. The Unwritten Rules (Mentor Insights)

• Design Matters: Hoppscotch has a beautiful UI. Any visual changes you make should respect their design system.
• PNPM is the Way: Use pnpm for all commands, not npm or yarn. This is important for their monorepo setup.
• Be Active on Discord: The core team is very accessible on Discord. It's the best place to get your questions answered quickly.