mjalbdour / instaclone-ios

An Instagram iOS app clone built with SwiftUI. INCOMPLETE

Starting Over

Privately working on c# & .net projects

instaclone-ios's Issues

Create Comment View

Check instagram comment page for any post with comments for reference.

Components

1. User profile image

• Small.
• Circle-clipped.
• Tappable.

2. Username

• Small.
• Bold.
• Tappable.

3. Content

• Small.
• 2,200 character limit.
• Characters allowed.
• Emojis allowed.

4. Heart Icon Button

• Outline.
• Tappable.
• Red on activation.

5. Humanized Date/Time

• Ex: 49 seconds, 2m, 1h, 2d, 2w (modified and check later).

6. Like Count

• 1 "like".
• 2+ "likes".

7. Reply Button

• Flat.

System secondary color (Sections: 4, 5, 6 & 7)

Create Comment Model

Create Feed Top Sticky Header

Check Instagram feed view for reference

Context menus options are not interactive.
All major components are tappable, title-sized.

Components

1. Home

• Content menu with (1. Home, 2. Following, 3. Favorites & Manage Favorites section Label style star icon).
• Downward Chevron icon.

2. Plus Square

• Context menu with 4 Label style icons (1. Post 3x3 square, 2. Story plus circle, deactivated 3. Reel Play square, deactivated 4. Live dot.radiowaves.left.and.right).

3. Message

• If available, overlay with an offset of top-trailing red circle that contains number of unread messages in white.

Create Post Caption view and bottom helper section

Check instagram post in feed for reference.

Components

1. Username

• Bold.

2. Caption content

• 2,200 characters limit.
• Only characters and emojis allowed.

3. Load comments button

• If available: "View all" No. comments "comments".

4. Humanized relative post date/time.

Create Highlight Model

To be described later

Create personal profile view

Check instagram personal profile view for reference.

Components

1. Activity Bar Section

• user_name with drop down icon.
• Plus box with context menu.
• Menu icon with sheet on tap.

2. Dashboard Section

• Account Category Name "Dashboard".
• "Tools and resources for creators".
• Right arrow.

3. Main Section

• Tappable profile image.
• No. posts with bottom label.
• No. followers with bottom label.
• No. following with bottom label.

4. Name.

5. Account Category if applicable.

6. Bio.

7. Helpers Section

• Edit profile button.
• Ad tools button -no link.
• Insights button.

8. Highlights Section

• Highlights as tappable circles with name underneath.
• Tappable plus circle creates a new highlight with "New" label underneath.

9. Personal Posts and tagged posts TabView section

• Personal posts tab with grid icon.
• Tagged posts tab with grid icon.
• Personal posts grid.
• Tagged posts grid.

Create post model - iOS

Create a simple post model in swift.

Create Feed Stories Bar

Check Instagram Feed View for reference.
Navigation to story main view not included.

Components

1. Story View

• User profile photo, circle-clipped, inside a stroke-only system-secondary-colored or orange (no gradient for now) circle.
• Username text underneath the photo, secondary color if already seen.
• Tappable.

2. Horizontally-scrolled stories.

Example:

Create Story Model

Create .gitignore

Create Post in Feed View

Check instagram feed for reference.
REELS NOT INCLUDED

---

Components

1. Header

• User profile picture circle-clipped inside story stroke if available.
• Username with follow blue flat button if not followed and "dot" in between the username and the follow button.
• Location under username if available.
• 3 Horizontal dots clickable icon with sheet on tap.

2. Content (Image only - Video only - Carousel of images and videos) No tags for now

• Max Height of 480, arbitrarily.
• Max carousel count of 10.
• Double tap to like with heart animation slightly shadowed (fill heart icon with red underneath).
• Carousel current content count top right corner. Ex: (1/7). In the original, this is only viewed when the post renders inside the feed view then disappears after ~3 seconds. No need to implement the disappearing mechanism for now.
• Make all content same hight if in carousel.

3. Footer

• Heart Icon - red when active.
• Comment Icon, push to comments view on tap.
• Send icon, pull up sheet on tap.
• Current carousel item if available, OPTIONAL.
• Save Icon, white when activated.

4. Likes

• "By" any random liker's username "and others" if available.

Create Basic Feed View

Check Instagram feed for reference.
Swipe right to messages view not included.

Example:

rpreplay-final1645956094_K0bTzZbe.mp4

Component

1. Feed Top Sticky Header

• Already created in issue #19, now make it stick.

2. Feed Stories Bar

• Already created in issue #15, simply add it in.

3. Posts

• Already created in issue #12 , now generate a list of it.

5. Tab View (inline)

• Home, feed-view.
• Search, search-view (Disabled).
• Reels, reals-view (Disabled).
• Heart, activity-view (Disabled).
• Profile, profile-view.