Intern Diaries: Ala Baganné, Software Engineer (Post #2)

One of the key experiences recommended during your time as a student is doing internships. Gaining work experience is the key to boosting employability, especially as a computer science student. That’s why I chose to do my end of studies internship at Realinflo.

Realinflo is a data analytics platform that provides granular, instant, and verified building and transacted data on markets across Asia-Pacific. Three months ago, I started working as a Software Engineering Intern here in the hope of learning new web technologies and improving my communication skills in English. During my internship for Realinflo, I worked on dashboards for the platform that improves data management and visualization for our users. 

I spent my first three weeks mainly learning and reviewing the technologies that I’ll be using, which are Quasar in the front-end and FeathersJS with MongoDB in the back-end. So, let me introduce you to these frameworks and tell you what I like/dislike about them.

Quasar is a high-performance, simple-to-use but powerful UI kit that supplements VueJS to provide a full-featured toolset for building responsive front-end applications. Without having to dive too deep into the scaffolding and configuration, it provides a lot of pre-built components that will take some time to build manually from scratch like Expansion Items, Tables with Pagination and Expanding Rows, Select inputs that allow filtering, and the list goes on.

For example, Quasar Select Input Components can be created like this:

<template>
  <q-select
    v-model="model"
    use-input
    input-debounce="0"
    label="Simple filter"
    :options="options"
    @filter="filterFn"
  >
    <template v-slot:no-option>
      <q-item>
        <q-item-section class="text-grey">
          No results
        </q-item-section>
      </q-item>
    </template>
  </q-select>
</template>
<script>
const stringOptions = [
  'Google', 'Facebook', 'Twitter', 'Apple', 'Oracle'
]
export default {
  data () {
    return {
      model: null,
      options: stringOptions
    }
  },  methods: {
    filterFn (val, update) {
      if (val === '') {
        update(() => {
          this.options = stringOptions
        })
        return
      }      update(() => {
        const needle = val.toLowerCase()
        this.options = stringOptions.filter(v => v.toLowerCase().indexOf(needle) > -1)
      })
    }
  }
}
</script>

You can notice that I used a slot named no-option. It’s like saying when the options array is empty after filtering it, display the message “No results”. There’s also a lot of other useful pre-defined slots; The prepend/append and before:after slots are also commonly used for displaying icons/buttons associated with a q-input, it would be good to look further into them in the documentation (even though you can create your own in Vue, Quasar does this for you for common use cases).

One of the key features that Quasar has and why I would consider using it in feature projects is the ability to code once and deploy to any platform; A website, Mobile App, Electron App… It doesn’t matter, One codebase for all of them. What I don’t like about it is that it uses Material design principles and that it is not very customizable in terms of look and design.

Moving on to FeathersJS, it is a web framework for creating Real-time applications and Rest APIs using Typescript or Javascript. It can interact with any backend back-end technology, support over a dozen databases and works with any front-end technology. What I liked the most about this framework is that just by running one command to generate a Service, you’ll have the CRUD functionalities up and running without having to code much, all you have to do later is define the Model schema related to that service, and it is so easy to add middlewares whether you want to require authentication (this one is pre-defined), add Authorization logic or manipulate/validate a request input/value before saving it to the database.

To generate a service, you would use the following:

feathers generate service

Fourteen weeks at Realinflo allowed me to grow personally, improve my communication skills and learn new web technologies which I believe will come in handy in the future. In the end, I would like to advise everyone to take the opportunity to do an internship. There is so much to gain from it on both a professional and personal level.

Thanks for reading! If you would like to talk further, I can be reached at ala.baganne@realinflo.com or you can also find me on LinkedIn.