SwiftUI Pinterest Recreation

Inspired by the desire to master flexible grid layouts and explore aesthetic design, this project recreates the distinctive Pinterest UI using SwiftUI. With a focus on simplicity, the project showcases the power of SwiftUI in creating a responsive and visually appealing grid layout to display a collection of images. Beyond the technical challenge of implementing a flexible grid, the project also allowed for artistic expression through the arrangement of images, creating a visually pleasing and cohesive aesthetic. This project demonstrates not only proficiency in SwiftUI but also a keen eye for design and functionality.

What

A simplified recreation of the Pinterest UI using SwiftUI.

A responsive grid layout showcasing a curated collection of visually pleasing images.

Why

Driven by a desire to master flexible grid layouts and explore aesthetic design principles.

A project born out of a curiosity for SwiftUI and visual appeal.

How

Using SwiftUI’s declarative syntax and flexible layout system to build a dynamic grid view.

Careful arrangement and styling of image elements to achieve a cohesive aesthetic.

1. PostView.Swift

This code defines a PostView struct that represents a single post in the Pinterest UI. Each post consists of an image, a title, and a source. The image is displayed at the top, followed by the title and the source. The code also includes a popover menu that appears when the ellipsis icon or the image is tapped. This menu provides options to hide the post, report it, or close the menu.

PROBLEM: One of the challenges faced during the development of this project was managing the length of the post titles. With varying lengths of titles, maintaining a clean and consistent UI was a struggle.

SOLUTION: The shortenTitle function was introduced to address this problem. It ensures that the title of the post doesn’t exceed a certain length. If the title is too long, it gets truncated and an ellipsis (…) is added at the end. This function was a creative solution to maintain the aesthetic and user-friendly nature of the UI.

2. FolderListView.Swift

This code defines a FolderListView struct that represents a horizontal scrollable list of folders. Each folder is represented as a button with the folder’s name as its label

PROBLEM: The challenge was to create a user-friendly way to navigate through different folders. The folders needed to be easily accessible and visually distinct to indicate the currently selected folder.

SOLUTION: The FolderListView struct was created to address this problem. It uses a ScrollView to allow horizontal scrolling through the folders. Each folder is represented as a button, and when a button is clicked, the selectedFolder state variable is updated to the index of the clicked folder. The name of the folder is underlined if it is the currently selected folder, providing a clear visual cue to the user.

3. DataModel.Swift

This code defines the data model for the project, which includes two main structures: Post and Folder. The DataModel enum contains a static array of Folder instances. Each Folder instance includes a name and an array of Post instances. This structure made it easy to customize and be creative with the project.

4. ContentView.Swift

It displays a collection of folders and posts in a grid layout. The user can select a folder to view its posts. The posts are displayed in a two-column grid. The app also includes a bottom navigation bar with icons for home, search, add, message, and profile.

PROBLEM: Creating an aesthetically pleasing and user-friendly interface for a Pinterest-like application.

SOLUTION: It employs a VStack for vertical alignment of components, a ScrollView for scrollable content, and a LazyVGrid for efficient rendering of grid items. The bottom navigation bar is created using an HStack with system images. The selected folder state is managed using SwiftUI’s @State property wrapper, allowing for dynamic updates to the user interface.