NGX Canaima

Webdev

This was my first attempt at the OSS community when I was an Angular Developer.

You can actually access the repo which is archived https://github.com/alvarosabu/ngx-canaima

I was fascinated at that time with UI Libraries, like Bootstrap, and Foundation (Geez how old am I 👨🏻‍🦳?) and I decided to create my own library to share with the rest. I don't remember if NG-Bootstrap was available at that time.

But first, a great name

Of course, the most important step for any epic library, module, or even function is to name it. At that time I just had 2 years since I immigrated from Venezuela to Barcelona Spain, so I was still dealing with the emotional hangover of leaving my home. The best way of dealing with it? Let's name my fresh library out the most beautiful national park in the world: Canaima

The logo followed the same look n' feel as the Angular badge surrounding an icon made by myself resembling the tallest waterfall in the world. The "Angel Falls" (check here) are localized at Auyán-tepui mountain in the Canaima National Park.

Leaving aside my weird patriotism I really wanted to create a nice library with well-designed documentation.

Components

Under the scope of the MVP, the following components were supported:

• Cards Components

• Lists Components

• Dynamic Forms Components

• Buttons Directives

• Toolbar Component

• Header Component

• Segments Component

• Chip Component

• Fab Button Component

• Media Uploader

• Avatar Uploader

• Datatable Component

There was also available a small demo as a showcase of the components themselves and as a playground for me to test the components

Design and Docs

Now design was a weird thing, I was kinda obsessed with Material Design (don't judge, we all were 😜) so all the components have this distinguish mix of Material and Bootstrap which I find really uncomfortable for my eyes right now, something like Comic Sans.

But hey. we were all young once right?

I'm pretty proud of this one since I was really Junior dev when I started with this project.

Learnings

Although the library was only used by me, It served as a great side-project that help me learn new skills that would impact positively my career from there on:

I learned how:

• To create an installable Angular module with UI Components to be reused

• Create generic-enough components that were dumb enough to be used widely through the application no matter the business context

• Make technical documentation

• Understand the different kinds of UI components that can be used on an App

• The Dynamic Forms concept later give life to my most popular OSS library Vue Dynamic Forms