Skip to main content

Saheb App Design System

Screenshot 2026-01-01 at 14.04.11.png

1. Purpose of This Documentation

This presentation explains the design and technical decisions behind our application features.

a. We will be covering:

1. Technology Stack

  • Backend framework

  • Web frontend framework

  • Mobile frontend framework

  • Database technology (PostgreSQL, MySQL, etc.)

  • UI libraries

  • Supporting libraries and tools (state management, datafetching, utilities)

2. Application Architecture & Project Structure

  • Technical decisions

  • Backend folder structure

  • Frontend folder structure

  • Design patterns and development strategies

3. Localization & Language Support

  • Multi-language database translation strategy

  • RTL (Right-to-Left) support on web and mobile

  • Hijri calendar localization

4. Core Domain Logic

  • Qibla calculation logic

  • Prayer time calculation methods

  • Hijri time caulculation methods

5. Media Management

  • Audio resource handling (Sermon / موعظة)

  • Video hosting and streaming strategy

6. Notifications & Communication

  • Timezone-aware push notification system

  • Email notification architecture

  • Notification reliability and crash handling

  • Scheduling notificaiton with cron

8. Application Standards

  • Request logging

  • User event and activity tracking

  • Error and crash reporting

  • API versioning

b. How Each Section Is Documented

For every section in this documentation, we consistently answer the following questions:

  • What solution did we choose?

  • Why did we choose this solution?

  • What are the pros and cons of this solution?

  • What alternative approaches were considered?

1. Technology Stack

a. Backend Framework

What solution did we choose?
We chose Nodejs + NestJS as the backend framework.

Why did we choose this solution?

  • Team is more experienced with
  • Widely used on our code base

  • Built with TypeScript by default

  • Supports modular development and scalability

  • Fits well for APIs serving web and mobile apps

  • One backend server for both mobile and web

Pros

  • Clear module-based architecture

  • Strong TypeScript support

  • Easy integration with databases, authentication, and queues

Cons

  • Slightly more boilerplate

Alternative Approaches

  • Express.js

  • Fastify

  • Laravel (PHP)

  • Spring Boot (Java)

b. Web Frontend Framework

What solution did we choose?
We chose Next.js using the App Directory.

Why did we choose this solution?

  • Built-in support for modern React features

  • File-based routing with the App Directory

  • Server Components for better performance

  • Strong support for SEO and web performance

  • Good integration with backend APIs

Pros

  • Clear and scalable project structure

  • Server-side rendering and static generation

  • Improved performance with Server Components

  • Built-in routing, layouts, and loading states

Cons

  • App Directory has a learning curve

  • Some ecosystem libraries are still adapting

  • Requires understanding of server vs client components

Alternative Approaches

  • React ( Vite / CRA))

  • RemixReact (Tanstack start)

  • Nuxt.js

  • Angular

Back to top