One of my main goals this quarter was to improve my comfort with frontend development, specifically with React. I had used it in my previous web development class, and never touched it again until my internship this summer. When I was faced with it again, let’s just say I was not totally excited to dive in. However, as I worked with it more, I began to find it more and more interesting. I think I must have passed some threshold on the learning curve where the way components work together and how information gets passed around finally “clicked” for me, and after that I knew I’d be wanting to spend some time practicing more with this framework after the internship ended. So, here we are!
Another thing that was great about my internship was the company’s internal design library of UI components which was available to their developers. It made it really easy to go from “I need a button on this page” to finding one that you knew was company-approved for design, accessibility standards, and basic functionality. This freed up time to work on incorporating the element on the page and getting it to do what was needed. While I have learned to enjoy frontend work more, this does not necessarily mean that I desire to spend hours toiling over getting the colors of an item just right, or determining the perfect amount of corner-rounding on a button or icon.
With all that in mind, when my group started our project, I volunteered to take on more of the frontend side of things (while also dipping into some back end items I specifically wanted to learn, such as how to work with AWS Lambdas – another teammate had experience with those already and has been a great help). My group members and I wanted to decide on a UI framework. After some research, we ultimately decided to go with Material UI framework. There were a few key reasons we chose this framework which I’ll share below.
Clean, Modern design
Our project is to essentially make an updated version of Craigslist – which, as anyone who has used it can tell you, is very very dated in its appearance. Visually, we wanted to bring it up to date. Material UI features a clean, modern, simple yet visually appealing design that helps meet our goal of jazzing up the appearance of the original site.
Another design aspect that I appreciate about MUI is that it implements Google’s Material Design. This further makes the design and UI familiar and easily understandable/digestible to users.
Mobile-friendly
One of our requirements for this project is to have it function cross-platform, so choosing something that would work just as well on mobile as it would on a full-screen browser was a big priority for us. Material UI has shown so far to be very flexible in this regard. This week I spent time learning about MUI’s grid system for components and how to set up different breakpoints for how many components appear on one line depending on screen size. This allowed me to bring the UI mockup I planned out at the beginning of the quarter to life.
pairs well with typescript and react
Having used Typescript in my internship for the first time, I really wanted to gain more practice with this language. The fact that MUI works so well with both Typescript and React was a huge bonus. Seeing so many of their component sample code in TSX/React has given me much more exposure to this.
Consistency and faster development
Having an agreed upon UI framework ensures consistency not only between the sections/pages of our project, but between the members of the group. This way we’re not all trying to design things that fit together, we just rely on the framework and incorporate certain customizations that we can decide upon as a group (what font to use across the site, etc.) It cuts down on the back and forth of getting a group to iterate on and approve designs, and has definitely allowed us to focus our time on the “meat” of the project. Given that we only have a 10-week quarter to get it done, this has already proven to be a prudent decision.
