🌟 BukanMimpi
BukanMimpi is a dynamic fundraising platform empowering institutions to launch and manage donation campaigns with transparency and effectiveness. With multi-role capabilities, real-time tracking, embedded donation tools, and full-featured dashboards, it provides a comprehensive solution for both administrators and donors.
🔧 Role: Backend & Fullstack Web
🧰 Tech Stack
Backend: Laravel (RESTful API), Transformers/Serializers, Firebase (Google Auth Integration)
Frontend: Vue.js (Modular Component-Based SPA), Vue Router, Axios
Authentication: Firebase Token Auth (Google Sign-In)
Database: MySQL (Custom schema and relational structure designed from scratch)
Other Tools: Role-Based Access Control (RBAC), Rich Text Editor with Image Upload Support, Webhook Handlers, Custom Embed Generator
📌 Key Features & Responsibilities
Developed and managed RESTful APIs using Fractal for consistent data serialization.
Authentication: Integrated Firebase Google Sign-In with secure backend token validation.
Campaign Management:
Manage campaigns with visibility toggling, featured campaign options (slider, preferred).
SEO-friendly slugs and various filtered views (popular, latest, limited version, by category/institution).
Campaign update management with rich text for fund utilization or progress reporting.
Donation System:
Create payment & Real-time webhook handling for payment confirmation (invoice or virtual account).
Manual transfer support with proof upload and admin approval flow.
Pre-built integration with the BukanMimpi third-party API for future donation/transaction synchronization (implemented and ready, but not yet activated in production)
User Profile & Institution Support: Full user profile management and institution-related campaign linking.
Admin Utilities: Settings management, category handling, and withdrawal request approval.
Built a robust and modular Vue.js admin interface with custom routing, HTTP integration, and global component registration.
Dashboard Views:
Admin: System-wide statistics across all campaigns and donations.
Advertiser/Manager: Institution-specific metrics, filtered donation analytics, and progress charts.
Real-time campaign performance data, donation insights, and dynamic chart support.
Campaign Operations:
CRUD + advanced settings (preferred, slider toggle, hidden visibility).
Campaign form updates, including progress posts using rich text editor with image support.
Embedded donation form generator (iframe, link, button component).
Donations Module:
Listings per campaign, real-time updates, and data drill-downs.
User Roles Management:
Multi-role support (Admin, Advertiser, Manager Advertiser).
Role-based access control (RBAC) system defined globally with ACL rules.
Modular File Structure:
Organized into clearly defined sections: campaign, donation, institution, admin, advertiser, master-account, setting, withdrawal, and auth.
Each module contains dedicated components: Form.vue, Index.vue, View.vue, ensuring scalability and reusability.
🗃️ Database Design
Personally designed and implemented the relational database schema supporting all business logic.
Optimized for scalability, SEO readiness (slug system), and rich campaign-donor-institution relationships.
Client Side Preview
Home Page
Home Page
Home Page
Campaign Programs Page
Detail Program Page
Detail Program Page
Detail Program Page
Detail Program - List of Donors
Admin Panel Preview
Admin Stats Page
Manage Institutions
Manage Campaign Programs
Manage Donations
Manage Withdrawal Requests
Manage Master Data
Contributed to this project as part of my role at Kreasi Putra Hotama.
Nov 2021 - Jan 2022