DEV Community

Liyas Thomas
Liyas Thomas

Posted on • Edited on

Hacktoberfest with Hoppscotch πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»πŸ‘Œ

#hacktoberfest

This tag is for content related to Hacktoberfest 2022. Open source maintainers can use this tag on posts about their project seeking contributions (we recommend adding #contributorswanted also). Contributors can tag posts documenting their Hacktoberfest journey and progress. NOTE: please read the rules section for necessary details and updates on participating this year.

Are you looking to contribute to an open source project in this Hacktoberfest? or want to get started with latest technologies like VueJS & NuxtJS?

We're developing Hoppscotch, an open source API request builder for the web, and would love to count you as a contributor to improve our components & applications.

GitHub β†’ Web app β†’

24k+ stars on GitHub β€’ # 2 product of the day on Product Hunt β€’ featured in Indie Hackers, Hacker news, Hacker noon, YouTube & open source podcast etc.

Get started πŸš€

As the project’s size grew quite a bit the past couple of months, you might ask yourself, where to get started πŸ€”?

Meet the technology stack:

  1. HTML + SCSS + JavaScript
  2. NuxtJS: The Intuitive Vue Framework
  3. TailwindCSS

Check How to set-up Hoppscotch development environment in 5 mins β†’

1. Codegen

At Hoppscotch, we want to help developers to go from discovering an API to experimenting with it and then to make actually using the API in their code as frictionless as possible. To support that, Hoppscotch had the ability to generate code for JavaScript (XHR and Fetch API) and cURL. We recognize that a lot of devs of different backgrounds use Hoppscotch. So recently, we modularized and separated the code generation system (only for REST currently, WS and GraphQL coming soon!) into different code generator modules which can be easily added to and extended upon.

As a result now one can easily add code generation for multiple programming languages (and/or libraries, or even programs), even if you don't have much knowledge about the rest of the Hoppscotch codebase.

How to add your own code generator?

Step 1: Create a code generator object

Code generator objects are placed on helpers/codegen/generators folder, they have a specified id, name (display name) and a generator function which has a parameter, context containing all the data about the request (refer, the existing generators to see which all data is available). The generator function should at the end return a string which is the final generated request code. The generator functions do not currently offer async support, but if you want async support, ping @andrewbastin.

Step 2: Register your new codegen object

Registration of the valid code generators are done through the helpers/codegen/codegen.js file. Just import your codegen object in the file and add it to the codegens array.

Once that is done, your code generator will be made available in the Generate Code dialog as usual.

Any specific platforms ?

Although our goal is to eventually provide support for possibly all programming languages/libraries/programs. We would really love to see these platforms implemented.

Language Variant
C libcurl
HTTP HTTP
Java OkHttp
Java Unirest
NodeJs Unirest
PHP pecl_http
PHP HTTP_Request2
Ruby Net:HTTP
Shell Httpie
Swift URLSession

Example contributions:

But even if it is not in this list, we would really love it to be included. So do not be discouraged. Please do make a PR for adding support to your platform of your choice.

2. i18n - Internationalization

View detailed instructions β†’

3. Issues - Bugs and fixes

For the purpose of this first experience, we've have selected the issues tagged #hacktoberfest which we're hoping to implement during this span on a month.

Here are some issues/feature requests to start with:

Check out the issues tab for more πŸ˜‹ or alternatively you can create new features (and prolly PRs πŸ˜‰) or optimize any existing functions/routines.

4. Tests

If you're interested in writing tests, contribute to our test cases. We're using Jest for testing. Ping @andrewbastin for any help.

5. Beta testers

If you have general feedback, please reply here.

View detailed instructions β†’

Feel free to ping us on Discord or Telegram for any help.

Cherry on the cake πŸ’πŸŽ‚

Beside unlocking some karma points, you know what would be cool with your contributions πŸ€”? All the improvements you'll submit will not only have effect to the components, but also they'll have an impact on open source dev community & be included in our live platform used by 80k+ users. Kind of cool to know that something you would develop will for sure be available in an online live application! isn’t it?

Hacktoberfest πŸ™

Support open source and pick a limited edition T-shirt πŸ‘• or plant a tree! 🌱

Rules:
To qualify for the official limited edition Hacktoberfest shirt, you must register and make four pull requests (PRs) between October 1-31 (in any time zone). PRs can be made to any public repo on GitHub, not only the ones with issues labeled Hacktoberfest. This year, the first 70,000 participants who successfully complete the challenge will earn a Hacktoberfest tee or plant a tree.

Happy hacking ❀️

If you've read this far, thank you for taking time out to participate ❀️. Feel free to ping @liyasthomas / @andrewbastin for any help.

Top comments (2)

Collapse
 
_____shabeeb_____ profile image
its.shabeeb

Sir, you are the inspiration for me in the career

Collapse
 
sirawit profile image
Dragodzs

Inspiration for me. I will try πŸŽ‰πŸŽ‰πŸŽ‰πŸŽ‰