Social networking app

for iOS & Android

While I was an university student, I had the idea to create a social networking app, for forming new friendships around the world. After accquiring the nescessary skills how to create a SPA with React and a backend in Node.js, I started working on it and re-engineered it into a mobile application with React Native later on.

8 min read

Background

I love creating something from scratch. One day I had the idea of creating a social networking app, which would enable you to form new frienships with people around the world. That way you could learn more about other peoples' culture, mentality and languages without being a dating app though. Unlike Facebook or Instagram I wanted it to focus purely on connection with new people, rather than following the activities of your already existing friends or popular influencers. Furthermore I wanted to use that project for learning more about modern app and web development with state of the art technologies.

Technology Stack

After comparing Angular vs. React, I chose React as a frontend library because I loved the simplicity of it, while Angular is way more cluttered. Easy tasks are way simpler and faster to implement in React than in Angular and the learning curve is way higher. The opportunity to learn a web application library, which can also be used to make mobile phone applications seemed very handy and was later on the right choice. To use Node.js as a backend tech stack, was my first choice. The ecosystem with npm offers thousands of greatly supported modules, while the usage of one programming language for both backend and frontend seemed very useful. For storing app data persistently, I chose PostgreSQL which offers a great node package (pg) including pooling. While I created a REST api with Express, I maintained a bidirectional communication with native WebSockets. I created my own WebSocket management system, which handles connections, sends and receives tasks both on the client and server side (more later).

Let's get started ...

Instant Messaging (Chat)

The core of this app is the chat. It was important to give users a similar user experience, that they are used from using other instant messenger like WhatsApp. So it was crucial to send messages, quote them, delete them, even sending voice messages and more. The chat messages should be accessibile even when the app is offline.

Frontend Messaging (Chat)

The latest version of the chat consists of 27 React components. For transmitting the data throughout all those (sub) components, I used a global state management, called easy peasy. Easy peasy is an Redux abstraction, without the huge boilerplate. The two main screens are the user overview screen which shows all of your chat participants as well as the message log screen for each chat partner. For the message log screen I used an inverted Flatlist, which uses lazy loading by fetching more data when the users scrolls on top. For persistently storing the chat log I used a JSON file, that is stored directly on the device and contains all messages. It supports swipe gestures for quickly replying to a particular message, for which I used the PanGestureHandler.

For sending voice messages I used Expo's Audio/Video (AV) module, which allows to record a message and sends the file in Base64 to an Amazon S3 before sending it to the chat partner. I wrote my own audio player component, to play audio/pause audio messages and scroll through the audio by using the AV API.

Single messages can get deleted by opening an overlay if the user long presses a message, while it is also possible to delete the whole chat on both ends. Moreover users can get blocked, so they are unable to send messages to each other anymore.

Transportation

To send and receive messages in real time, I used WebSockets. A user can connect to a WebSocket, while the connection is managed. If a user loses their internet connection, the connection is managed and gets automatically detected as lost or terminated by using a ping pong mechanism. In that case unsent or unreceived messages get transported again automatically, as soon as the device is online again. The server as well as the clients can send and receive messages via WebSockets by subscribing to custom events. It took me quite a while to implement the whole transportation management logic both on the client and server. However I use this system for future work projects now.

Queueing / Caching

The messages are stored on the device for caching purposes to increase performance and give the user access to their message in case the phone is offline. I used Expo Filesystem to store a JSON file on the device, which loads the messages everytime the user opens the app. It loads the messages pretty fast, even if a chat log contains thousands of single messages. Since the messages are transported via WebSocket, it needs a steady connection to receive the messages. However if the user is offline, I developed a queueing system. It fetches the newest messages when the user comes back online from the database and flags the messages as received, which removes the messages from the queue.

Profile

Every user has a profile, which displays the user's location, age as well as which languages they speak. Moreover a user can have a small description as a text and/or a short audio introduction. A user can put hashtags on their profile to show what they are interested in or they indentify with. If you click on one of the hashtag you can see other users with the same interests, to connect better which each other. Additionally a user has so called Thoughts, which are similar to X's(former Twitter) tweets, which can be liked. If you follow an user, you will see the newest Thoughts on your own feed. While designing the profile screen, I noticed how important the appearance and communication of the profile screen design is. It makes a difference if you have a bigger picture or a horizontal scroll view of profile photos, which reminds the user more of a dating app (which I wanted to avoid).

Find new friends

To actually connect with each other in order to build up new friendships, you can search for users on a map. A pin on the map navigates you to the desired destination anywhere in the world. The search result pops up and shows all the people in the searched area. You can filter the results by gender, age and distance. Therefore this search can be used to either find new friends closeby or people around the world!

Final Thoughts

I am happy I succeeded to build a social networking app, with all necessary requirements, which was always my passion to create. However I also realized that it takes way more to just make the app. There is a lot to pay attention to like marketing, finances and much more, which I could not provide since I was working on that project all by myself. Moreover there are similar apps already out there, even thought they might not be super successful. So I've decided not to release this app, but rather to use it as a tremendous learning experience with those technologies. This experience will greatly benefit me in future projects.

Any Questions? Message me.