AJ Khan Foundation

A modern digital platform for AJ Khan Foundation that combines a public-facing foundation website with a centralized administrative management system.

The platform is designed to help the foundation showcase its mission and activities while providing administrators with the tools required to manage organizational content, users, programs, messages, and media from a single dashboard.

The Problem: Managing a Growing Organization

A foundation needs more than a simple informational website.

As an organization grows, its website needs to communicate its mission to visitors while its internal team needs a reliable way to manage programs, users, team members, announcements, messages, and media.

Without a centralized management system, these tasks can become dependent on manual updates and disconnected tools.

The goal of this project was to create a complete digital platform where the foundation could manage its public presence and internal content from one centralized system.

The Solution

I built a responsive foundation website together with a dedicated admin dashboard.

The public website focuses on communicating the foundation's mission, programs, activities, and impact in a clean and accessible interface.

The administrative system provides authorized users with centralized tools to manage the platform's content and organizational information.

The platform includes:

• Public foundation website

• Administrative dashboard

• User management

• Team management

• Program management

• Rules and organizational information

• Message management

• Gallery management

• Recent activity tracking

• Responsive layouts

• Modern content presentation

This creates a complete workflow where administrators can manage information internally and publish it through the public website.

Public Website

The public-facing website was designed to communicate the foundation's purpose and activities clearly.

The homepage introduces the foundation and provides quick access to its major areas of work.

The platform highlights areas such as:

• Poverty reduction

• Digital opportunities

• Healthcare

• Women's financial independence

• Food assistance and humanitarian services

• Education and social awareness

The homepage also presents recent programs and activities using visual cards, descriptions, locations, and activity information.

Program Management

Programs and activities are an important part of the foundation's public presence.

Instead of manually modifying website content whenever a new activity takes place, administrators can manage program information through the dashboard.

Program management allows the organization to maintain structured information about its activities and make relevant content available on the public website.

This creates a content workflow similar to:

Admin Dashboard
      ↓
Create / Update Program
      ↓
Program Data
      ↓
Public Website
      ↓
Visitors

This approach makes the website easier to maintain as the organization continues to grow.

Administrative Dashboard

The admin dashboard provides a centralized overview of the platform.

The dashboard displays important platform information through summary cards and a recent activity section.

Administrators can quickly access areas such as:

• Total users

• Active users

• Messages

• Gallery

• Programs

• Administrators

The dashboard also provides quick-action controls for common administrative tasks.

This reduces the amount of navigation required for frequently performed operations.

User Management

The platform includes a dedicated user management system for administrators.

This provides a centralized place to manage registered users and maintain organizational access.

The system is designed around administrative roles so that authorized users can access management functionality without exposing those controls to normal website visitors.

Team Management

The foundation can maintain information about its team members through the administrative dashboard.

This allows organizational team information to be managed independently from the frontend presentation.

The separation between content management and presentation makes it easier to update team information without modifying the website's underlying code.

Message Management

The platform includes an internal message management interface for handling communication received through the website.

Rather than leaving contact submissions disconnected from the main system, messages can be managed through the administrative dashboard.

This provides administrators with a centralized place to review incoming communication.

Gallery Management

Visual documentation is an important part of communicating the foundation's activities.

The platform therefore includes a dedicated gallery management system where administrators can manage images and make selected content available through the public website.

This allows the foundation to continuously update its visual content as new programs and activities take place.

Rules & Organizational Information

The administrative system also provides a dedicated area for managing organizational rules and related information.

Keeping this content within the management system allows administrators to update important information without requiring direct changes to the website's source code.

Content Architecture

A key design decision was to separate the public presentation layer from the administrative management experience.

Conceptually:

                 AJ Khan Foundation
                         │
              ┌──────────┴──────────┐
              │                     │
        Public Website          Admin Panel
              │                     │
       ┌──────┼──────┐        ┌─────┼────────┐
       │      │      │        │     │        │
    Programs Gallery Contact  Users Team   Content
       │      │      │        │     │        │
       └──────┴──────┘        └─────┴────────┘
              │                     │
              └──────────┬──────────┘
                         │
                    Application
                         │
                      Database

This structure creates a clear separation between what visitors see and what administrators manage.

UI & User Experience

The public website uses a clean visual hierarchy designed around the foundation's identity.

The homepage includes:

• Transparent navigation

• Hero section

• Mission and focus areas

• Program cards

• Activity information

• Gallery content

• Clear calls to action

The administrative interface follows a different design approach because its primary users are administrators.

The dashboard focuses on:

• Information density

• Clear navigation

• Summary statistics

• Quick actions

• Structured management screens

• Consistent visual components

This distinction allows each interface to be optimized for its specific audience.

Responsive Design

Both the public website and management interface were designed with responsive behavior in mind.

The public website needs to remain accessible across different screen sizes, while the admin interface needs to maintain usability when administrators access it from smaller devices.

The layouts therefore use flexible content structures and responsive components instead of relying on fixed desktop-only layouts.

Engineering Challenges

1. Building Two Experiences Around One Platform

One of the main challenges was designing a system that serves two very different audiences.

The public website needs to be simple and content-focused, while the admin dashboard needs to expose much more functionality.

I separated these experiences while keeping them connected through the same underlying data and application architecture.

Public User
     ↓
Read Foundation Content

Administrator ↓ Manage Foundation Content ↓ Changes reflected on website

2. Managing Dynamic Content

Programs, team members, gallery items, users, and messages are not static information.

The platform therefore needed structured management functionality so administrators could update content without requiring developer intervention for every change.

This makes the website more maintainable and allows the foundation to keep its public information current.

3. Administrative Access

Management functionality needs to be protected from normal visitors.

The platform therefore separates administrative functionality from the public experience and restricts management operations to authorized users.

This creates a clear permission boundary between:

Public Visitors

and

Authorized Administrators

The Result

The final platform provides AJ Khan Foundation with a centralized digital presence that combines public communication and internal content management.

Visitors can explore the foundation's mission, programs, activities, and gallery, while authorized administrators can manage the underlying content through a dedicated dashboard.

The project demonstrates experience with:

• Full-stack web application development

• Admin dashboard architecture

• Role-based access

• Content management systems

• User management

• Program management

• Media management

• Message management

• Dynamic website content

• Responsive UI development

• Public and private application experiences

More importantly, the project demonstrates the ability to build a real organizational platform around actual operational requirements, rather than creating a website that only presents static information.

Project

AJ Khan Foundation

Type: Full-Stack Foundation Management Platform

Components: Public Website + Admin Dashboard

Focus: Organization Management, Programs, Content & Community Activities

Developed by: Md Rijoan Maruf