Namrata Raina - Github Externship Proposal

[Namrata-Raina]

Application number: 30-05_Nam956_tfa_258

Full name: Namrata Raina

E-mail: nr222@snu.edu.in

GitHub username: Namrata-Raina

Prior experience:

• HTML
• CSS
• SCSS
• Tailwind CSS
• JavaScript
• TypeScript
• Vue.js
• Nuxt.js
• NestJS
• Firebase
• Prisma
• GraphQL
• PostgreSQL
• Go lang
• React

---

Proposal type:

• Existing feature request
• New feature proposal
• Refactor existing feature

Proposal title: Add OpenAPI compatibility for import/export to Hoppscotch

Proposal description:
Relevant feature request: #470
This task is also mentioned in the 'SDOS' github projects: here
The project aims to add an import functionality to Hoppscotch where a user can select a local JSON/YAML file containing details of the requests according to the OpenAPI specification, and these requests can then be added to a collection/folder in Hoppscotch.

Proposal Components:

• The UI component: An additional Import option will appear in the Import/Export menu. For the purposes of the project, the only other UI changes will be the success/error messages that will be shown using the toast widget from nuxtjs.
• The Parser: On clicking the 'Import from OpenAPI JSON/YAML' button from the Import/Export menu, a file selector will be triggered. Once a file has been selected for the purpose, that file will be read and processed on the browser. The processing can be implemented in multiple ways. Two possible ways are listed below:
  • Since OpenAPI bundles different methods for the same path under the same path's array object, one way would be to make a new Hoppscotch collection with the name being the title of the OpenAPI project. Then, we could have multiple folders, one for each unique path. These folders, in turn, could have the different method requests for the current path.
  • The second option for the implementation would be to unbundle all the requests in the collection root itself.
• The parser would process each request from the OpenAPI export and map the values to the Hoppscotch object appropriately.
• Utility tests for the parser would also be written for jest to maintain quality standards and make sure the added import tool keeps compatibility with the API through any further changes.

Success metrics:

• The UI components should feel natural and blend perfectly with the rest of the components. The import button should be visually similar as the rest of the buttons in the Import/Export menu.
• The parser/importer should cover all the parts of the OpenAPI specification, providing full compatibility.
• The tests should sufficiently indicate compatibility with both the OpenAPI spec and the Hoppscotch object structure for requests.
• Active communication about the features and changes made according to the community maintainers regularly.

Proposal roadmap:

1. Pre-Selection(Till June 20/Equivalent):
   • Get further familiarity with the Nuxt stack and the Hoppscotch codebase to speed up implementation during the prototyping phase.
   • All round community interaction on Github.
2. June 21 to July 10:
   • Implement the UI components, and make sure they are consistent and provide all functionalities including calling the file selector, leaving just the parser.
3. July 11 to August 15:
   • Work on the parser script. Continuously test with OpenAPI publicly available and custom examples.
4. August 15 to August 31:
   • Complete the database compatibility. The Import tool should be well-integrated and usable by the end of this.
5. September 1 to September 15:
   • Write tests for the parser.
6. September 16 to September 22:
   • Make all the changes as directed to get the PR merged timely. Work on the final report.

---

About me:
My journey in programming started when I entered college. I utilised my first year in learning different languages and getting comfortable with them. My second year was dedicated towards improving my skills and the third year in applying those concepts in different projects. The last project I completed involved building a web application using ReactJS and Firebase. This gave me an opportunity to learn ReactJS and JavaScript while understanding the working of Firebase.
I have had exposure to Vue and Nuxt, mostly through YouTube videos. Lately, after I came about Hoppscotch, I have been learning more about both of them. Coming from the world of React, Vue excites me as a great alternative from the open source community, and I look forward to your reviews on the above proposal.