Social network for international language learners
Background
I was always fascinated by foreign languages and also intriuged by how difficult it is to learn a new language from scratch. Many people visit language classes to learn the basics but then later on don't focus on it anymore and forget many aspects of the language. I wanted to created a modern and aesthetic looking and feeling (UI/UX) platfrom, that enables users to connect with people around the globe in order to learn a new language while getting enlighted about the cultural aspects of the country, where the native speakers are from. Existing websites out there aged, not that well though. They are old fashioned and awkard to use. Their features are less inutitive and slower. So my goal was to offer something better that is exisiting out there.
Features
Everything is very interactive and less static. You get notifications, similar to an operation system, whenever there is something new in real time. Here is an uncomplete list of the features that the platfrom offers:
Chat
In order to keep users on the platform, it is important to offer the features for texting, that they are used to from other messengers. Even though I didn't want to replicate all of the features that are offered by like WhatsApp or something similar, I still wanted to offer the essentials, that users are familiar with. So I implemented editing, deleting, copying and quoting messages.
One of the major differences to other messengers is the ability to translate a message of a chat partner right in your preferred language. Therefore it is basically possible to text with someone in a completely different language, but you are still able to understand each other!
The video also shows a dashboard, which offers statistics of how many users people already interacted with. It provides insights into interactions and which countries the chat partners are from.
Profile Page
Every social network account needs a proper profile, so that people get to know more about their friends. This profile page shows the user's native and learning language as well as an about me section. People can message or wave each other to start an interaction. They can also send a JellyCoin (my own currency) gift. Jelly coins can be earned by being active on the website. I developed an algorithm that detects user activity on the website. As shown in the screenshot below the whole web app is offered in dark and light mode and automatically detects the default color scheme based on the operation system and adjusts it accordingly.
Moments
Similar to Stories and Reels in WhatsApp and Instagram, I wanted to connect people with each other. Since the heart of that app is to make new socials connections, I wanted to show randomly new Moments of other users. Everything the users posts is strictly moderated by AI, while the analysis is still GDPR-compliant.
Connecting via music & interests
Instead of only focusing on connecting by languages, I also wanted to add the feature to connect by common interests. People can search hashtags and find common interests and get a list of other users who match the interests.
Futhermore people have the ability to share their favorite song via SoundCloud. After contacting SoundCloud, they gave me an API access, which enables users to pick their favorite song and put them on their profile page. User then can react to it, which then appears in the notification center of the user in real time.
Tech stack
For a platform like this it is essential to use something that is SEO friendly. Modern Single-Page-Applications (SPA) aren't that SEO friendly for many search engines, due to the client only rendering. So my choice was to use NextJS, which is based on React, but offers Server-Side-Rendering (SSR), so the actual html document, already offers all the necessary DOM data, that a search engine can read easily. Moreover it is a full stack solution, so there wasn't any need anymore for using another backend to connect to the database. However I also integrated a seperated WebSocket service to offer real-time updates. Everything is hosted serverless in a cloud. I also integrated an S3 Bucket, and several AI services by AWS and OpenAI. NextJS offers Tailwind by default, which is handy, in order to design something responsively for all devices. I really love this tech stack and it is my go-to for all current and future projects as for now! I am using end-to-end testing with Playwright to ensure that everything works fine, whenever I do some refactoring.
Security
Keeping the users and the system safe & secure is the one of the heart features of the app. It is important to detect fraud and scam even before someone got harmed. I implemented AI algorithms that detect suspicious behavior, when signing up or logging in. I created a threat based score system. If it reaches a certain treshold then it either gives an alarm to a moderater to review the case / user, or it locks the account right away and forces the user to verify. Moreover for keeping the application safe, I have DDoS protection, rate limits and firewalls in place. Every content that gets posted, no matter if it is a text or picture, it gets reviews very quickly by AI before it gets published, in order to keep the platform family friendly.
Summary
Developing a platform like this is intense because besides focusing on the core features, there is so much more to consider, like deployment, security, SEO etc. I left out many of the work that I did on this project on that article because I do not want to bore the reader too much. Instead I just wanted to give a quick overview about my work on that project. If there is any feedback or question regarding to this project, feel free to send me a message! ☺️