Taino Lang App: App Development and CMS Solution Architecture

Mobile Engineer

Fullstack Engineer

Web Developer

NestJS

PostgreSQL

React Native

The user interacting with the first lesson where they are prompted to select the correct image for the Taino word

Background

Tech Fleet partnered with the client, Casa Areyto, to build a progressive web app to revitalize the Taino language and culture.

The purpose of this project was to build an application that everyone can access and a system that is flexible and modular for modifying and adding new components in the future.

Goals

Implement the new user onboarding flow

Find a solution for lesson authors to add new lessons to keep the app alive

Build a codebase that has good developer experience

Approach

Reusable Components with React Native and Expo

During development, new activity types were still being designed and written by UX Design and UX Writing to be part of a lesson. To ensure that the system built for this application could handle drastic change, a modular approach was chosen. For the front end, Expo, a React Native framework, was chosen due to its maturity, large community, and ability to create reusable components and cross-platform capabilities.

A focus on defining a config file for color and typography was implemented to ensure consistency in the progressive web app. This was done so that when the UX Design team made a new version of the prototype that changed styling such as color and typography, a developer could simply go to the file and change the value from there, and all components that used that color or typography would change as well.

Robust and Modular Backend with Nest.js and PostgreSQL

For the backend framework, Nest.js fully supports TypeScript and its combination of elements from popular programming paradigms like object-oriented programming, functional programming, and functional reactive programming.

For the database, PostgreSQL was chosen because of its open source and its advanced features such as the jsonb type that can be added to tables, which can be advantageous as the activity types will have a lot of similarities but also different structuring in terms of the types of answer styles that would be presented to the user.

For API development, Prisma ORM was used to save time with development and because of its type-safety.

Authentication and Storage

For user registration and authentication, the choice to use Auth0 was due to its maturity, ease of setup, and ability to connect to the client side. The ability to add social providers like Google was also another reason that Auth0 was considered.

For storage, Cloudinary was chosen as it allowed for digital management and API to connect to the backend.

The Solution for Lesson Authoring Tool

Though this was not a part of the original objective during the time of development, the question of how would new lessons be added and updated for the application, led to this secondary MVP, finding a solution for a lesson authoring tool to keep the app alive.

When consulting with the client, it was important to know about their experience with the current system that allowed them to create the Taino course at transparent.com. Crucial things such as what they loved most, the pain points, and features and functionality that were crucial. This information would help narrow down the selection of headless CMS on the market.

After much research, the choice to use Payload CMS was due to it being a config-based framework and it being built with TypeScript and Next.js, a React.js framework, keeping consistency with the tech stack for the mobile application and making it easy for a developer to easily adapt from React.js and React Native due to its extremely similar syntax.

Another reason for it being chosen was due to a lot of pre-built functionality such as bulk add, CRUD, and the ability to build upon the functionality.

Live preview, a feature of Payload, would also allow for a lesson author to see what a user on the mobile app would see when interacting with a lesson during the creation and editing process of a lesson.

The last feature is the ability to create new fields and views with React components in a Payload CMS project. With this approach, a developer could take whichever component from the mobile app, for instance, the ZunZun dialogue component, add it to a shared project like Storybook.js to ensure consistency and make small tweaks to implement a React.js version of that component for the lesson authoring tool, allowing for a more immersive experience for the lesson author.

The LMS or Lesson Authoring Tool was the system's final and most important piece. The choice to use Payload CMS was so that it had a lot of the foundational functionality of a CMS while also being highly flexible in the customization of frontend and backend.

Challenges

Considering the structuring and modeling of a lesson for both frontend and backend.

Finding a lesson authoring tool solution that could be self-hosted, customizable, and integrated with the backend and front end while also ensuring that it fulfilled all the requirements for lesson authors.

Building a tech stack that allowed for flexibility and scalability while also considering developer experience.