Project Overview
A custom membership verification tool built for Bike Easy, a New Orleans-based non-profit organization focused on bicycle advocacy and education. This application integrates with NationBuilder's API to provide real-time membership status checking for their community members.
The Challenge
Bike Easy needed a streamlined solution to quickly verify member status using email addresses. This served dual purposes: allowing members to self-check their membership status and enabling staff to efficiently verify memberships at events without navigating the complex NationBuilder interface. Surprisingly, NationBuilder lacked this basic functionality despite offering a comprehensive API.
Key Features
Real-time Verification
Instant membership status lookup through NationBuilder API integration
User-friendly Interface
Clean, responsive design that works across all devices
Secure Authentication
Secure API key management and data protection
Performance Optimized
Fast response times with efficient API calls
Technical Implementation
Built using modern web technologies with a focus on simplicity and reliability:
- Framework: Next.js with React
- Language: TypeScript
- API: NationBuilder REST API
- Hosting: Vercel Platform
- Authentication: OAuth 2.0
- Integration: WordPress iframe
Development Journey
Initial Prototyping
Started with Vercel's app builder using a development API token to create a Next.js prototype. While Vercel's agent provided a solid framework, the initial API implementation used deprecated endpoints that needed complete reconstruction.
API Integration Challenges
Updated the API functionality to work with NationBuilder's current REST API endpoints. The original implementation had fundamental issues with the membership lookup logic that required a complete rewrite of the backend service layer.
Authentication & Deployment
Transitioned from development tokens (24-hour validity) to OAuth 2.0 authentication. Drawing on experience from PepperHQ, implemented secure OAuth flows with NationBuilder as an authorized application. Deployed on Vercel's free tier for optimal cost-efficiency.
WordPress Integration
Integrated the application into Bike Easy's WordPress website using iframe embedding. Resolved X-Frame-Options security restrictions by configuring appropriate CORS headers and frame policies to enable seamless website integration.
Impact
Results
- Reduced administrative workload for Bike Easy staff
- Improved member experience with instant verification
- Enhanced data accuracy through direct API integration
- Streamlined event check-ins and membership verification