Dua Bahasa (English Learning App)

📘 Dua Bahasa - English Edu App

Dua Bahasa is an English education application built to support bilingual learning using a modular quiz-based system. It is designed for mobile-first access through a Flutter app, powered by a robust Laravel backend and an admin panel. The app provides interactive and gamified experiences including multiple quiz types, audio-based learning, and leaderboard-driven motivation, tailored for campus-based semester learning environments. 

As the Full-Stack Developer, I built the entire backend system using Laravel, including API architecture, admin panel, and database design. On the mobile side, I developed the Flutter application, integrated REST APIs, managed routing, state management, and implemented modular quiz components. I also handled gamification features like leaderboards and point tracking, ensuring seamless backend–frontend synchronization. Designed and implemented the full database schema and structure, ensuring optimized performance and scalability for all features.

⚙️ Backend (Laravel + Admin Panel)

Tech Stack:

• PHP (Laravel Framework)

• MySQL

• RESTful API

• Vue.js (for admin views)

• Bootstrap 4

• Chart.js (for dashboard visualizations)
  
  

Key Features:

• Authentication for Admins and Users

• Modular architecture with reusable controllers

• REST API to serve content to the Flutter frontend

• Admin panel to manage:

  • Topics, Modules, Practices, and Users

  • Four Quiz Types:

    • Multiple Choice

    • Side-by-Side Matching (SBS)

    • Complete the Text (CTT)

    • Audio-based Quizzes

• Material Editor with RichText (image embed support)

• Leaderboard system driven by semester-based configurations

📱 Mobile App (Flutter)

Tech Stack:

• Dart + Flutter

• GetIt for Dependency Injection

• Provider for State Management

• Firebase (initialization support)

• Dio for HTTP services

• Modular routing and reusable UI components
  
  

Folder Structure Highlights:

• core/models, services, viewmodels for clean separation of logic

• ui/screens/ for feature-focused screens:

  • Auth (Login, OTP Verification)

  • Modules & Practices

  • Quiz Screens (Multiple Choice Text,Side by Sider, Complete The Text, Audio)

  • Leaderboard and Profile

• widgets/dialog/ for consistent UI interaction patterns

Routing:

• Centralized route management in RouterGenerator.dart

• Support for argument-passing across complex flows like quiz progression and practice review
  
  

Gamification & State Handling:

• Earn points through quizzes → stored via API → reflected in leaderboard

• Dynamic rendering of different quiz types using reusable logic

• Tricky implementation handled: bottom navigation bar state + dynamic quiz flows
  
  

Dependency Injection & Services:

• setupLocator() binds all services as singletons

• Custom services like PracticeServices, QuestionServices, UserServices handle API communication and user interaction

🧩 Architecture Summary

• Modular & Scalable: Both backend (controllers, API endpoints) and frontend (Flutter providers, services, and UI) are modular and reusable.

• Cross-functional Integration: API connects seamlessly with Flutter to deliver real-time educational content.

• Admin Empowered: Admins can control all learning materials, user progress, and gamification settings.

📊 Dashboard Snapshot (Admin Panel)

• Stats Overview: User engagement, quiz completions, leaderboard ranks

• Charts: Implemented with Chart.js – line graphs, counts per module/topic, etc.

🔐 Auth Flow

• Phone number-based login system with OTP verification (Firebase-ready)

• Token-based API authentication (Passport)

💾 Database Design

• Personally designed and implemented the relational database schema supporting all business logic.