I’m excited to share a deep dive into the technical aspects of SenseUs, a question-and-answer platform designed to provoke self-reflection and foster discussions on social issues. As the tech lead, I’ve been involved in every aspect of SenseUs’ engineering, from gathering requirements and planning implementations, to working on each individual part and ensuring stability post-launch.

Planning and Principles

In planning the architecture of SenseUs, I closely followed three key principles:

1. Familiarity: How familiar am I with the tooling? Having previous experience working on a privacy-focused social network and being comfortable with JavaScript, I chose JS as the main language for both frontend and backend.
2. Open-source: How widely used is the tool in the industry? Is there a large community of support? Open-source tools typically offer wide interoperability and a vast ecosystem of support. This is vital for finding solutions to potential issues and for the general development process.
3. Modularity: Can each part of the stack function independently and work well together? This is essential for debugging, isolating issues, and ensuring that components don’t interfere with each other.

Following these principles, I came up with an architectural framework based on IBM’s three-tier architecture.

The Three-Tier Architecture

This framework divides an application into the data tier, the application tier, and the presentation tier.

1. Data Tier: PostgreSQL, a popular open-source relational database, was chosen for SenseUs. It’s optimized for maintaining data integrity through relationships between objects (like users, posts, and comments), making it ideal for social apps.
2. Application Tier: GraphQL, an API query language, was used. GraphQL has two main advantages: it allows developers to control data fetching and has a strong typing system, reducing bugs and enforcing type safety.
3. Presentation Tier: Here, every decision followed the principle of modularity. I used React components and TailwindCSS for styling. React components are independent, reusable, and keep the UI organized, while TailwindCSS simplifies styling and keeps things consistent across components.

Production-Ready and Scalable

With the technical groundwork laid, SenseUs was ready for production. It has optimal Lighthouse scores for the frontend, zero server failures since launch, and a stable and efficient database. In anticipation of real traffic, I used the most performant technologies available and built a solid CD pipeline for seamless deployment. A separate staging server was also created for testing new features.

A Progressive Web App (PWA)

SenseUs is not just an ordinary web app – it’s a progressive one. PWAs provide a fast, reliable, and engaging user experience that can be accessed from any device, regardless of platform or network conditions. They offer a native-like experience by leveraging modern web technologies, and they can be installed on native platforms.

PWAs provide app store independence, instant updates, and cross-platform compatibility. However, there are trade-offs. PWA adoption can be hindered by an unintuitive installation flow and perceived lack of security (as noted by our users) compared to app store installations. So, I decided to venture into getting the SenseUs PWA published on app stores. However, my journey with Android and iOS platforms presented distinct experiences. On Google’s Play Store, the process was smooth and cost-effective, thanks to Google’s robust support for PWAs. Conversely, the path to publication on Apple’s App Store demanded compliance with several requirements.

Despite these hurdles, SenseUs made it onto both the Google Play Store and the Apple App Store. Given the novelty of PWAs, this achievement signals a promising future where PWA principles and open web standards might gain more traction. Yay for single codebase!

In closing, the journey of building SenseUs has been as enriching as it has been challenging. The combination of different technologies and architectural decisions has resulted in a platform that encourages open conversation and helps us understand each other better.