DEV Community

Cover image for Google Summer of Code'21 - Khushal Agarwal
Khushal Agarwal
Khushal Agarwal

Posted on

 

Google Summer of Code'21 - Khushal Agarwal

This summer, I was pleased to get selected for Google Summer of Code'21 under the organization React Native Elements. Working under the organization, my project was to generate documentation automatically out of the UI components and present it in the Docusaurus website.

enter image description here

The purpose of creating this repository is to maintain a report summary of my GSoC work and this may also serve as a guide for future GSoC aspirants and a reference to the developers and contributors to the project.

Project idea

Automatically generate documentation out of React/React Native Component

πŸ“™ Abstract

React Native Elements is a cross-platform UI toolkit built on/for React Native. With a weekly download by 90k+ users and backed by a huge community, it provides UI components that can be used in your native application for the platform of Android/iOS/Web.

The documentation of the project was maintained manually previously i.e., suppose I want to change/add/remove a prop or a new component to the project the markdown file had to be changed manually. The process is tiring and new contributors may often forget to do so. So, during the summers I took the change this process and make a workflow such that the generation is automatic. This should be fast and maintainable.

πŸ“ Deliverables

The deliverables of the project are as follows:

  • [x] Efficient Development Setup
  • [x] Re-structure and Refactor code to have a common pattern.
  • [x] Maintain the Usage/Examples of the component as they are needed to be updated manually.
  • [x] Refactor and rename the directory structure such that Autogen is successful.
    • Convert the code-base to have all the functional components.
  • [x] Commenting on all the components and props.
    • Adding descriptions.
    • Adding prop descriptions.
    • Ensuring a common pattern is followed.
  • [x] Writing scripts to extract data out(in JS/TS) of it in the form of JSON.
  • [x] Converting the JSON data to Markdown.
  • [x] Automating the process such that the workflow works automatically whenever there is a change in the prop/definition or component code.

All of the listed deliverables were completed within the GSoC period. πŸŽ‰

πŸ“¦ Working product

The work can be found here - Official Website of React native elements. Please refer to the component docs.

I have also written a blog on how it works attached here.

πŸš€ Contributions

Pull requests

PR Link Description Status
#3071 [Refactor] Documentation directory structure Merged βœ…
#3081 [Refactor] Directory structure of components Merged βœ…
#3112 [Add] props description, descriptions to the component. Merged βœ…
#3126 [Docs] Added demos and snack for the documentation Merged βœ…
#3136 [Add] Docgen auto generation of docs scripts Merged βœ…
#3142 [Docs] Added generate-markdown scripts Merged βœ…
#3143, #3144 [Fix] Issues related to auto-generation of documentation Merged βœ…
#3145 [Fix, Improve] Doc-gen issues and automation Merged βœ…

Issues

Issue link Description
#3171 [Docs] Auto-generation of documentation for class based components

Apart from these contributions, I have contributed to other React native elements projects. They can be summarized as:

Project Reference
React Native Elements - main repo Pull requests
React Native Elements App Pull requests
Playground Pull requests

πŸ‘¨ Mentors

I would like to thank my mentors for helping me reach this milestone. πŸ˜„πŸ˜„

I have not only learned about the Open Source culture and how to write good code but also, learned how the industry works and the import

I would also like to thank Arpit Bhalla for being an amazing partner in this amazing journey.

πŸ”— Links

Top comments (0)

The JavaScript Brief

1. Top 5 MERN STACK projects to improve your practical understanding

Boost your MERN Stack development skills by undertaking interesting beginner projects. These five engaging projects cover web applications and range from social media website applications to geo-social networking maps. Hone your understanding and apply modern techniques backed up by hands-on experience.

2. How To Optimize Your React App’s Performance

Learn the best optimizing techniques to make your React applications faster and more efficient. Focusing on the identification of performance bottlenecks and common pitfalls to avoid, these optimization strategies will keep your applications running smoothly even when faced with growing complexity.

3. A story of let, const, object mutation, and a bug in my code

In the pursuit of bug-free code, explore an incident involving a mix-up between const and let, making sure your custom code works effectively with third

party documentation. Discover best practices on program flow and learn about JavaScript's unpredictable aspects to ensure your core code is robust.