Building a SwiftUI Electronic Business Card App (Linkworld) – A Step‑by‑Step Tutorial

The article begins by describing the need for a personal link aggregation tool after the author started writing on technical forums and managing contacts across multiple platforms, leading to the idea of an electronic business card similar to Linktree.

It then defines the MVP for the "Linkworld" project: a two‑page app with a personal homepage displaying identity cards and a page for creating new cards. The core feature is opening a web URL when a card is tapped.

Next, the author creates a new SwiftUI project in Xcode named Linkworld and explains the component‑based approach, introducing a CardView struct as a reusable UI component.

Variable declarations for the card are presented:

var platformIcon: String
var title: String
var platformName: String
var indexURL: String

These variables store the platform icon, title, name, and link URL, all of type String because they are used with Image and Text views.

The UI design section shows how to layout a single card using SwiftUI containers: an Image for the icon, an HStack to place the icon and text side‑by‑side, a VStack for the title and platform name, and a Spacer to push content to the edges. Sample code snippets illustrate each step, for example:

// Platform icon
Image(platformIcon)
    .resizable()
    .aspectRatio(contentMode: .fit)
    .frame(maxWidth: 48, maxHeight: 48)

The final card view combines the containers and adds padding, a fixed height, a white background, rounded corners, and horizontal padding to achieve a card‑like appearance.

To preview the card, the author imports icon assets, then instantiates CardView inside ContentView with concrete values, and wraps it in a ZStack with a colored background using Color and edgesIgnoringSafeArea to fill the screen.

The article concludes with a summary of the learned concepts: using HStack , VStack , ZStack , and Spacer for layout, and the benefits of component‑based development for code reuse and maintainability.