Mock Locker

Mock Locker

A modern shoe store app showcasing enterprise iOS development skills. Built with SwiftUI featuring tab navigation, product carousels, category grids, and optimized image loading. Demonstrates clean architecture and reusable components. Portfolio demonstration - not for commercial use.

A modern shoe store app showcasing enterprise iOS development skills. Built with SwiftUI featuring tab navigation, product carousels, category grids, and optimized image loading. Demonstrates clean architecture and reusable components. Portfolio demonstration - not for commercial use.

Recognizing that realistic data would be crucial for demonstrating the app's functionality, I began by building a comprehensive merchandise data model from scratch. Without access to an existing API, I manually researched and curated authentic product information—sourcing real shoe brands, descriptions, sizing options, and imagery from across the web to create a robust dataset.

This foundational step, while time-intensive, was prioritized first because it would inform every subsequent UI and feature decision. Having realistic, varied data early in the process allowed me to design components that could handle real-world content scenarios—different brand name lengths, varying description formats, and diverse price points—rather than building around placeholder text that might not reflect actual use cases.

The investment in authentic data upfront ensured that every feature built on top would be tested against realistic content, leading to more resilient UI components and a more convincing final product for portfolio demonstration.

desc 2

After building the tab bar and head view, I began with the horizontal scrolling product carousel using SwiftUI's native scroll capabilities. Started by designing a reusable card template with a clear visual hierarchy—thumbnail image at the top, followed by brand, product name, shoe type, and price, each styled with distinct typography to guide the user's eye naturally down the card. The modular approach allowed me to focus on perfecting the single card design first, then seamlessly scale it by embedding the template within a horizontal ScrollView that dynamically populates from the merchandise data model. This component-first thinking ensures consistency across all product cards while maintaining clean, maintainable code that can easily adapt to different product types or data sources.

Once I had the template done, It was easy to implement the rest. the bulk of the module was defintaley in the template. It also serves as a great way to scale the module to modify it in the future.

desc 55

Let's talk

Time for me:

Email:

RandyVarela5@gmail.com

Phone:

Reach out:

Designed in

By

© Copyright 2024

Let's talk

Time for me:

Email:

RandyVarela5@gmail.com

Phone:

Reach out:

Designed in

By

© Copyright 2024

Let's talk

Time for me:

Email:

RandyVarela5@gmail.com

Phone:

Reach out:

Designed in

By

© Copyright 2024