Loading Interface

Preparing Haomay

0%
System InitSyncing
BACK TO STUDIO
V1.1.0 // Production
Case Study \u2014 BLOS Outreach

BELIEVERS
Legacy Outreach

BLOS - Web-Based Registration & Outreach Management

PHP 7.4+MySQL/MariaDBJavaScriptHTML5CSS3PHPMailer

Year

2025

Duration

6 weeks

Category

MINISTRY

Status

Production

Overview

PROJECT
OVERVIEW

BLOS is a comprehensive web-based registration and outreach management system designed for ministry outreach events. It features dual registration flows for students and non-students, robust offline support with automatic synchronization, and powerful role-based admin tools for managing data and follow-up communications. Built with security-first principles, it includes two-factor authentication, comprehensive audit logging, and enterprise-grade data protection.

Features

VISUAL
SHOWCASE

Believers Legacy Outreach System screenshot 1
Believers Legacy Outreach System thumbnail 1
Believers Legacy Outreach System thumbnail 2
Believers Legacy Outreach System thumbnail 3
Believers Legacy Outreach System thumbnail 4
Believers Legacy Outreach System thumbnail 5
Believers Legacy Outreach System thumbnail 6
BLOS Registration Portal

Registration Portal - Step 1

BLOS Registration Form

Registration Portal - Step 2

BLOS Admin Dashboard

Admin Dashboard

BLOS Offline Sync

Offline Sync Interface

BLOS View Registrations

View Registrations

BLOS Authentication

Authentication & 2FA

Gallery

CORE
CAPABILITIES

Public Registration Portal

Dual registration flows for students and non-students with offline support

  • •Two-step process: school selection → registration form
  • •Progressive Web App: installable, works offline
  • •Automatic background sync every 30 seconds
  • •Visual sync status indicators
  • •Responsive design for all devices

Offline Synchronization

Works seamlessly without internet, queues data locally

  • •Stores submissions in browser localStorage when offline
  • •Detects connection restoration automatically
  • •Background sync with visual status indicators
  • •Duplicate handling and error recovery
  • •Queue management for failed submissions

Role-Based Access Control

Three-tier permission system for different user roles

  • •Super Admin: full access, user management, activity logs
  • •Admin: dashboard, CRUD operations, engagement tools
  • •Staff: read-only view of registrations
  • •Password reset management
  • •Session timeout management

Security Features

Enterprise-grade security with comprehensive protection

  • •Email-based two-factor authentication (2FA)
  • •Admin-mediated password reset flow
  • •CSRF protection and SQL injection prevention
  • •XSS protection with output sanitization
  • •Bcrypt password hashing
  • •Activity logging for audit trail

Admin Dashboard

Comprehensive management interface with analytics

  • •Statistics: total attendees, student/non-student breakdowns
  • •Full CRUD for attendees and schools
  • •Bulk follow-up email system
  • •Filtering by type and date range
  • •Export functionality: SQL and TXT formats
  • •Password reset request management

Email System

Integrated email communication with templates

  • •Follow-up emails: HTML and plain text templates
  • •Password reset emails with secure tokens
  • •2FA verification codes
  • •SMTP integration using PHPMailer
  • •Email tracking and notification logs
Achievements

TECHNICAL
ARCHITECTURE

Technology Stack

  • Backend: PHP 7.4+ with PDO
  • Database: MySQL/MariaDB
  • Frontend: Vanilla JavaScript, HTML5, CSS3
  • Email: PHPMailer with SMTP
  • Security: Bcrypt, CSRF tokens, CSP headers

Architecture Highlights

  • Offline-first with local storage queue
  • RESTful API endpoints for registration
  • Security-first with prepared statements
  • Modular code structure with reusable components
  • Progressive Web App with service worker
Impact

TECHNICAL
ACHIEVEMENTS

1

Offline-first architecture with local storage queue

2

Progressive Web App with manifest and service worker

3

Dual registration system with unified interface

4

Admin-mediated password reset workflow

5

Bulk engagement tools with personalized templates

6

Multi-format export functionality

7

Comprehensive activity logging system

8

Mobile-optimized with horizontal scrolling tables

Summary

DESIGN
CORE

Color Palette

Primary Cyan: #0891b2

Accent Gold: #d4af37

Dark Purple: #164e63

Typography

Inter & Montserrat

Responsive

Mobile-first approach

PWA capabilities

System Ready

READY TO START

YOUR PROJECT?

Let's collaborate and bring your vision to life with cutting-edge technology and creative design.