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:

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.

Kaf.y is an e-commerce mobile app, through which users could buy their favorite coffee and schedule automatic coffee orders (setup coffee-subscriptions). The app is aimed at digital nomads who found themselves in a city where staff in shops does not speak English. The app design was heavily inspired by local a coffee shop in Barcelona.

I was responsible for market research, UI / UX design, and mobile development. You can find design, features, challenges, and price estimation below.

Main Business Requirements

• Ordering coffee, and scheduling pickups at the shops
• Integration with Strapi CMS
• Accepting online payments (one-time payments and subscriptions) using Stripe

Design

Existing Brand - Local Coffee Shop In Barcelona

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

Onboarding

Coffee List and Detail

Auto Ordering

Shopping Cart

Project Challenges

• Integration of Stripe payments (but thanks to their excellent docs, it was not such a big challenge)
• Data modelling in Strapi
• Authentication in Strapi

Implemented  Features (Technical)

• Strapi CMS integration using GraphQL
• Modeling data in Strapi dashboard so client would be able to update or add new products
• Processing payments with Stripe and serverless Lambda functions hosted at
• The app uses PIN code / FaceID / TouchID (biometrics) authentication
• Storybook is used for 'testing' of components, development custom of the mobile design system and easier maintenance of the app in the future, Jest for unit testing
• The support for multiple environments and app variants (dev and prod) with MS Appcenter CI pipelines.
• Firebase Crashlytics (to add dynamic configuration and track errors in production)
• Localization into almost 100 languages
• Units tests with 70% code coverage,
• Redux-Saga and Redux

Estimation of Price and Delivery Time

The development studio at stefan-majiros.com could deliver a similar app starting from 20k EUR.

Working in my own developer studio gives me the possibility to work more than 40 hours per week without asking anybody for permission, and if the time to the 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.

A similar app could be developed in the time range from 20 to 42 man-days (starting from scratch, creating a design, writing Storybook components, proceeding to the iterative development, and finishing with submission in stores). If you do not plan to use now-well-known standards like CBOR or use any very custom features, a similar production-grade app could be shipped under 30 man-days.

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

Bluepass is an open-source, enterprise-grade mobile app built with React Native in order to scan, verify and store EU Covid Travel Certificates that are also known in some EU countries as Greenpasses.

The app was developed in accordance with international EU and health standards and I was responsible for market research, UI / UX design, and mobile development. Take a look at its design, features, challenges, documentation website and price estimation below.

Main Business Requirements

• Scanning and verification of  EU Covid Travel Certificates (in QR format) using device camera and from images in the device gallery
• Storing verified certificates in encrypted form, on the device, and behind authentication
• Management of cryptographic keys used for signing and verification of travel certificates (each travel certificate is "signed" with JWT-like standard (CWT) where cryptographic certificates (.DER) are used in order to verify the integrity of travel certificates easier)

Design

Before development started, I had created high fidelity mobile design using Figma. Then I transformed this design into code using Storybook components. See the outcomes below:

Bluepass - Screenshots of Mobile Design

Project Challenges

• The biggest challenge was dealing with data in CBOR format, studying EU specifications and standards, and finding (or implementing)  libraries that work in React Native environment.
• Then, considerable effort was spent to reduce startup time on Android (from 6s to 2s) as we used Hermes non-compatible libraries (Note: When enabled, Hermes promise to reduce startup time without manual interventions to the code base).
• I also needed to develop few Native modules in order to parse cryptographic certificates, and create the forked version of the library that detects QR code in gallery images using Google Vision (in Android, embedded ZXing scanner does not work reliably and fast enough - it took more than 15s to detect QR). By using Google Vision SDK, detection of QR in the gallery image is done immediately.

The verification flow of issued EU Covid Travel Certificates consisted of several steps that included jsonSchema verification, jsonLogic validation, (expiry and issue) dates validation, and cryptographic verification of signatures.

Implemented  Features (Technical)

• Considerable effort was spent on studying standards and finding libraries to implement travel certificate verification in accordance with EU standards: CBOR, ZLIB, base45, COSE, base64, jsonSchema, jsonLogic, ASN
• Native Modules Integration (in Kotlin and Swift) for the validation of crypto signatures of issued certificates and their dates
• The data from verified QR travel certificates are stored in an encrypted database, credentials in Keychain
• The app uses PIN code / FaceID / TouchID (biometrics) authentication
• Storybook is used for 'testing' of components, and the development of custom mobile design system and easier maintenance of the app in the future, Jest for unit testing, Cavy for E2E tests
• Redux was not used, instead, I tried easy-peasy library (less verbose, Redux compatible library)
• The support for multiple environments and app variants (dev and prod) with MS Appcenter CI pipelines. The Bluepass is also AWS-Amplify ready (I integrated Lambda functions first in multiple AWS Amplify environments, but later after considerations - as they are no real "secrets and all health data stay on the device all the time - I decided to host some configuration data publicly in S3 for simplicity and easier management.
• Husky (Githooks) to force linting of source-code files before the push to the remote repository, and patch-package for dealing with bugs in open-source libs
• Added Swagger client into React Native for official API support
• Firebase Remote Config and Crashlytics (to add dynamic configuration and track errors in production)
• Integrated Google Vision to detect QRs on gallery images
• Optimized startup time using RAM bundle - reduced from 6s to 2s
• Stores deployment (private testing in Google Play and Appstore Testflight)
• Localization into almost 100 languages
• Units tests with 70% code coverage,
• E2E tests using Cavy executed at CI at the nightly basis

If you prefer to see the app in action, see this video:

+ Documentation website

The documentation website was also part of the delivery and was built using Docusaurus, deployed at Vercel, and currently is deployed live at this URL: https://blue-pass19.vercel.app/. It explains app features for technical people and developers, demonstrates some code patterns, and also contains QR Codes that were used for testing.

Estimation of Price and Delivery Time

If you are looking to build a similar app with me or any other freelancer, the price will be typically several thousand less than 140k. The development studio at stefan-majiros.com could deliver a similar app (that uses not-so-well widespread standards with integration of 3rd party native modules) starting from 20k EUR.

Slovakia government paid for a couple of Greenpass apps with very similar features reportedly over 140k EUR. However, they used the team of several developers, and they also added features that integrated government RESTful API.

Working in my own developer studio gives me the possibility to work more than 40 hours per week without asking anybody for permission, 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.

A similar app could be developed in the time range from 20 to 42 man-days (starting from scratch, creating the design,  Storybook components, studying new standards, and finishing development with submitting in the stores). If you do not plan to use now-well-known standards like CBOR or use any very custom features, the similar production-grade app could be shipped under 30 man-days.

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

Mobile STU-dent is the MVP (minimal viable product) of a cross-platform mobile application for STU (Slovak University of Technology) and its students.

At STU, no mobile application was available at that time, so enrolled students were forced to use a mobile-unfriendly website called AIS (Academic Information System) to access data like grades, etc.

In order to create a mobile application, I needed to design and build a RESTful API that integrated various data sources (the developed API had both the public and the private/secured parts). Also, as the AIS itself had no official APIs documentation, nor any public APIs, everything needed to be analyzed, almost reverse-engineered, and developed.

I was responsible for market research, solution architecture, UI / UX design, and software development at the client and the server side (in that time, I worked as a backend + mobile developer).  After the development of a fully functional MVP, the project was stopped due to unrelated reasons (the lack of resources).

Take a look at market research, its design, features, challenges, and price estimation below.

Main Business Requirements

• LDAP integration: Users could use existing credentials  for sign up and login
• Building and architecting API  (In order to develop mobile application, I had to design, implement and document a proprietary API)
• Displaying news from the faculty (organization-like) public websites
• Displaying news from the auth-walled AIS (AIS (Academical Information System) was the main source of the data for the mobile app. It had no public APIs, no public documentation.)
• Mails integration (Each student at STU gets access to 2 mailboxes - first mailbox is accessible only from internal network, and supports only POP3, and the second mailbox can be used for receiving emails from public using IMAP
• Browsing schedule, completed subjects, grades, syllabus previewer
• Browsing personal profile details

Market research

Before I started working on design, I created a short, but effective questionnaire as a part of market research. Then with small help from people working at the university, I distributed it to almost 1200 future users of the app / students aged 18-25.

By getting over 1200 responses, we got a really good insight into what users expect, and what features should be shipped when. 96% of the asked students responded, that they would install the app as they prefer to use a mobile phone to access these resources (55% of asked students uses prefer to use mobile instead of web portal). The connection price is not much important for them (the students equally used the Wifi and cellular data connection).

Regarding retention rate, almost 60% of users visit AIS every day. When asking about crowdfunding, 70% responded that it is the role of the university, not for the students. Last, but not least, having fancy design(8%) lost against having plenty of functionality (53%).

By asking a similar questionnaire, the road to deliver a successful mobile app is clearer, and more importantly, you can see what features are needed for your business, while backed by real-world data.

96% of responders wanted to display the content from the AIS, public faculty websites, and see information about their accommodation. However, some of the students replied, that they also wanted to see what will be for the lunch in the restaurants nearby, use built-in events-reminder,  even in-app messaging, notifications about canceled class, etc. Some students used other communication channels in their faculties - Facebook, faculty public websites (that are mostly in each faculty domain), or Slack.

With a limited time span (4 months), it simply was not possible to develop all the features that users wanted on my own and therefore I had to prioritize and re-evaluate all requirements. It seemed more realistic to onboard more developers to implement the next features right after the successful lunch of MVP.

Design

There were two versions of design for the app: below, you are looking at final version that was created after shortly after the work on project  was suspended:

Project challenges

• The biggest challenge in this project was analyzing the internals and the API of the legacy system without any documentation
• Then, quite a lot of effort was spent on mail retrieval (studying POP3 and IMAP protocols specifics)
• Management & Planning (prioritizing features and managing time was not always easy)

Implemented Features (Technical)

Server-side

• Spring Boot Web App with retrieving e-mails using Java Mail library
• Websites parsing using jsoup library
• Implementation of HTTP Basic Authentication with LDAP Integration

Client-side (Mobile)

• Redux, Redux-Persist, Reselect
• The data are stored on-device in an encrypted database, credentials in Keychain
• Swagger (OpenAPI) client integration
• Webview integration (embedded web browser)
• Email/password authentication using existing credentials

Estimation of Price and Delivery

Regarding mobile app estimate, a similar application could be shipped under 35 man-days (if the design is provided in advance).

Although the app does not use any complex business flows or integrates native libraries, the proper implementation of design takes some time.  When hiring additional freelancer, delivery time could be reduced drastically in this case - it would take about 20 man-days to ship a similar app with me and and additional freelancer, as in this kind of app, the most of time would take the implementation of UI, which could be easily run in parallel.

The mobile and serverless freelance studio at stefan-majiros.com could deliver the similar mobile app for Android and iOS within the total price starting at 12K EUR (the final price depends on the complexity of features, and design, time pressure, etc.).