SCoRe Lab
Published in

SCoRe Lab

GSoC 2021 With SCoRe Lab: Week-6

I hope you all are safe and healthy! I am writing this blog to share my experience of Week-6 of the official Coding Period of GSoC 2021 with SCoRe Lab.

So, we are finally into the second phase of the official coding period of Google Summer of Code 2021. I am glad the announce that I have passed the first evaluations!

In case you haven’t checked out my previous week’s blog yet, give it a read here where I had discussed what my project is about in brief and what all did I do in the fifth week!

What Did I Do in the Sixth Week?

We had completed all works related to the new and existing components till the last week itself. This week I had started with the implementation of our next milestone, which is to generate an npm module for the Webiu components so that developers can plug in the Webiu components into their project. This will also increase the range of our project. Overall, my work for this week can be summarized as:

  • Create and set up a separate repository for the npm module.
  • Generate npm modules for all static components.
  • Generate modules for Avatar, Button, Contact, FAQ, Timeline, Timestamp, Countdown, Signup, and Login components.
  • Generate modules for LinksList, Collaboration, Card, Services, Spinner, Carousel, Testimonial, and other such static components.
  • Publish the npm package to the npm registry.
  • Write documentation for usage of the npm package and its components.

Pull Requests and Commits Made

We have created a separate repository for developing the module. It can be found here. I had set up the project initially and have opened 2 pull requests for the same which can be viewed:

  • #1: Set up the base repository for the module.
  • #2: Generate the module for all the static Webiu components.

I have also published the initial version of the package to the npm registry which can be downloaded from here. You can easily plugin this module into your next project and use standard Webiu components! For e.g.

import { ButtonWithHeading } from ‘webiu-npm’

Any Blocker Faced

Setting up the base project for the same was a challenge for me this week. Since I was developing the modules using Create-React-App syntax, I faced minor bugs and difficulties in setting up the project and compiling libraries for various components. I tried to debug, searched for some resources, and looked at some other packages and their architecture to get rid of errors :)

Also, I came across a really good blog on medium, which clearly states what goes under the hood and helped me to get rid of webpack errors. I recommend readers to give it a read if you want to get into details of Config and Babel logic.

Major Learning From This Week

This was my first experience dealing with the development of modules and packages. I have been using packages for a long but, it was the first time I got the chance to create one! I learned in-depth about importing and exporting components/functions outside of the directory, how does the library compile, and to publish modules to the npm registry.

Plans For the Next Week

We have published the initial version of our npm package consisting mostly of static components. Next week I will be working on generating modules for the remaining Webiu components.

The dynamic components include API handling and some good business logic thus, will be fun to implement. Also, we are expected to complete the module by next week and publish its final version to be used as a full-fledged plugin!

The End For Another Beginning

Well, that’s it for now. Thank you for reading me through! A lot more interesting things are yet to come :)

Keep in touch to read more updates about the wonderful project, Webiu. I will keep posting stories regarding the project every week and any major updates for the same. Till then, Stay Safe and keep contributing!



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store