Serverless Social Network w/ React Native, AWS Amplify, and Firebase

Stefan Majiros -

Citoo is the serverless social network MVP with content moderation control, through which users could share pics and videos of their favorite places in the city they live.

The 2 app variants were developed where each use either: AWS Amplify (Cognito, Lambda, S3, AppSync, DynamoDB, SNS) or Firebase (Firestore, Cloud Functions, Cloud-Messaging, Storage).

I was responsible for UI / UX research, mobile design, mobile development for Android and iOS (with React Native), and serverless development with NodeJS.

In this post, you can find the main business requirements, final design, features, challenges, and my price estimation for a similar app.

Main Business Requirements

  • Users could signup with email/password and social providers (Google & Apple Sign-in) and they would be verified with the phone number (MFA)
  • Users could upload images and video posts of their favorite places (with GPS coordinates) in the city they are located
  • Users could browse uploaded posts on the map
  • Posts could be liked and commented
  • Content moderation (posts containing explicit content like nudity,  violence, etc. will be "blurred")
  • Users could chat with other users after establishing friendship (creating friendship consists of creating, sending friend requests, and approving / rejecting them)
  • Users who are friends could also use live video-calling, or share their mobile device screen in live video calls (provided by Zoom)
  • When chatting, a user could share text, voice, video, or images (from camera & gallery)
  • Users could search for other users (based on their description in their profile)
  • Users could edit their own profile (edit description's text, and profile photos)
  • Users are notified about new friend-requests or new chat messages with push-notifications

Design

In the freelance mobile development studio at stefan-majiros.com, I always make sure to start working on a mobile app by creating high fidelity mobile design files using Figma. Then and only then, after a design is approved from the clients side, I will transform design into code using Storybook components. See the final design of Citoo below:

Apple Sign-In and Google Sign-In Support

PIN Code screens (on the left in Registration flow, on the right in Login Flow)

Browsing Cities and Posts

Profile Screen And Friendship Requests

Map View and Comments Screen

Camera Layout and Custom Gallery Component

Chat Example

Chat With Custom Gallery
Opening chat and list of all friends in the app

Project Challenges

  • Data Modeling (when using serverless NoSQL databases like Firestore or DynamoDB, it took a little more time to figure out how the data should be modeled or organized properly in order to maintain elasticity and scalability of the app)
  • The Architecture Of The Solution (data protection, populating Algolia Search Index, exchanging Zoom meetings details were not trivial problems to solve)
  • Security - this comes in hand with data modeling, as typically, in such kind of application as Citoo, users prefer to have some data that are:  private (accessible only for given user), protected (so the users e.g. in some group could access it) or public (in some cases, the part of content could be accessible also to people outside the app). AWS Amplify and Firebase require a different approach to enforce security.

Implemented  Features (Technical)

  • Users could upload and browse posts (the post contains text description and either picture or video taken from gallery or device camera)
  • Posts are uploaded to the city where a user is currently located (using reverse geo-coding)
  • All uploaded posts could be liked, or commented
  • Maps Integration offers additional UI for users to display relevant posts close to their physical location
  • Moderation Control:  all uploaded content is moderated using AWS Rekognition or Google Cloud Vision (if the uploaded data contains nudity, sex, violence, etc. the post will be blurred immediately)
  • Generating Thumbnails of uploaded video posts on the cloud-side using NodeJS
  • Multi-Factor Authentication: User signup w/ email&password or social providers (Apple Sign-in, Google Sign-in) combined with PIN code, FaceID, or TouchID authentication
  • Chat with support for sharing text, videos & images (from the camera or the gallery) and voice (playing and recording) among users who are friends
  • Video Calling, and sharing mobile device screens using Zoom SDK
  • Modeling friendship (sending friend requests, establishing friendship) in order to be able to chat with them
  • Algolia search integration (index as a service) - as DynamoDB and Firestore databases do not offer reliable way for indexes / full-text querying
  • Push Notifications
  • AWS AppSync integration (GraphQL service) for real-time data exchange
  • Storybook is used for 'testing' of components, development the custom of mobile design system and easier maintenance of the app in the future, Jest for unit testing
  • Business logic is implemented with Redux and Redux-Saga
  • App Localizations into English and French
  • Lottie Animations
  • The support for multiple environments and app variants (dev and prod) with MS Appcenter CI pipelines.
  • Firebase Perfomance, Remote Config, Crashlytics (to add dynamic configuration and track errors in production)
  • Build pipelines in AppCenter

Estimation of Price and Delivery Time

The estimates below were created with having a typical 40-hours workweek in the mind. However, working in my own developer studio gives me the sporadic possibility to work more than 40 hours per week without asking anybody for permissions, and if the time to market is really crucial for you, I can even hire an additional freelancer whom I trust to help deliver the app to help your business faster.

The development studio at stefan-majiros.com could deliver a similar app with custom relationships between data) starting from 20k EUR, ending somewhere around 45k EUR (based on further complexity or additional features).

Regarding time, a similar app could be developed in the time range from 40 to 82 man-days (starting from scratch, creating a design,  Storybook components, modeling data structures with security in mind, and finishing development with submitting in the stores). If you do not plan to use custom data structures or model other complicated relationships (you want a "clone" of Citoo), a similar production-grade app could be shipped under 30 man-days to help your business.

Saying in calendar months, if you are not interested man-days, the total development time for similar app for iOS and Android could be in the range of 2 to 4 calendar months.