Mobile E-commerce App With Stripe Payments and GraphQL CMS (Strapi)

Stefan Majiros -

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

Onboarding part 1.

Onboarding part 2.

Coffee List and Detail

Coffee List and Detail

Auto Ordering

Onboarding for Bluepass Mobile App
Coffee Auto Order Flow, part 1

Auto Order - Last Steps

Shopping Cart

Empty States, and 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.