Cross-Platform App Development with Flutter
Budget: $750 – $1,500 USD
Phase 1 Development Plan (Minimum Android App + Admin Page Implementation)
Development Period: Approximately 8 weeks (2 months)
Platform: Android (Cross-platform based)
Admin Page: Web-based React.js SPA + RESTful API backend integration (anticipated)
⸻
1. Summary of Overall Development Direction
• The app will be implemented as a cross-platform app, with Android as the priority for initial release
• Flutter is recommended for easy reuse when expanding to iOS later
• Real-time call integration will be built using the Agora SDK
• A mission-oriented UX structure connecting chat/call/payment/review in a single flow
• Management functions will be designed to allow efficient statistics/operations/report handling with minimal features
⸻
2. App Feature Development Direction (Based on Android)
Home Screen
• Main banner: Implement image slider (Carousel)
• Start conversation button: Real-time matching based on user profile (priority on interest tag similarity)
Detailed Topic Selection
• Category selected via single-selection button UI → transition to matching wait screen
Conversation Screen
• 5-minute timer: Popup for extension payment when free time expires
• Display real-time call status, view profile, end call popup
• Design logic for calculating conversation time and linking to billing
Find a Partner
• Select category → sublist → enter detailed profile
• Profile includes conversation price information, interest filters
• Design structure to link community/seller posts/reviews
Profile & Payment
• Implement conversation pricing, coupon application, and payment logic (PG point-based payment)
• After payment completion, “Start Conversation” button → enter chat or call
Chat & Call Features
• Chat UI and voice/video call switch UI
• Logic to calculate remaining time + implement end notification message
• Stabilize call quality using Agora integration
Community
• Post list + structure for paid content
• Free viewing limited to 30 lines, then proceed to payment → unlock content
• SNS-style structure with comments, likes, and replies
⸻
3. Admin Page Development Direction
Revenue Management
• Daily/Monthly Revenue Dashboard: User-specific stats, separate commission tracking
• Settlement Status Management: Categorized into pending/completed, internal status modification function
• Commission rates by category and user (percentage-based)
User Management
• Search and filter users: By sign-up date, status (active/suspended)
• User details: View conversation history, settlement data, report handling logs
• Report management: Filter by report content and status + mark completion
Call Monitoring
• Visualize real-time conversation status (number of users in matching/call)
• View full call history: Filter by period and user
• KPI statistics dashboard: MAU, call time, revenue rate auto-graphing
Basic Settings
• Rate policy setting: Input per-minute rate, minimum recharge threshold
• Notice registration: Create/edit in-app notices
• Admin account authority classification: At least two levels, such as Admin/Viewer
⸻
Phase 2 Development Plan (iOS App Release + STT Function Enhancement)
Development Period: Approximately 4 weeks (1 month estimated)
Platform: iOS (Reuse of Flutter-based existing code)
Feature Focus:
• Support for iOS platform (including UI optimization)
• Use STT (Speech-to-Text) for real-time conversation transcription and recording
• Enhance usability, reporting, and analysis features
⸻
1. iOS App Release
• Reuse Flutter codebase, optimize for iOS platform
• Key adaptation points:
• iOS-specific permission structures (microphone, camera, push notifications)
• Apple App Store review guideline compliance
• Push notification integration (APNs)
⸻
Development Strategy (Estimated)
1. Overall Development Approach
• Use a modular structure for app and admin page to ensure scalability and maintainability
• Develop based on MVP with incremental feature enhancements → adopt test-and-refine cycle
• Conduct parallel development of design and front/back-end, synchronize interfaces via API specifications
⸻
2. App Development Approach (React Native or Flutter, Android First)
Framework Selection Criteria
• React Native and Flutter are both major cross-platform frameworks
• Final decision will be based on:
• React Native: JavaScript-based, easier collaboration with web developers
• Flutter: Faster rendering, consistent UI, superior for animations/layouts
Both are favorable for iOS expansion. Final selection will depend on internal team capabilities and maintenance strategy.
⸻
Common Architecture and Structure Design
• Separate implementation by functional modules: Home, Matching, Call, Payment, Find Partner, Community
• State management:
• React Native: Redux Toolkit, Recoil, or Zustand
• Flutter: Riverpod, Provider, or Bloc
• Navigation management:
• React Native: react-navigation
• Flutter: go_router, auto_route
⸻
Network and API Integration
• API designed based on RESTful principles (JSON exchange with server)
• Asynchronous communication:
• React Native: Axios + interceptors
• Flutter: Dio or http package
• JWT-based authentication token processing with reauthentication logic on expiration
⸻
Real-Time Voice Call Functionality
• Agora SDK (Official support for React Native and Flutter)
• Implement per-minute billing system using call state control, timer logic, and call end calculations
• Call logs and billing info recorded in real-time on server
⸻
UI/UX Implementation Approach
• Basic UI:
• Flutter: Material Design-based or custom widgets
• React Native: Custom styled components (react-native-paper, tailwind-rn, etc.)
• Responsive support: Handle various resolution devices
• Key features:
• Carousel banners, modal popups, real-time notifications, user interest tag UI
• Input validation, error messages, usage time-based billing alerts
⸻
3. Admin Page Development (React.js + Java Spring Boot)
Frontend Tech Stack (subject to change)
• React.js: Most popular in domestic/global web frontend, easy to hire developers
• CSS Styling: TailwindCSS or Styled-components (for design consistency and flexibility)
• State Management:
• React Query (for server-state-centric management)
• or Redux Toolkit (for complex logic)
• API Integration:
• RESTful API calls using Axios
• Component Structure:
• Module separation: dashboard / users / call history / settlements / reports / announcements / settings
Data Visualization
• Visualization libraries: Recharts, Chart.js, or Nivo
• Visualized metrics:
• MAU, total call duration, daily sales trend, settlement requests, report volume, etc.
⸻
2. Speech-to-Text (STT) Enhancement
Suggested Tech Stack
Category Technology
Client Agora SDK + In-house STT or Google Speech API, Naver CLOVA Speech
Server STT result storage + dual filtering/summary processing
Feature Integration Real-time subtitles, post-call summary
⸻
Key Features
1. Real-time Subtitles
• Display STT results as subtitles during calls
• Toggle display on/off based on user settings
2. Automatic Call Transcript Storage
• Automatically save STT results after call ends
• Referenced during admin report handling or user feedback
3. Conversation Summary Automation (Optional)
• Extract keywords and generate summaries from call content
• Can be used for future AI-based mentoring content
4. Integrated User/Admin History
• Users can view their own STT call history
• Admins can review conversation content when handling reports
⸻
3. Admin Page Feature Expansion (Including Phase 2)
• STT Record Management Module:
• Check voice-to-text data per call
• Search and keyword filter STT content from reported calls
• iOS User Analytics:
• Visualize platform ratio, call time, payment frequency, etc.
• STT Feature Usage Analytics:
• Analyze STT usage rate, satisfaction, and churn among users
⸻
4. Backend Development Approach (Java Spring Boot)
■ Expected Tech Stack
Category Technology
Language Java 17+
Framework Spring Boot 3.x
ORM Spring Data JPA + Hibernate
Auth JWT-based login + Spring Security
API Spec Swagger/OpenAPI (springdoc-openapi)
Build Tool Gradle or Maven
Deployment Docker or JAR-based
⸻
■ API Structure and Design
• RESTful API Design
• /api/admin/users: User management
• /api/admin/calls: Call history management
• /api/admin/settlements: Handle settlement requests/completions
• /api/admin/reports: Report processing
• /api/admin/configs: Fee/notice/role settings
• /api/stt/transcripts: Save/view STT records (Phase 2)
• /api/stt/summary: Provide conversation summary data (Phase 2)
• Auto-generate API documentation via Swagger
⸻
Database Design
Table Name Description
users User info, signup date, status
calls Call records (start/end time, participants, billing, etc.)
payments Payment history, settlement amount, status
reports Report content, handling status, reporter/reported
configs Notices, fee settings, admin role settings
stt_transcripts STT text logs of calls (Phase 2)
stt_summary Conversation summaries and keywords (Phase 2)
• Normalized structure + use of Views or Materialized Views
• To improve dashboard performance for stats and searches
⸻
Full Expected Tech Stack Summary (Phase 1 + Phase 2)
Category Technology
Frontend React.js + TailwindCSS + Axios + React Query
Mobile App Flutter (recommended) or React Native
Backend Java + Spring Boot + Spring Security + JPA
API Spec OpenAPI (Swagger)
Voice Call Agora SDK (React Native/Flutter support)
STT API Google Speech API / Naver CLOVA / In-house AI (Phase 2)
Database PostgreSQL or MySQL
Note: The UI must be implemented entirely in Korean according to the Korean language design specifications.
The development period is 10 weeks, and we are currently looking for a development company that will proceed using a different programming language than the one in the current development plan.
Development Period: Approximately 8 weeks (2 months)
Platform: Android (Cross-platform based)
Admin Page: Web-based React.js SPA + RESTful API backend integration (anticipated)
⸻
1. Summary of Overall Development Direction
• The app will be implemented as a cross-platform app, with Android as the priority for initial release
• Flutter is recommended for easy reuse when expanding to iOS later
• Real-time call integration will be built using the Agora SDK
• A mission-oriented UX structure connecting chat/call/payment/review in a single flow
• Management functions will be designed to allow efficient statistics/operations/report handling with minimal features
⸻
2. App Feature Development Direction (Based on Android)
Home Screen
• Main banner: Implement image slider (Carousel)
• Start conversation button: Real-time matching based on user profile (priority on interest tag similarity)
Detailed Topic Selection
• Category selected via single-selection button UI → transition to matching wait screen
Conversation Screen
• 5-minute timer: Popup for extension payment when free time expires
• Display real-time call status, view profile, end call popup
• Design logic for calculating conversation time and linking to billing
Find a Partner
• Select category → sublist → enter detailed profile
• Profile includes conversation price information, interest filters
• Design structure to link community/seller posts/reviews
Profile & Payment
• Implement conversation pricing, coupon application, and payment logic (PG point-based payment)
• After payment completion, “Start Conversation” button → enter chat or call
Chat & Call Features
• Chat UI and voice/video call switch UI
• Logic to calculate remaining time + implement end notification message
• Stabilize call quality using Agora integration
Community
• Post list + structure for paid content
• Free viewing limited to 30 lines, then proceed to payment → unlock content
• SNS-style structure with comments, likes, and replies
⸻
3. Admin Page Development Direction
Revenue Management
• Daily/Monthly Revenue Dashboard: User-specific stats, separate commission tracking
• Settlement Status Management: Categorized into pending/completed, internal status modification function
• Commission rates by category and user (percentage-based)
User Management
• Search and filter users: By sign-up date, status (active/suspended)
• User details: View conversation history, settlement data, report handling logs
• Report management: Filter by report content and status + mark completion
Call Monitoring
• Visualize real-time conversation status (number of users in matching/call)
• View full call history: Filter by period and user
• KPI statistics dashboard: MAU, call time, revenue rate auto-graphing
Basic Settings
• Rate policy setting: Input per-minute rate, minimum recharge threshold
• Notice registration: Create/edit in-app notices
• Admin account authority classification: At least two levels, such as Admin/Viewer
⸻
Phase 2 Development Plan (iOS App Release + STT Function Enhancement)
Development Period: Approximately 4 weeks (1 month estimated)
Platform: iOS (Reuse of Flutter-based existing code)
Feature Focus:
• Support for iOS platform (including UI optimization)
• Use STT (Speech-to-Text) for real-time conversation transcription and recording
• Enhance usability, reporting, and analysis features
⸻
1. iOS App Release
• Reuse Flutter codebase, optimize for iOS platform
• Key adaptation points:
• iOS-specific permission structures (microphone, camera, push notifications)
• Apple App Store review guideline compliance
• Push notification integration (APNs)
⸻
Development Strategy (Estimated)
1. Overall Development Approach
• Use a modular structure for app and admin page to ensure scalability and maintainability
• Develop based on MVP with incremental feature enhancements → adopt test-and-refine cycle
• Conduct parallel development of design and front/back-end, synchronize interfaces via API specifications
⸻
2. App Development Approach (React Native or Flutter, Android First)
Framework Selection Criteria
• React Native and Flutter are both major cross-platform frameworks
• Final decision will be based on:
• React Native: JavaScript-based, easier collaboration with web developers
• Flutter: Faster rendering, consistent UI, superior for animations/layouts
Both are favorable for iOS expansion. Final selection will depend on internal team capabilities and maintenance strategy.
⸻
Common Architecture and Structure Design
• Separate implementation by functional modules: Home, Matching, Call, Payment, Find Partner, Community
• State management:
• React Native: Redux Toolkit, Recoil, or Zustand
• Flutter: Riverpod, Provider, or Bloc
• Navigation management:
• React Native: react-navigation
• Flutter: go_router, auto_route
⸻
Network and API Integration
• API designed based on RESTful principles (JSON exchange with server)
• Asynchronous communication:
• React Native: Axios + interceptors
• Flutter: Dio or http package
• JWT-based authentication token processing with reauthentication logic on expiration
⸻
Real-Time Voice Call Functionality
• Agora SDK (Official support for React Native and Flutter)
• Implement per-minute billing system using call state control, timer logic, and call end calculations
• Call logs and billing info recorded in real-time on server
⸻
UI/UX Implementation Approach
• Basic UI:
• Flutter: Material Design-based or custom widgets
• React Native: Custom styled components (react-native-paper, tailwind-rn, etc.)
• Responsive support: Handle various resolution devices
• Key features:
• Carousel banners, modal popups, real-time notifications, user interest tag UI
• Input validation, error messages, usage time-based billing alerts
⸻
3. Admin Page Development (React.js + Java Spring Boot)
Frontend Tech Stack (subject to change)
• React.js: Most popular in domestic/global web frontend, easy to hire developers
• CSS Styling: TailwindCSS or Styled-components (for design consistency and flexibility)
• State Management:
• React Query (for server-state-centric management)
• or Redux Toolkit (for complex logic)
• API Integration:
• RESTful API calls using Axios
• Component Structure:
• Module separation: dashboard / users / call history / settlements / reports / announcements / settings
Data Visualization
• Visualization libraries: Recharts, Chart.js, or Nivo
• Visualized metrics:
• MAU, total call duration, daily sales trend, settlement requests, report volume, etc.
⸻
2. Speech-to-Text (STT) Enhancement
Suggested Tech Stack
Category Technology
Client Agora SDK + In-house STT or Google Speech API, Naver CLOVA Speech
Server STT result storage + dual filtering/summary processing
Feature Integration Real-time subtitles, post-call summary
⸻
Key Features
1. Real-time Subtitles
• Display STT results as subtitles during calls
• Toggle display on/off based on user settings
2. Automatic Call Transcript Storage
• Automatically save STT results after call ends
• Referenced during admin report handling or user feedback
3. Conversation Summary Automation (Optional)
• Extract keywords and generate summaries from call content
• Can be used for future AI-based mentoring content
4. Integrated User/Admin History
• Users can view their own STT call history
• Admins can review conversation content when handling reports
⸻
3. Admin Page Feature Expansion (Including Phase 2)
• STT Record Management Module:
• Check voice-to-text data per call
• Search and keyword filter STT content from reported calls
• iOS User Analytics:
• Visualize platform ratio, call time, payment frequency, etc.
• STT Feature Usage Analytics:
• Analyze STT usage rate, satisfaction, and churn among users
⸻
4. Backend Development Approach (Java Spring Boot)
■ Expected Tech Stack
Category Technology
Language Java 17+
Framework Spring Boot 3.x
ORM Spring Data JPA + Hibernate
Auth JWT-based login + Spring Security
API Spec Swagger/OpenAPI (springdoc-openapi)
Build Tool Gradle or Maven
Deployment Docker or JAR-based
⸻
■ API Structure and Design
• RESTful API Design
• /api/admin/users: User management
• /api/admin/calls: Call history management
• /api/admin/settlements: Handle settlement requests/completions
• /api/admin/reports: Report processing
• /api/admin/configs: Fee/notice/role settings
• /api/stt/transcripts: Save/view STT records (Phase 2)
• /api/stt/summary: Provide conversation summary data (Phase 2)
• Auto-generate API documentation via Swagger
⸻
Database Design
Table Name Description
users User info, signup date, status
calls Call records (start/end time, participants, billing, etc.)
payments Payment history, settlement amount, status
reports Report content, handling status, reporter/reported
configs Notices, fee settings, admin role settings
stt_transcripts STT text logs of calls (Phase 2)
stt_summary Conversation summaries and keywords (Phase 2)
• Normalized structure + use of Views or Materialized Views
• To improve dashboard performance for stats and searches
⸻
Full Expected Tech Stack Summary (Phase 1 + Phase 2)
Category Technology
Frontend React.js + TailwindCSS + Axios + React Query
Mobile App Flutter (recommended) or React Native
Backend Java + Spring Boot + Spring Security + JPA
API Spec OpenAPI (Swagger)
Voice Call Agora SDK (React Native/Flutter support)
STT API Google Speech API / Naver CLOVA / In-house AI (Phase 2)
Database PostgreSQL or MySQL
Note: The UI must be implemented entirely in Korean according to the Korean language design specifications.
The development period is 10 weeks, and we are currently looking for a development company that will proceed using a different programming language than the one in the current development plan.