The Challenge
Quwwat needed a member-facing portal where individuals could:
- View their membership status
- Check payment history
- Update personal details
- Search for other members (where permitted)
Previously, members had to contact administrators for basic information about their own accounts. This created unnecessary workload and friction.
The Approach
We built a Next.js frontend connected to Directus as a headless CMS and member database. Directus handles:
- Member data storage
- Authentication
- Role-based permissions
- Payment records
The frontend provides a clean, welcoming interface for members to access their information.
Member Dashboard
When members log in, they see:
Status at a Glance
A prominent status badge shows their current membership state:
- Active — Fully paid, voting rights
- Active - Non Voting — Paid but restricted
- New — Recently joined (< 3 years)
- Lapsed — Overdue payments
- Inactive — Not currently active
- Deceased — Historical record
Each status has a distinct colour for instant recognition.
Personal Details
Members can view and update:
- Name and contact information
- Address details
- Communication preferences
Payment History
A clear timeline of:
- Past payments with dates and amounts
- Outstanding balances
- Payment methods used
Latest Memberships
Shows membership periods and renewal dates.
Authentication
The system uses Directus authentication with:
- Email/password login
- Password reset flow
- Session management
- Secure token handling
Members authenticate against Directus, which returns their profile and permissions.
Member Search
For authorised users, a member search feature allows looking up other members. This is useful for:
- Committee members checking records
- Event organisers verifying membership
- Administrative queries
Search results respect privacy settings and role permissions.
Technical Implementation
Data Flow
Member Login
↓
Directus Authentication
↓
Fetch Member Profile
↓
Render Dashboard
↓
Real-time Data Refresh
Server Components
The app uses Next.js server components to:
- Fetch data securely (credentials never exposed to client)
- Render personalised content server-side
- Reduce client-side JavaScript
UI Components
Built with Shadcn UI for consistency:
- Cards for content sections
- Tooltips for status explanations
- Separators for visual hierarchy
- Responsive layouts throughout
Design Considerations
Accessibility
- Clear colour contrast for status badges
- Tooltips explain status meanings
- Logical heading structure
- Keyboard navigation support
Cultural Sensitivity
The interface greets members appropriately ("As-salamu ʿalaykum") and respects community norms in its design and tone.
Mobile Experience
Many members access the portal on phones, so all views are mobile-optimised with touch-friendly controls.
The Result
Quwwat members now have 24/7 access to their membership information. Common queries that used to require admin intervention are now self-service.
For administrators, the Directus backend provides a powerful interface for managing members, while the custom frontend gives members exactly what they need — no more, no less.
Tech Stack
- Frontend: Next.js 14, React
- Backend: Directus (headless CMS)
- Styling: Tailwind CSS
- Components: Shadcn UI, Radix
- Authentication: Directus Auth
- Deployment: Vercel