Insights from an Intern: One Month at Modus Create

A lot has changed since I wrote my last blog post. I officially graduated from high school, attained my first AWS certification (hopefully first of many more to come!) and I’ve recently finished one month at Modus. During this month, I’ve furthered my knowledge of web development, collaborated with many incredible Modites, and developed a love for my work that I’ve never had before. In this blog post, I’m going to go through some of what I’ve done in the past month or so, reflections on my experiences so far, and what I hope to accomplish for the rest of my time here at Modus.

Ionic-Vue and Vueport Shop

Over the past few weeks, I have been working with a team of Modites, including Michael Tintiuc, Grgur Grisogono, and Tom Collins on making improvements to the open-source Modus Ionic-Vue library, which connects the Vue 3 JS framework with Ionic 5 components. We are also developing a sample e-commerce application called Vueport Shop implementing this library, to which I have been a main contributor. The Vueport Shop project will mostly likely be finished by the time of publication, and you can visit the site here.

NEW RESEARCH: LEARN HOW DECISION-MAKERS ARE PRIORITIZING DIGITAL INITIATIVES IN 2024.

Through these projects and working with the team, I’ve been able to master my skills with Javascript and Typescript as well as learn more about emerging frameworks such as Vue JS and Ionic, which I had never been exposed to before. I’ve also learned a lot about collaboration, feature-based development, and Git flow.

Every week, we follow an agile project management pattern where we can share our individual progress, ask questions, and learn from each other. We have project cards that help us keep track of our progress and every pull request is reviewed by all members of the team before being merged into the final product. I especially love working with this team because there’s always something new to learn from each other and I’m always getting feedback from them on how to improve as a developer.

This project is particularly exciting to me because it is novel and cutting edge. Vue 3 won’t be officially released until this fall and Ionic 5 came out recently in February 2020. Because of this, documentation is hard to find for Vue 3 and almost none on using these two frameworks together (hence the need for this project). I am glad that I am contributing to this open-source project that will help many developers in the community.

Fixing Bugs: Scrapping Your Work and Starting From Scratch!

Sometimes when fixing bugs, the best thing to do is to just start over. This past week, fellow developer Tom and I struggled with implementing a new feature to the Vueport app. Similar to any other ecommerce experience, users can select products and add them to the cart. There is a cart icon with a little badge above it indicating the quantity of items that are in the cart. We wanted to ensure that when a user adds an item to their cart, the badge above the cart increments by one. It seems pretty simple, but we ran into many problems.

We fiddled with different solutions including passing props through components and after a few days with no success, we decided to throw in the towel and start over. We decided to use the Vue 3 Composition API, which can be used for global state management, exactly what we were looking for. You can find out more about this here in a video created by fellow Modite Grgur Grisogono. Here’s a few snippets of what we ended up doing.

import { ref } from 'vue'
import { Category } from '@/composables/categories'
import { Variant } from '@/composables/products'
const items = ref<Array>([])

interface Product {
 id: string
 title: string
 description: string
 images: string[]
 category: Category['id']
 variants: Variant[]
 price: number
 tags: string[]
}

function add(product: Product) {
 items.value = [...items.value, product]
}
export default {
 items,
 add,
}

We created a global Vue hook for our cart which we could use in each of our components in the setup() function, as follows.

import { defineComponent, ref } from 'vue'
import { useRoute } from 'vue-router'
import useProduct from '@/composables/products'
import cart from '@/composables/cart/index' // cart from global vue hook
export default defineComponent({
 name: 'ProductDetails',
 components: {
// not shown
 },
 async setup() {
   const product = await useProduct(useRoute().params.productId) // product information
   const isOpen = ref(false)


// when you press "add to cart", the following is triggered
   function openModalComponent() {
     cart.add(product) // adds a product to the cart array
     isOpen.value = true
   }
   return {
     product,
     isOpen,
     cart,
     openModalComponent,
   }
 },
})

We import the Vue hook from the previous snippet and utilize in the script tags of one of our components. In the setup function of a component, we return all the data and functions that can be accessed by the component. Now, we are able to update the state of the cart globally and this information can be accessed by our components, including the badge above the cart.

As I stated earlier, there’s not much documentation on doing this type of work as Vue 3 has not been officially released, but I’m glad that we were able to figure it out, utilize the new features of Vue 3, and share this information with others.

Insights from an Intern

• Don’t be afraid to ask questions! There’s no such thing as a stupid question.
• Many times I would often encounter issues and I would go down the rabbit hole of Stack Overflow, GitHub, and various library documentation with no success. Then I would ask one of my fellow Modites who has experience with the subject and they would have the answer within seconds. Lots of time was wasted searching for answers when I could have just asked someone.
• Working with other people’s code can sometimes be confusing and hard to understand (especially if it’s not formatted or commented well). However, I’ve come to realize that collaborating on code is incredibly powerful and we can get a lot done in a short amount of time. Feature driven development definitely helps to avoid conflicts with multiple people working on the same thing.
• I really enjoy the flexibility in working from home and choosing your own hours as I’m able to work when I’m really productive (early morning and evening) and relax when I’m not (lunch time, early afternoon). This wouldn’t be possible if I was physically commuting to work.
• “I hear and I forget. I see and I remember. I do and I understand” – Confucius

Modus Community & Fun

Lastly, one thing that distinguishes Modus from other places I’ve worked is the strong sense of community. Even when working remotely, there are always Modites to talk to and fun events to participate in. This past month, I participated in a book club, numerous fitness challenges (my body has never been more sore), and several remote games such as Modus Bingo and a typing challenge. A huge shoutout to Fio Montero and the rest of the Modus People Operations team for organizing these!

Conclusion

In the next few weeks, I will be writing code tutorials on the Modus blog and perhaps releasing a video on how to build apps with the Modus Ionic-Vue library. I will also be working on some additional projects aside from Ionic-Vue and I hope to share my experiences with that in a future blog post. I would like to give a big shoutout to everyone at Modus Create who has made my experience enjoyable and look forward to interacting with more of you all. Special shoutout to the Ionic Vue team: Tom, Michael, and Grgur for being great. Stay tuned for more blog posts as I continue my software development journey!