Ryuzaki - Mobile Legends Bang Bang Community App

A Death Note-inspired Mobile Legends: Bang Bang community app built with Flutter and Supabase.

Project Overview

Ryuzaki is a feature-rich community platform for Mobile Legends: Bang Bang (MLBB) players, with a unique Death Note-inspired UI theme. The app combines social features, game information, and e-commerce capabilities to create a complete ecosystem for MLBB enthusiasts.

Features

User System

• Complete authentication (signup, login, password reset)
• Rich user profiles with avatars and displayable badges
• Experience points and leveling system
• User status and verification badges

Social Features

• Posts with text, images, video, and link support
• Threaded comments system and replies
• Reactions system (like, love, haha, wow)
• Events and announcements with categories
• Reporting system for moderation

Game-Related Features

• Hero database with details, stats, and builds
• Tournament announcements and registrations
• Game updates and patch notes
• Pro-player streams and content

E-Commerce

• In-app store for MLBB-related merchandise
• Digital items and redemption codes
• Secure payment processing
• Order tracking and history

Admin Tools

• Content moderation tools
• User management
• Analytics dashboard
• Event and promotion management

Setup Instructions

Prerequisites

• Flutter SDK (latest stable version)
• Supabase account
• Git

Environment Setup

1. Clone the repository:

   git clone https://github.com/Sardena7/Ryuzaki-store/ryuzaki.git
   cd ryuzaki
   

2. Create a .env file in the root directory with the following variables:

   # Supabase Configuration
   SUPABASE_URL=your_supabase_url
   SUPABASE_ANON_KEY=your_supabase_anon_key
   SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key
   
   # App Configuration
   APP_NAME=Ryuzaki
   APP_DEBUG=true
   APP_ENV=development
   
   # Storage Bucket Names
   AVATARS_BUCKET=avatars
   CHAT_ATTACHMENTS_BUCKET=chatfiles
   STORE_IMAGES_BUCKET=storeimages
   POSTS_IMAGES_BUCKET=postsimages
   BADGES_BUCKET=badges
   

3. Install dependencies:

   flutter pub get
   

Supabase Setup

1. Create a new Supabase project

2. Apply the database schema:

   • Go to SQL Editor in your Supabase dashboard
   • Copy and paste the contents of ryuzaki.sql and run it

3. Set up storage buckets:

   • Create the following public buckets in Supabase Storage:
     • avatars
     • chatfiles
     • storeimages
     • postsimages
     • badges

4. Upload the required badge images to the badges bucket:

   • early_adopter.png
   • contributor.png
   • social.png
   • knowledge.png
   • verified.png

Running the App

You can run the app on various platforms:

# Run on Android
flutter run -d android

# Run on iOS
flutter run -d ios

# Run on web browser
flutter run -d chrome

Project Architecture

Ryuzaki follows a clean architecture approach with:

Data Layer

• Models: Data classes for entities like User, Post, Event, Comment, etc.
• Repositories: Interface with Supabase for CRUD operations
• Services: Handle complex business logic

UI Layer

• Screens: Main UI components for different app sections
• Widgets: Reusable UI elements
• Providers: State management using Riverpod

Utility Layer

• Constants: App-wide constants and theme definitions
• Utils: Helper functions and extensions

Required Assets and Their Purpose

The app requires several assets to function properly. These assets contribute to the overall user experience, aesthetics, and functionality of the application.

Images (assets/images/)

Asset Name	Purpose	Description
mlbb_background.jpg	Landing/Login Background	Main background image used on the landing and login screens to create the MLBB atmosphere
mlbb_character.jpg	Hero Showcase	Used on landing page and promotional areas to showcase MLBB characters
dark_texture.jpg	Theme Background	Provides texture for the app's dark theme, inspired by Death Note aesthetics
ryuzaki_logo.png	App Logo	Main logo displayed in the app header, splash screen and promotional materials
splash.png	Splash Screen	Image displayed when the app is launching
event_icon.png	Events Icon	Icon used for the events section in the app

Icons (assets/icons/)

Asset Name	Purpose	Description
app_icon.png	Application Icon	The main app icon used for launcher and stores
app_icon_foreground.png	Android Adaptive Icon	Foreground layer for Android adaptive icons
Navigation & Feature Icons	UI Elements	Various icons for navigation, features, and interactive elements

Badges (badges/ Supabase bucket)

Asset Name	Purpose	Description
early_adopter.png	User Achievement	Badge awarded to early users of the application
contributor.png	User Achievement	Badge awarded for community contributions
social.png	User Achievement	Badge awarded for social interactions
knowledge.png	User Achievement	Badge awarded for sharing MLBB knowledge
verified.png	User Status	Badge indicating a verified MLBB player account

Fonts (assets/fonts/)

Custom fonts are used to enhance the Death Note-inspired theme of the application:

• Gothic and serif fonts for headers (Death Note aesthetic)
• Clean sans-serif fonts for body text (readability)

Animations (assets/animations/)

Lottie animations used throughout the app for:

• Loading indicators with Death Note and MLBB themes
• Success/error state animations
• Onboarding animations
• Achievement unlock animations

Asset Integration

The assets are integrated through:

1. Flutter's asset system (local assets)
2. Supabase Storage (remote assets like user avatars and uploads)
3. Cached for performance using cached_network_image package

Database Schema

The application utilizes a comprehensive database schema including:

• users: User accounts and profiles
• posts: User-created content
• comments: Comments on posts
• events: App events and announcements
• event_comments: Comments on events
• reactions: Reactions to posts and comments
• event_reactions: Reactions to events and event comments
• heroes: MLBB hero information
• products: Store products
• orders: User orders

Troubleshooting

Database Error When Signing Up

If you encounter a database error when signing up, check:

1. The SQL schema is properly applied in Supabase
2. The handle_new_user() trigger function is correctly configured
3. Your Supabase URL and keys are correct in the .env file

Missing Assets

If assets are missing:

1. Make sure all required images are in the correct folders
2. Verify the pubspec.yaml file includes all asset directories:

   flutter:
     assets:
       - assets/images/
       - assets/icons/
       - assets/animations/
       - assets/fonts/
       - .env

Authentication Issues

If you're having authentication problems:

1. Confirm your Supabase project has Auth enabled
2. Check that email confirmations are properly configured
3. Verify the redirect URLs in your Supabase Auth settings

Technologies

• Frontend: Flutter & Dart
• Backend: Supabase (Auth, Database, Storage, Functions)
• State Management: Riverpod
• Navigation: Go Router
• UI Components: Custom + Material Design
• Animations: Flutter Animate + Lottie

Contributors

• Tommey (@sardena7)

Contact me

• diamond.entertainment70@gmail.com

License

This project is licensed under the MIT License - see the LICENSE file for details.