✨ HackNC 2024 1st Place Winner! ✨
Developed by Ajay Gandecha, Noah Smith, Jade Keegan, and Matt Vu for HackNC 2024 at UNC-Chapel Hill. View Unplugged's DevPost submission for HackNC here.
Note: This application was developed entirely in a 24-hour period as part of HackNC. No further commits will be added on the main branch to preserve the state of the project at the end of the hackathon!
With the typical social media user spending an average of 2.4 hours a day—and teenagers nearly doubling that at 4.8 hours—new generations dedicate a significant portion of their time to consuming random content, much of which has little impact on their lives. Many try to delete social media apps entirely, but doing so often means disconnecting from friends and family. In addition, since many student organizations on college campuses use social media to share important news and upcoming events, disconnecting entirely from social media leaves students entirely out of the loop.
That's were Unplugged comes in! Unplugged offers an alternative way to interact with social media, enabling users to see posts from only those they care about across their various social media accounts. Unplugged offers many ways for users to customize their feed, enabling them to stay connected with friends, family, and their communities without being subjected to advertisements, social media algorithms, and unsolicited content.
Users of Unplugged can:
- View a chronological feed of their friends posts from across many social media providers at once (including Instagram and Facebook).
- Supports all forms of content, including text, single image, image carousels, and short-form videos.
- Filter their feed based on social media provider.
- Hide like counts on posts.
- Hide all video shorts on the feed, commonly considered the most addictive form of social media content.
- Choose only specific accounts to show for each social media provider. This is extremely useful because for example, a user may follow 100s of accounts on Instagram but only want to see posts from 10-20 accounts.
Unplugged is a native iOS app built using Swift and designed using SwiftUI. There were many interesting and challenging technical considerations for implementing this project, the key ones are discussed below.
One of the largest technical challenges for Unplugged was accessing Instagram and Facebook feeds for the user. By default, Meta does not have any direct APIs for this data. To reliably load Instagram and Facebook data, we needed to (1) reverse-engineer the endpoints used by the traditional Instagram and Facebook, and (2) call these endpoints using the user's authorization credentials every time.
Meta uses GraphQL API endpoints for loading posts on a users feed for both Instagram and Facebook. We were able to locate these endpoints in the browser developer network tools for both Instagram and Facebook and view their output. A very large amount of time was spent parsing this data to locate where post information is stored. We also had to do research into other properties of the API request, including headers and parameters. To load the feed for both social media platforms in Unplugged, these headers and parameters must be configured correctly when making the API requests in the app. Most of the functionality for loading both Instagram and Facebook via the reversed-engineered APIs can be found in InstagramProvider.swift (here) and FacebookProvider.swift (here) respectively.
To run these endpoints successfully, we need to trick the endpoints into assuming we are logged into the social media account itself. When users connect Unplugged to their Instagram and Facebook accounts respectively, users log into their accounts in a WKWebView in the app. Once they log in, cookies are stored in the web view that store authentication information and details. If we were to call the endpoints we created above using the cookies from the web view when the users connected to their accounts originally, the endpoints will succesfully return with post data. The good news is that Swift's WKWebViews maintain a shared HTTP cookie storage (accessible at HTTPCookieStorage.shared) which would contain these cookies. These cookies, combined with the endpoints above and some parsing, return a list of posts for each social media account the user is signed in to.
Whether these cookies occur or not also is used across the app to determine whether or not a user is authenticated for the service. If Instagram or Facebook cookies exist, then Unplugged is connected to those accounts. Also, we do not need to worry about cookies expiring here, since these cookies typically are long-lasting (since Meta would want people to have to reduce the number of times that users need to sign in online).
The feed can load dozens of images and videos, which when downloading at the same time from the internet, significantly increases latency and makes the app lag substantially. We had to implement many features to the feed page to ensure that the "infinite scrolling" experience typical on social media apps would be as seamless and fluid as possible. First, we implemented caching for both images and videos, so the same images and videos do not get redownloaded every time they appear. We also used asynchrony (built into AsyncImage in SwiftUI, but using an external package for AVVideoPlayer) to ensure that the main thread (where the UI sits) does not freeze while media is downloading. The feed view also uses lazy loading (using SwiftUI's LazyVStack) so that images are not downloaded all at once, with the process only starting when the view needs to be drawn. In addition, the API endpoints above are paginated by default (how Instagram and Facebook's infinite scrolling works), so we were able to create infinite scrolling using a similar setup (load new data once the user scrolls near the end of their feed).