ComicsVerse is a premium, cross-platform mobile application engineered with Flutter to deliver an immersive comics and manga reading experience. Built on a robust Supabase backend, it seamlessly integrates real-time community interaction, sophisticated content discovery, and a highly customizable reading engine.
- Dual Reading Modes: Switch seamlessly between Vertical Scroll (Webtoon style) and Horizontal Page Flip (Manga style).
- Glassmorphism Controls: An elegant floating control panel offering instant access to settings.
- Gesture Controls: Advanced pinch-to-zoom (
InteractiveViewer) and intuitive navigation gestures. - Brightness Control: Integrated in-app brightness adjustment via
screen_brightnessfor comfortable night reading.
- Smart Home Feed: Curated "For You" grids and dynamic Weekly Rankings carousels.
- Advanced Filtering: Powerful search capability with genre-based filtering.
- Optimized Performance: Implements 500ms debounce logic to minimize API overhead during real-time typing.
- Live Discussions: Engage with the community through a responsive comment sheet.
- Nested Replies: Structured conversation threads.
- Instant Updates: Powered by Supabase Realtime, comments and reactions appear instantly across devices.
- Secure Authentication: Flexible sign-in via Email/Password or Google OAuth, managed by Supabase Auth.
- Cloud Library: Synchronized bookmarks/library with pull-to-refresh updates.
- User Profile: Avatar management (Supabase Storage), display name editing, and preference settings.
- Daily Reminders: Built-in Local Notifications to schedule daily reading sessions.
- Dark Mode: Native support for light and dark themes.
ComicsVerse leverages a modern, scalable architecture to ensure performance and maintainability.
| Domain | Technology | Key Libraries/Packages |
|---|---|---|
| Framework | Flutter | flutter, dart |
| Backend & Auth | Supabase | supabase_flutter (Auth, DB, Storage, Realtime) |
| State Management | Riverpod | flutter_riverpod (AsyncValue, Notifiers) |
| Navigation | GoRouter | go_router (Deep linking, Shell routes) |
| UI Aesthetics | Glassmorphism | flutter_animate, shimmer, cached_network_image, google_fonts |
| Local Services | Device Integration | flutter_local_notifications, image_picker, shared_preferences, screen_brightness |
The project follows a scalable Feature-First directory structure, ensuring separation of concerns and ease of testing:
lib/
├── core/ # Global configurations, reusable widgets, and utilities
├── features/ # Feature-specific modules
│ ├── auth/ # Authentication logic & UI
│ ├── home/ # Discovery & Ranking feeds
│ ├── reader/ # The core reading engine
│ ├── search/ # Search & Filter logic
│ ├── library/ # User bookmarks/favorites
│ ├── comment/ # Real-time discussion system
│ └── profile/ # User settings
└── main.dart # Application entry point
- Flutter SDK (3.9.2 or higher)
- Dart SDK
-
Clone the Repository
git clone https://github.com/25-26Sem1-Courses/ct312hm01-project-Giang0402.git cd mycomicsapp -
Install Dependencies
flutter pub get
-
Environment Setup Create a
.envfile in the root directory and add your Supabase credentials:SUPABASE_URL=your_supabase_url SUPABASE_ANON_KEY=your_supabase_anon_key
-
Run the App
flutter run
(Add high-fidelity screenshots here to showcase the UI/UX)
This project was developed as part of a university coursework requirement. Video Demo: Watch on YouTube