Front-end web developer and designer

The MPR News website is massively popular and was already a Next.js site, but its design and the finer points of its functionality needed a refresh. My team and I implemented the redesign presented in Figma. I paid careful attention to every detail, especially those with regards to responsive design, ensuring it still looked good and functioned well on every screen size from mobile to desktop. It was previously a JavaScript site, but new components were in TypeScript, and sometimes we updated old ones to TypeScript, decreasing the chance for errors. Speaking of which, the old site also had few unit tests, so I wrote many tests using Jest and Testing Library to ensure the components worked as expected.

I also was primarily responsible for the navigation menu and its submenus. I took care of accessibility concerns, such as moving focus to the first menu item of the main menu when it's opened (because the main menu doesn't come right after the button in the markup). I also contributed heavily to the frontend of the user settings page and the audio player, and much of the general website styling. I focused on keeping the visuals pixel-perfect insofar as I could while sometimes implementing my own design suggestions for better usability (for example, we weren't always given designs specifically for tablet views or given hover/focus styles, so I had to come up with my own and then code them). Good accessibility practices in general, such as by properly labeling form inputs, were also important to me.

Another challenge came from the fact that the site was originally in an older version of Next.js, so I had to understand some older APIs like getInitialProps, and how some components, like Link, used to be different.

Overall, working on MPR News was a great experience. My whole team brought their A-game and I was proud to be a part of it.