AHMED.DEV
Full-Stack · FinTech

Yield Cloud

Bilingual Egyptian financial calculators platform with shareable URL state and static rendering.
Yield Cloud logo
RoleFull-Stack Architect & Developer
Timeline2026
CategoryFull-Stack · FinTech
Stack7 technologies
Next.jsReactTypeScriptTailwind CSSnext-intlRadix UIshadcn/ui
Live PreviewSource Code
Overview

Project Overview

Yield Cloud (غيمة العائد) is an independent Egyptian financial platform designed to help users make smarter investment decisions through transparent yield and capital calculators. Built with Next.js 16 and React 19, it features complete Arabic (RTL) and English (LTR) support, instant shareable URL state, and a mobile-first UI.

Capabilities

Key Features

  • Yield & Capital Calculation Engines

    Provides instant return breakdowns, net gains after tax, daily/monthly equivalents, and inverse daily-rate calculations for required capital.

  • Full Bilingual Support (i18n)

    Native Arabic (RTL) and English (LTR) internationalization powered by next-intl with route locale handling.

  • Shareable Base64 URL State

    Encodes form parameters directly into URL query strings on calculation without triggering server navigations or full re-renders.

  • Smart Formatting & Validation

    Auto-compacts large currency values (e.g., 1.5M / 2.3B) and enforces hook-level numeric limits to prevent invalid inputs.

Engineering

Technical Architecture

  1. Next.js 16 App Router architecture leveraging Static Site Generation (SSG) for static calculator shells and edge rendering.
  2. Client-side URL state encoding using Base64 and direct history.replaceState integration to maintain static SEO paths.
  3. Scoped next-intl message providers passing only route-specific namespaces to minimize client JavaScript bundle size.
  4. Generic calculator component shells (CalculatorClientShell) isolating layout and styling from core financial math logic.
Core Architecture

Shareable State & Static Rendering

Yield Cloud achieves fast page loads by remaining fully static while supporting deep-linked shareable calculations. Upon form submission, form values are serialized and encoded into a single base64 URL parameter using direct browser history updates, avoiding server roundtrips.

Scoped Message Delivery

To optimize initial loading, internationalization messages are scoped directly per page namespace instead of serving global localization bundles.
Results

Impact & Outcomes

  • Next.js 16Framework
  • React 19UI Library
  • AR / ENLocales
  • Full SSGRendering
Takeaways

Lessons Learned

  • Encoding component state in Base64 URLs using window.history.replaceState retains standard static site benefits while offering shareable dynamic state.
  • Modularizing translation dictionaries into scoped client providers prevents inflating the initial payload on internationalized web applications.