iOS App
Available in English & German in the AppStore.
Repository: github.com/ImagineSocial
Program and design by Malte Schoppe
70+ views
57 view controllers
35k+ lines of code
90% Storyboard, 10% Programmatic
100% Swift
Firebase as authentication service, cloud storage and NoSQL database
Dark mode
Push notifications
Use of Page-, TabBar-, Table- and CollectionViewController, Search- and NavigationController, REST APIs
= Information
= Nerdstuff
The main feed
The app's home screen shows all posts shared with the Imagine community in an endless feed.
If a user is logged in and follows one or more communities, the community posts in the corresponding time period are loaded and added.
Swiping or tapping the profile picture opens the side menu. Among other things, this shows the current notifications for likes or comments.
1. Show placeholder
Cells.
2. Load header.
3. Fetch last 15 posts.
15th post sets date x.
4. Fetch followed
communities.
5. Fetch posts of followed
communities till date x.
6. Combine community
and normal posts
and present them.
7. Load notifications
and current user in
the side menu.
8. When near end: Fetch
next 15 posts and
repeat steps 5 & 6.
The posts
The user and the optionally linked community are selectable in each post.
There is a menu to save, delete or highlight the post.
The posts can be interacted with by using four different reactions. The meaning is explained when the app is first opened.
Next to the number of comments, a small preview is used to show the user if a description has been added to the post.
Text Post
Picture Post
Link Post
YouTube
Post
MultiPicture
Post
Songwhip Post
GIF Post
Show text only.
Show single
zoomable picture.
Show metadata
of website incl.
preview.
Show YouTube
Video. Playable in the feed or in the browser/
app.
Show up to
three pictures
in a collectionView
and swipe
through them.
Show a preview of a song. Animate to web view
to select the streaming
service of choice.
Show a looped
and muted
Video in the feed.
All cells use auto layout and are self sizing through automatic dimensions.
To post
In the third tab you share new posts.
By default, posts are shared with the entire community in the main feed.
If you link a community, the post will also be displayed in the linked community.
If you want to share the post only in one community, you can specify this after the selection.
Posts can be posted anonymously to address difficult topics.
Upload text only.
The User can crop if needed. Convert and compress to save space.
Upload picture to storage and upload the url to database.
Same as picture post but up to 3 times.
Check if the url is valid. Get metadata incl. preview from website and upload it.
Check if the YouTube link is a song. If so upload music post. If not upload url.
Check if it's a valid url and a .mp4 link. Upload if true. (Just mp4 for now)
Switch to feed and reload when posted.
Music Post
Share your music with the Imagine community and discover recommendations from other users.
Open the shared music conveniently in your streaming service of choice.
1. Get the metadata and the relevant link through the Songwhip REST API.
2. Get the link metadata and preview (for the Android App).
3. Upload the data to the database.
Open up the web view and load the Songwhip site. Animate the transition.
Call parent tableView to update the height of the cell.
Listen for the interaction inside the web view and open the streaming service.
Post & User-profile
Selecting a post in the feed takes you to the post view.
This is where the following details are shown:
- Images are displayed in full size.
- The "Likes" are displayed if it is your own post.
- The description is displayed.
- Comments are displayed.
- Comments can be made.
Add answerView programmatically.
Change Y coordinate when scroll view scrolls.
Fetch comments:
1. Fetch top level comments
2. Fetch user (commenter)
3. Look for comment children (intended comments, if any repeat step 2)
Post comment:
1.Check if allowed (not blocked by OP).
2. Upload comment.
3. Get notification recipients of post.
4. Set notifications.
5. Reload comment tableView with new comment and reset the answerView.
In a user's profile you can find the posts and other optional information.
The name is only displayed in full in your own profile or among friends.
The social media buttons link other social networks.
Communities
With the help of the communities you can talk about topics and interests with friends and strangers.
The topics (AddOns) provide an individualization of the community and an additional grouping of the posts within the community.
A discussion view in a Pro/Contra style is optional.
This serves an in-depth discussion of a central thesis.
The feed displays the posts from the community.
1. Load Views in PageViewController and set delegate for each.
2. Load Community Header.
3. Call delegate when one of the childrens scrollView scrolls.
4. Adjust header position accordingly.
5. Detect page changes and check if header should be presented.
6. Animate header into place if true.
AddOns
The topics (AddOns) can be selected and individualized by every user in the theme store. Through the AddOns, the communities can be designed according to the users' ideas and expanded as needed.
A collection of posts and communities on a topic.
Select already existing posts or create a new post that lands directly in the add-on.
In this add-on the posts are scrollable horizontally, after selection they are presented as a feed.
A simple question and answer construct to help each other.
Neutral and anonymous.
Present another community in a clear way, should it be appropriate to the theme.
A collection like the one on the left, but with an underlying YouTube playlist that can be accessed with a tap.
Fetch and show latest posts. Search imagine (limited) if needed.
Fetch addOn items when cell is loaded. Initiate collectionView.
Load addOn feed and show posts.
1. Fetch questions
2. Fetch answers (children)
3. Animate changes according to selection
1. Fetch community
2. Fetch last 6 picture community posts
3. Initiate collectionView
Fetch addOn items when cell is loaded (like default). Initiate collectionView.
Playlist AddOn
A playlist from Imagine users.
Organized and convenient, you can select and open individual songs or listen to the playlist as a whole on your streaming service.
Fetch and show latest music posts.
Search imagine (limited) if needed.
Upload item ID incl. album cover, name and title when selected.
1. Fetch items.
2. Load items.
3. Make header image from first four items.
Case 1: Item tapped:
Animate and load the webView, modify height of addOn. Open title in streaming service if tapped.
Case 2: Playlist tapped:
Open playlist in preferred streaming service.
Settings
There are individual settings for the user profile, moderated communities as well as AddOns.
One tableViewController for every case. Easily expandable. (e.g. post settings, coming soon)
Five different cells: Text, Picture, Location, Single Switch and Date Picker.
1. Fetch data of the relevant object.
2. Add different sections and cells, fill in the fetched data and change the description label if needed.
3. Add additional information as footer if needed.
4. Detect change through return tab in keyboard, changed order in the tableView or a selected picture.
5. Categorize the change through an enum and upload the change to firebase.
Imagine Community
The fifth tap is for the Imagine community.
Imagine stands for transparency, so here you can see various information about the network.
For example, there are current projects and also graphics about our principles.
You can also access the proposals, which are submitted and voted by the users. In this way, we want to encourage users to build the network with us and take responsibility for it.
A FAQ section, settings and areas where we need help can also be found here.
Load the three sections and two header into the collectionView. Fetch the latest jobOffers and BlogPosts.
Check if already voted, before increasing the vote count.
Load preferred settings out of the phone as user defaults.
Basic Network Features
The chat is intended for a first communication.
The use is limited, as there are some features missing, e.g. end-to-end encryption.
When registering and logging in, the user is guided on a personal level through the data entry and the specifications of the network.
In the second tab you can discover communities and their new posts.
You can also search Imagine by posts, communities and users.
Fetch the latest picture and GIF posts and display/play them.
Query the database with ">" and "<" for the title and tags, to get a basic search.
Fetch the chats, its user and the last message asynchrouniously.
Animate up to 13 different screens with the different input data.
Other
Posts can be reported or visually marked.
If the content violates the rules, it will be removed.
If a post contains questionable content, it can be visually marked. This makes it clear to users that they should take the underlying information with a certain degree of skepticism.
After launching the app, the user is guided through a short introduction to the network.
In addition to the advantages of the network, the user is also asked to register in order to take advantage of all the benefits.
Besides the tutorial, there are four info screens within the app.
Polls can be shared with users in the feed.
This allows the administrators or moderators of a community to better understand the users and act on their behalf.
About us
Malte Schoppe
I have been programming intensively for 3 years, almost 2 years of it on Imagine.
Until the structures were polished and the functions made sense, a lot of things had to be tried, tested, deleted or relaunched.
I learned my basic Swift knowledge through an Udemy course and deepened it through YouTube & Ray Wenderlich tutorials, a lot of StackOverflow, documentations and more advanced courses.
Besides small initial projects and about 9 months on a live quiz app called "HYPE" I implemented what I learned directly at Imagine.
I see my strengths in the handling of Table and CollectionViews and their Cells, due to the numerous uses within Imagine. By now, I especially enjoy UI/UX development. I'm getting better at straightening out complicated views, animating functions and designing them intuitively, that's what excites me the most.
My weaknesses, and therefore those of the Imagine iOS app, lie in the unit tests and the access control declarations of variables.
I put myself in the foreground here because I am looking for a job.
One must not and will not forget Matz, who has programmed the Android app, he also gets his page here soon.
Actually, it is intended as a community project anyway, but unfortunately we still lack the community. 🙃
