ngMeetTheTeam is a seemingly simple code test riddled with custom elements, subtle auto layout requirements, and commonly overlooked UX considerations.
Originally an Objective-C project, it was converted to Angular as a straight forward yet complex coding example. The goal was to recreate the “Meet the Team” iOS application based on the (slightly modified) screenshots below. The app should allow the user to browse and learn about the team by scrolling through a list, and tapping anyone to learn more.
- Table View Cell - Custom font, color, image treatment, and disclosure arrow.
- Lato - A commonly used Google Font which doesn’t come with the iPhone by default.
- Text - Kerned.
- View styling - Code driven design made from two bezier paths which resizes fluidly without degradation.
- Text - Justified and kerned.
- Custom disclosure arrow placement.
- Profile Image - Scales to fill the available space in the header when scrolling down but locks to the top of the screen when scrolling up and slides under the lower half.
- Profile View - Dynamically sizes it’s height based on the contents/height of the ‘bio’ Text View.
- URL based images - A do-try-catch based function is used to request all images asynchronously without blocking the UI.
- UILabel clipping - Labels padded and offset to contain custom font descenders.
- Profile Image - Scales to fill the available space in the header when scrolling down but slides under the lower half of the view when scrolling up.