Expedia : My Summer Internship at Expedia Group (Opens in new window)

My Summer Internship at Expedia Group

Enhancing the stay experience using atomic design

This summer of 2021 was one of the best summers I've ever had. My summer internship experience at Expedia Group™ was filled with learning and development. Last year, I was selected as a Software Development Engineer Intern for an 8-week remote internship, and it was the biggest milestone I achieved last year.

My team

My team was based out of the Gurgaon office, India. I was part of the stay experience team at Vrbo™ (part of Expedia Group) which is responsible for the post-booking experience of a traveler. My team consisted mostly of UI devs working to make the UI of vrbo.com more flexible and robust. I also got a project based on React, React-testing library, and GraphQL, which were in my area of interest.

The first week

Our first week was full of learning and workshop activities planned by the early careers team. We learned all about Expedia Group, its culture, and its values. On the first day, we had an introductory session with our buddy and manager and found out what kind of things we would be working on in our internship. In various workshops and sessions, we learned about Git/GitHub, the API First approach, testing libraries, and many more sessions for personal development. We were provided with all the resources and things we might need to learn before starting with the project. We learned the technical implementation of stay-UI, which is an isomorphic/universal React-based web app. We discovered how GraphQL makes queries to fetch data at the component level.

My project

My project was about implementing atomic design methodology in the MyTrips traveler page for the Stay Experience team. Below is a picture of the MyTrips page of Vrbo. Here we have 3 sections for showing different types of trips and many cards representing the detail of an individual trip. When you click on a card, it will take you to the details of that particular trip.

Why we are doing this project?

The motivation behind this project is to make each and every component so reusable that it can be used throughout the codebase and in other Expedia brand websites. This will remove redundancy, make the code cleaner, and reduce the components' bulk.

My initial task was to break down the page so that it can be made up of atoms, molecules, and organisms. You might be thinking, why do we have chemistry in a software development internship? Let's dive a little into what atomic design methodology is.

Atomic design methodology

This is a method for developing user interfaces where a page is divided into templates, a template further consists of organisms, and then an organism is made up of many molecules and then a molecule is further made up of atoms.

This design methodology has 5 main stages:

• Atoms: These are the components that can't be divided any further and they just render the content we provide to them without putting any logic inside.
• Molecules: These are relatively complex components that are generally made up of atoms and smaller molecules. There can be some logic put inside these components.
• Organisms: Organisms are complex components that are made up of atoms and molecules working together. The main difference with organisms is that it fetches its own data and doesn't depend on the parents.
• Templates: Templates are page-level objects that place components into a layout and articulate the design's underlying content structure.
• Pages: Pages are specific instances of templates that show what a UI looks like with real representative content in place.

Breaking down the page

My project started with the breakdown of the MyTrips page into further atoms and molecules and I created a spike diagram for it.

After the breakdown, I went into developing each molecule and atom along with writing the unit test for them using react testing library. Writing test cases was really a new thing for me. I really enjoyed how we can directly make sure if our code is working fine in all the conditions by passing the props accordingly and checking if we are getting the desired output.

Getting review comments from all other team members has contributed to great learning. Testing the code for all the corner cases and not leaving anything that could cause problems is very important. After all the processes of testing and reviews from code reviewers, the PR went into production.

Our impact

Using atomic design methodology, we used data fetching at the organism level. So, what is the benefit of that? Let's assume a page has multiple organisms inside it. We used to get the pages when all the content of the page has been fetched, but now we won't have to load the whole page at once. We will only load the data for the organisms visible on the screen and thus make page loading faster. This method of loading a page is known as the lazy loading of components.

We also made important improvements to our error handling using React error boundaries. Since now our components are now wrapped inside the error boundary, it will show a fallback UI when a particular component fails. The whole page will remain intact and a meaningful message will be shown where an error has occurred. This will also create an alert with information about the failure so our devs can work on it.

Challenges

1. The first challenge that I was faced with was setting up the codebase on my Windows machine. Since everybody else in the team had a Mac and errors for my windows machine were different, I had to take help from other fellow interns who had joined earlier.
2. The codebase of the stay UI is very big and it was a bit overwhelming for me at first. But, with the help of documentation provided by the team, we understood the flow and started up with the process.
3. Creating an architectural diagram for the MyTrips page and working on it was challenging at first. Thinking of all the possible cases and covering them in the documentation was real learning and I really enjoyed the design spike.

End of a beautiful journey

My last week was my presentation week and I had to present everything I had done in the last 7 weeks. I really enjoyed explaining every bit of my project and what I learned throughout my journey. On the last day, we had our farewell, we had a long chat with every team member and played games. Then we logged off Expedia. Everyone left me with beautiful memories.

Learn more about technology at Expedia Group