SeTranslator Web Platform

Premium English learning web portal with advanced admin dashboard and localized payment integration.

All English (SeTranslator) - Project Overview

📌 Project Summary

All English (also referred to by its development name SeTranslator) is a premium English language learning platform designed to provide a structured and interactive educational experience. The platform features a robust web presence with a sophisticated admin dashboard, integrated payment processing, and seamless synchronization with a mobile application.

📖 Case Study

The Problem

Traditional language learning platforms often lack localized payment support in certain regions (like Sri Lanka) or fail to provide a seamless transition between mobile and web learning environments. Additionally, administrators need a unified way to manage dynamic content, track user growth, and handle complex subscription tiers (Free, Yearly, Lifetime).

Our Solution

We built a modern, responsive web application using the Next.js App Router that serves as both the learner's portal and the administrator's command center.

• Localized Payments: Integrated with PayHere to support local currency and payment methods.
• Dynamic Content: A central repository for categorized English lessons, manageable via a custom CMS-like dashboard.
• Cross-Platform Sync: Implemented a URL-based token system to allow one-click "Auto-login" from the mobile app to the web dashboard.
• Automated Management: Cron jobs and internal APIs handle subscription expirations and user tier downgrades automatically.

Key Impact

• Streamlined Administration: Admins can update homepage sections, manage hundreds of lessons, and monitor user growth in real-time.
• Premium Experience: Dark mode support, interactive charts, and glassmorphism UI elements provide a premium feel that encourages student engagement.

🏗️ Architecture

The project follows a modern full-stack architecture using the T3-style patterns (though customized) with Next.js at its core.

1. Frontend (Learner & Admin)

• Framework: Next.js (App Router)
• UI Architecture: Component-based architecture using Ant Design (antd) for professional-grade admin components and Tailwind CSS for custom branding.

T3-style architecture with Next.js App Router and Supabase backend.

Solving localized payment and cross-platform sync issues.

Implementing secure magic-link-style auto-authentication from mobile to web.