Overview
Bank Nizwa is Oman's first Islamic banking platform, committed to transforming traditional banking through digital innovation. The revamped website was built using Next.js with SSR for performance and SEO, integrated with a headless CMS (Strapi) for seamless content management, and styled with Tailwind CSS and Material UI. I implemented Ant Media's video SDK to enable secure real-time video calls between users and customer support, supported by Socket.IO for reliable communication. Over 30 paper-based forms were digitized into structured, interactive multi-step forms using Formik. AI-powered chatbots powered by OpenAI and Typebot were integrated to enhance user interaction, and dynamic scroll-based animations using GSAP and Framer Motion were implemented for a modern, engaging experience. The result is a scalable, responsive, and user-friendly platform aligned with Sharia-compliant principles.
Challenge & Solution
Challenges
- Integrating Ant Media's video SDK for secure video call functionality
- Digitizing 30+ complex traditional forms with consistent UI/UX
- Enabling seamless content management migration to Strapi CMS
- Ensuring multi-language support with RTL layout adjustments (English & Arabic)
Solution
I delivered a full-stack Next.js application with SSR for performance and SEO, headless Strapi CMS for flexible content management, Ant Media SDK for secure video calls, Formik for multi-step form flows, and OpenAI + Typebot for intelligent chatbot support. Socket.IO enabled real-time communication, while i18n and RTL support ensured a smooth bilingual experience. Dynamic animations with GSAP and Framer Motion created an engaging, modern interface.
Paper-based forms converted to interactive multi-step digital flows.
Secure user-to-support video calling via Ant Media SDK.
Intelligent conversational support and user engagement.
Fully localized design for English and Arabic markets.
Key Modules
Image size: 900×598px for each module
OpenAI + Typebot Chatbot
AI-powered chatbots were integrated using OpenAI and Typebot to enhance user interaction and support. The solution provides intelligent, conversational responses for common banking queries, FAQs, product comparisons, and step-by-step guidance.
Typebot’s visual flow builder was used to design conversation paths, while OpenAI’s API powers natural language understanding and response generation. The chatbot reduces support load, offers 24/7 assistance, and improves engagement for account opening, product inquiries, and Sharia-compliant product information.
Video Calling (Ant Media SDK)
I integrated Ant Media’s video SDK to enable secure, real-time video calls between users and customer support. The implementation supports one-to-one video consultations for account verification, document signing, and complex queries that require a human agent.
Socket.IO handles signaling, session setup, and connection management, ensuring low-latency, encrypted communication. The SDK runs on AWS infrastructure and supports WebRTC for browser-based calls without additional plugins. Quality settings, recording options, and fallback handling were configured for banking-grade reliability.
30+ Digitized Forms
Over 30 paper-based forms were converted into structured, interactive multi-step digital forms using Formik. The forms cover account opening, financing applications, service requests, complaints, and regulatory compliance flows.
Each form uses a consistent architecture: multi-step navigation with progress indicators, client-side and server-side validation, conditional fields, and RTL-aware layout for Arabic. Form state is preserved across steps, and submissions are integrated with the backend for audit trails and admin review. Redux Toolkit manages cross-form state where needed.
Strapi CMS
A headless Strapi CMS powers all marketing content, landing pages, and dynamic content across the site. Content teams manage updates without code changes—hero banners, product descriptions, blog posts, and regulatory notices are all driven from Strapi.
The Next.js frontend fetches content via REST API with SSR for fast initial load and SEO. Media assets are stored in Strapi with responsive variants. The CMS supports both English and Arabic content types, and the migration from the legacy system was completed with minimal downtime.
Admin Portal
A dedicated admin portal provides internal teams with a unified dashboard to manage content, forms, users, and configurations. Admins can edit and publish Strapi content, review form submissions, and manage video call and chatbot settings.
The portal includes role-based access, audit logs for sensitive actions, and bulk operations for form data. Integration with the main site ensures that changes in the admin panel reflect immediately on the public site. The admin UI is built with the same design system for consistency.
Key Features
- Headless CMS integration with Strapi for marketing content management
- Secure real-time video calling with Ant Media SDK
- 30+ interactive, digitized forms with multi-step navigation
- AI-powered chatbot integration using OpenAI and Typebot
- Socket.IO real-time communication for customer support
- Responsive and fully localized design (English & Arabic RTL)
- Dynamic scroll-based animations with GSAP and Framer Motion
- Sharia-compliant digital banking experience
My Role
- Led frontend development of the revamped Bank Nizwa website using Next.js with SSR and App Router.
- Integrated Strapi headless CMS for content management and migration.
- Implemented Ant Media video SDK for secure real-time video calls between users and support.
- Built 30+ digitized forms with Formik and multi-step navigation.
- Integrated AI chatbots using OpenAI and Typebot.
- Configured Socket.IO for real-time signaling and communication.
- Implemented i18n localization (English & Arabic) with RTL support.
- Added dynamic scroll-based animations with GSAP and Framer Motion.
- Collaborated on admin portal development for managing content, forms, and configurations.
Tech Stack
Key Learnings
- Advanced real-time communication and video SDK integration
- Efficient multi-step form architecture with Formik
- Scalable CMS-driven development for banking platforms
- Best practices for bilingual and RTL web application design
Deliverables
- Next.js website with SSR and App Router
- Strapi CMS integration and content migration
- Ant Media video call module with Socket.IO
- 30+ digitized multi-step forms
- OpenAI + Typebot chatbot integration
- i18n localization (English & Arabic RTL)
- Admin portal for content and configuration management
- GSAP and Framer Motion animations, deployment on AWS/Vercel
Project: Bank Nizwa Website | Industry: Fintech / Islamic Banking | Duration: 5 months | Status: Live