Search code examples
reactjsfirebasefluttersoftware-designproject-management

How can I design the system to share the same content on Mobile apps and Web?


I am developing a LMS for both iOS, Android and Web. Mobile apps are developed using Flutter and Web is based on React and I decided to use Firebase for backend and Storage. The features included are like general LMS, listing

  • User Authentication
  • OTP sending
  • Video/ Images / files accessing
  • Progress tracking and etc.

I am wondering how can I speed up this development? How REST API can be used in this development? How to share the same contents, user's data on both platforms? Any else suggestions of yours?

Your suggestions would be helpful for children in rural areas to learn.


Solution

  • To speed up the development and since you have asked how to share the similar content on mobile and web,

    you might be interested in shifting the tech stack of mobile from Flutter to React Native because then you can share the logic side of codebase for React web and React Native mobile. The view might be different since React Native is using mobile components.

    You might consider using a same design components like Material UI or Bootstrap to scaffold a similar look and feel in both web and mobile. If customization is needed, the customization also should be the same. Just a little bit of difference is tolerable.

    Some example of pre-made components to use.

    • User Authentication
    • OTP sending Video/ Images / files accessing
    • Progress tracking and etc.

    can be done using a service provider. Firebase already has user authentication. OTP sending can be researched in Google for best provider.

    For video/images/files, Firebase has a storage service as well. Progress tracking and analytics are also provided.

    Instead of using a pure REST API to do the data fetching/sending, you might want to consider using SDK provided by the firebase team for your convenience.

    https://firebase.google.com/docs/firestore/client/libraries

    If you think maintaining both mobile and web code base is troublesome, you can consider switching pure web to Mobile-first responsive web app like PWA. If you are not concerned about performance, wrapping up the React web with Cordova or Ionic Web views is another viable option.