TheTenPercent: Scaling a Social Platform for 10,000 Users

A comprehensive social media platform designed specifically for the disability community, demonstrating the journey from rapid prototype to enterprise-scale application with microservices architecture. This project showcased my evolution from JobTrax's lessons into a more sophisticated system design and project management approach.

The Challenge

TheTenPercent, a US-based non-profit organization representing the 10% of the population with disabilities, needed a safe and secure social platform. They came to Zelio seeking cost-effective development compared to US rates, but with ambitious scalability requirements.

Key Requirements:

• Safe & Secure Platform: Email and phone verification, 2FA, and disability documentation required
• Massive Scale Expectations: 10,000 users expected on official release day
• Multi-Platform Solution: Web and mobile applications needed
• Enterprise Architecture: Scalable backend to handle rapid user growth
• Accessibility Focus: Platform specifically designed for disability community needs

The Solution

We implemented a two-phase approach: starting with a rapid Bubble.io prototype to secure funding, then building enterprise-scale native applications with microservices architecture.

Phase 1: Rapid Prototype (Bubble.io)

Objective: Create a functional prototype for investor presentations and funding acquisition.

• Web App: Fully functional social platform with mobile responsiveness
• Mobile Conversion: Converted web app to mobile using online service provider
• Complete Features: User registration, posts, comments, social interactions
• Timeline: Delivered in just a few months
• Outcome: Client successfully secured funding for full development

Phase 2: Enterprise-Scale Development

Objective: Build production-ready applications capable of scaling to 10,000+ users.

🏗️ System Architecture Design

• Microservices Backend: Node.js/Express with MongoDB for scalability
• Native Mobile Apps: Swift (iOS) and Kotlin (Android) for optimal performance
• Real-time Features: Firebase integration for messaging and notifications
• Admin Portal: Complete web application for user and content management

🔐 Security & Verification System

• Multi-factor Authentication: Email, phone, and 2FA requirements
• Identity Verification: Document uploads for disability verification
• Unique User Constraints: One account per email/phone number
• Safe Environment: Comprehensive moderation and reporting systems

📱 Native Mobile Applications

• iOS App: SwiftUI-based with comprehensive accessibility features
• Android App: Kotlin-based with modular architecture
• Real-time Messaging: Firebase-powered chat system
• Offline Support: Local data caching and synchronization

Technical Implementation

Architecture Overview

Technology Stack

Mobile Applications

iOS (SwiftUI)

• SwiftUI: Modern declarative UI framework
• Combine: Reactive programming for state management
• Moya: Networking abstraction layer
• Firebase SDK: Real-time features and messaging
• Kingfisher: Image loading and caching

Android (Kotlin)

• Jetpack Compose: Modern declarative UI
• Hilt: Dependency injection
• Retrofit: HTTP networking
• Firebase SDK: Real-time features
• Coil: Image loading library

Backend Microservices

• Node.js: Runtime environment for scalability
• Express.js: Web framework with middleware
• MongoDB: NoSQL database for flexible scaling
• Passport.js: Authentication middleware
• Mongoose: MongoDB object modeling
• JWT: Token-based authentication

Real-time & Infrastructure

• Firebase: Real-time database and messaging
• AWS S3: File storage and media hosting
• AWS EC2: Application hosting
• MongoDB Atlas: Managed database service
• Vercel: Web application deployment

Milestone-Based Development Approach

The project was structured around 4 major milestones with clear deliverables and deadlines:

Milestone 1: Core Social Features ✅ Completed

• Objective: User authentication, home feed, notifications, and dashboard
• Key Features:
  • iOS and Google Sign-In integration
  • Facial recognition authentication
  • Post creation, editing, liking, and commenting
  • Community forums functionality
• Timeline: April 30, 2024
• Status: Successfully delivered on time

Milestone 2: Resources & Discovery ✅ Completed

• Objective: Map/resources section and story viewing
• Key Features:
  • User-friendly resource upload interface
  • Advanced search and filtering capabilities
  • Location-based resource discovery
• Timeline: June 15, 2024
• Status: Successfully delivered on time

Milestone 3: Community Features ⚠️ Delayed

• Objective: Community forums and enhanced resource sections
• Timeline: July 15, 2024
• Status: Delayed due to design bottleneck

Milestone 4: Advanced Features & Admin Portal ✅ Completed

• Objective: Settings, accessibility widgets, chat, messaging, and admin portal
• Key Features:
  • Voice commands and screen reader support
  • Customizable UI settings
  • Full app integration testing
  • Complete Admin Portal: Full-stack web application for platform management
• Timeline: August 15, 2024
• Status: Successfully completed (Admin Portal delivered as sole developer)

Key Technical Challenges & Solutions

1. Microservices Architecture Design

Challenge: Designing a scalable backend architecture to handle 10,000+ concurrent users.

Solution:

• NoSQL Approach: Chose MongoDB for flexible scaling and rapid development
• Microservices Pattern: Separated concerns into focused services
• Express.js Backend: Node.js with Passport for authentication
• Horizontal Scaling: Designed for easy service replication

// Microservice authentication example
const authService = {
  authenticateUser: async (email, password) => {
    const user = await User.findOne({ email });
    if (!user || !(await bcrypt.compare(password, user.password))) {
      throw new AuthenticationError("Invalid credentials");
    }

    const token = jwt.sign(
      { userId: user._id, email: user.email },
      process.env.JWT_SECRET,
      { expiresIn: "24h" }
    );

    return { user, token };
  },
};

2. Cross-Platform Mobile Development

Challenge: Building native iOS and Android apps with feature parity and optimal performance.

Solution:

• Native Development: Swift for iOS, Kotlin for Android for optimal performance
• Shared Architecture: Common design patterns across platforms
• Firebase Integration: Unified real-time features and messaging
• Modular Design: Feature-based modules for maintainability

3. Real-time Messaging System

Challenge: Implementing reliable messaging for a social platform with potential for thousands of concurrent users.

Solution:

• Firebase Integration: Leveraged Firebase for real-time messaging
• Offline Support: Local caching and message queuing
• Push Notifications: AWS SNS integration for reliable delivery
• Message Encryption: End-to-end encryption for privacy

4. Admin Portal Development (Sole Developer)

Challenge: Building a comprehensive admin portal as the sole developer while managing other project responsibilities.

Technical Implementation:

• Full-Stack TypeScript: React 18 + Node.js/Express with complete type safety
• Modern Architecture: 3-tier architecture with Redux state management
• Database Integration: MongoDB with Mongoose ODM for resource management
• Security Implementation: Multi-strategy authentication, CSRF protection, rate limiting
• Production Deployment: Docker containerization with CI/CD pipeline

Key Features Delivered:

• User Management: Complete user listing, search, filtering, and super user management
• Resource Management: Create, edit, delete accessibility resources with location data
• Accommodation Management: Disability group mappings and accessibility accommodations
• Category Management: Hierarchical resource categorization system
• File Upload System: AWS S3 integration for media storage
• Google Maps Integration: Location selection and display functionality

Development Approach:

// Example of comprehensive user management implementation
const userService = {
  createUser: async (userData) => {
    const user = new User({
      ...userData,
      disabilities: userData.disabilities.map((d) => ({
        type: d.type,
        severity: d.severity,
        accommodations: d.accommodations,
      })),
      preferences: {
        privacy: userData.privacy || "private",
        notifications: userData.notifications || true,
      },
    });

    return await user.save();
  },

  searchUsers: async (filters) => {
    const query = {};
    if (filters.disability) query["disabilities.type"] = filters.disability;
    if (filters.location) query.location = { $near: filters.location };

    return await User.find(query)
      .populate("accommodations")
      .sort({ createdAt: -1 });
  },
};

Technical Achievements:

• Enterprise-Grade Security: CSRF protection, CORS configuration, rate limiting (100 requests/15 minutes)
• Comprehensive Testing: Unit, integration, and E2E test coverage
• Production-Ready Deployment: Docker multi-stage builds with Nginx configuration
• Type Safety: Full TypeScript implementation across frontend and backend
• Documentation: Extensive documentation and README files for maintainability

5. Client Website Development (Framer)

Challenge: Create a professional marketing website for TheTenPercent to support app launch and user acquisition.

Solution: Rapid website development using Framer for modern, responsive design.

Technical Implementation:

• Framer Platform: No-code website builder with advanced customization capabilities
• Responsive Design: Mobile-first approach with seamless desktop experience
• Performance Optimization: Fast loading times and smooth animations
• SEO Optimization: Search engine friendly structure and metadata
• Integration: Direct links to app stores and platform features

Key Features Delivered:

• Professional Landing Page: Clear value proposition for disability community
• App Store Integration: Direct download links for iOS and Android
• Community Focus: Highlighting platform benefits for users with disabilities
• Brand Consistency: Aligned with app design and accessibility principles
• Contact Information: Clear communication channels for support

Development Timeline:

• Planning & Design: 2 days
• Content Creation: 2 days
• Development & Testing: 2 days
• Launch & Optimization: 1 day
• Total: 1 week delivery

Live Project Links:

• Website: thetenpercent.io
• Google Play Store: Download Android App
• Apple App Store: Download iOS App

Major Challenges & Lessons Learned

Challenge 1: Design Bottleneck Crisis

Problem: After successfully completing Milestones 1 and 2, our UI/UX designer went missing during Milestone 3, creating a critical bottleneck.

Impact:

• 2-3 months project delay due to missing design assets
• Quality degradation as developers had to create designs
• Scope creep as client requested additional design changes
• Team stress from trying to fill design gaps while maintaining development velocity

Solution:

• Parallel workflow implementation: Designer works one milestone ahead of development
• Design system creation: Built reusable component library to reduce design dependency
• Developer design training: Cross-trained developers in basic UI/UX principles

Challenge 2: Client Onboarding Delays

Problem: TheTenPercent organization experienced a CEO change during MVP completion, causing significant onboarding delays.

Impact:

• 5-month onboarding delay beyond planned timeline
• 200 users onboarded instead of expected 10,000
• Project momentum loss due to extended idle period
• Uncertain future regarding additional funding and development

Solution:

• Flexible deployment strategy: Maintained development-ready state for rapid reactivation
• Documentation focus: Comprehensive handover documentation for new leadership
• Scalable architecture: Built system to handle rapid user growth when ready

Challenge 3: MVP vs. Full Application Scale Planning

Situation: Client expected 10,000 users for the complete application (post-funding), but MVP was launched with 200 users due to organizational changes delaying additional funding.

Context:

• MVP Scope: Core social features with scalable architecture foundation
• Full Application Vision: AI-powered document verification, advanced accessibility features, complete feature set
• Funding Dependency: Additional features required second round of funding for AI implementation and advanced features
• Organizational Changes: CEO transition delayed funding decisions and feature completion

Solution:

• Scalable MVP Architecture: Built foundation to handle 10,000+ users from day one
• Phased Development Approach: MVP delivered core functionality, full features pending funding
• Future-Ready Design: Architecture prepared for AI integration and advanced features
• Flexible Deployment: System ready to scale when client secures additional funding

Results & Impact

Technical Achievements

• ✅ MVP Successfully Delivered: All core features implemented and functional
• ✅ App Store Launch: Successfully published on both iOS and Android stores
• ✅ Enterprise Architecture: Scalable microservices backend capable of handling 10,000+ users
• ✅ 200+ Active Users: Real users successfully onboarded and using the platform
• ✅ Complete Admin Portal: Full-stack TypeScript web application for platform management
• ✅ Sole Developer Success: Admin portal delivered entirely by single developer
• ✅ Client Website: Rapid website development using Framer (delivered in 1 week)
• ✅ Zero Critical Bugs: Stable platform with comprehensive error handling

Project Management Lessons

• ✅ Milestone-based Development: Clear deliverables and timelines for first 2 milestones
• ✅ Agile Methodology: Weekly sprint meetings with Scrumban approach
• ✅ Cross-team Communication: Effective coordination between Toronto and Pakistan teams
• ✅ System Design Leadership: Successfully designed scalable architecture from scratch

Business Impact

• ✅ Funding Secured: Client successfully raised funds based on our Bubble prototype
• ✅ Platform Launch: Real social platform serving disability community
• ✅ Technical Foundation: Solid architecture ready for future scaling to 10,000+ users
• ✅ MVP Success: 200+ users successfully onboarded and actively using platform
• ✅ Future-Ready Architecture: System prepared for AI integration and advanced features
• ⚠️ Additional Funding: Pending client decision for AI-powered features and full application completion

Key Lessons Learned

Technical Insights

1. Microservices Architecture Benefits: MongoDB and Node.js provided excellent scalability for social platform requirements
2. Native vs. Cross-Platform: Native development (Swift/Kotlin) provided better performance and user experience than React Native for complex social features
3. Firebase Integration: Real-time features and messaging were significantly easier to implement with Firebase
4. Milestone-Based Development: Clear deliverables and timelines helped maintain project momentum
5. Design System Importance: Reusable components reduced dependency on individual designers

Project Management Insights

1. Design Dependency Risk: Single points of failure in design can cripple development velocity
2. Client Communication: Regular updates and realistic expectations are crucial for project success
3. Cross-Team Coordination: Effective communication between Toronto and Pakistan teams required structured processes
4. Parallel Workflows: Designer working ahead of development team prevented bottlenecks
5. Agile Methodology: Scrumban provided flexibility while maintaining structure

Business Development Lessons

1. Prototype to Funding: Bubble.io prototype was sufficient to secure client funding for full development
2. Scale Planning: Building for expected scale vs. actual scale requires careful balance
3. Client Organizational Changes: External factors (CEO changes) can significantly impact project timelines
4. MVP vs. Full Product: MVP delivery doesn't guarantee continued development
5. International Development: Cost advantages of Canadian development attracted US clients

System Design Lessons

1. NoSQL for Social Platforms: MongoDB's flexibility was ideal for evolving social media data structures
2. Authentication Complexity: Multi-factor authentication and identity verification added significant complexity
3. Real-time Requirements: Firebase provided reliable real-time features without custom WebSocket implementation
4. Mobile-First Architecture: Native mobile apps required different architectural considerations than web applications
5. Admin Portal Design: Separate admin interface for content and user management was essential
6. Full-Stack TypeScript: Complete type safety across frontend and backend significantly improved development velocity
7. Sole Developer Challenges: Building complex systems alone requires careful architecture planning and comprehensive documentation
8. Rapid Website Development: Framer enabled professional website delivery in 1 week, supporting app launch and user acquisition
9. Future-Ready Architecture: Built scalable foundation anticipating AI integration for document verification and advanced features

What Would I Do Differently?

Process Improvements

1. Design Team Redundancy: Have backup designers or cross-train developers in design principles
2. Client Onboarding Plan: Create detailed onboarding documentation and timeline expectations
3. Scale Phasing: Build MVP for current needs, then scale architecture as user base grows
4. Risk Management: Better contingency planning for external factors affecting project timeline

Technical Approach

1. Testing Strategy: Implement comprehensive testing from the beginning rather than as an afterthought
2. Documentation: Better technical documentation for easier handover and maintenance
3. Performance Monitoring: Implement monitoring and analytics from day one
4. Security Audit: Regular security reviews for a platform handling sensitive user data

Conclusion

TheTenPercent represents a significant evolution from my JobTrax experience, demonstrating growth in system design, project management, and technical leadership. While the project faced unexpected challenges with design bottlenecks and client organizational changes, it successfully delivered a functional social platform that serves the disability community.

This project taught me invaluable lessons about:

• System architecture design for scalable social platforms
• Cross-platform mobile development with native technologies
• Full-stack web development with the complete admin portal
• Rapid website development using modern no-code platforms
• Sole developer challenges and the importance of comprehensive documentation
• Project management in distributed teams
• Client relationship management during organizational changes
• Risk mitigation for design dependencies

The technical achievements—from microservices architecture to real-time messaging, native mobile apps, complete admin portal, and professional website—combined with the project management challenges, have prepared me for more complex technical leadership roles. The experience of building a complete platform ecosystem from prototype to App Store launch, including admin portal and marketing website as the sole developer, while managing international teams and client expectations, demonstrates the kind of comprehensive skill set needed for senior development positions.

The complete project delivery showcased my ability to work independently across multiple technology stacks—from complex full-stack TypeScript applications to rapid no-code website development. This experience proves my capability to take ownership of entire project lifecycles and deliver them to production standards across different technology domains.

This case study represents a real project where I served as System Designer and Technical Lead. The platform successfully launched on both iOS and Android app stores and continues to serve the disability community, with architecture ready to scale to thousands of users when the client is ready for expansion.