PeoplID

About the Project

PeoplID is a comprehensive digital identity and content management platform. It's designed to allow individuals to create rich, dynamic profiles that go beyond traditional social media, focusing on personal history, professional achievements, and family connections. The platform distinguishes between "personal" profiles (user-owned) and "personality" profiles (managed by contributors and approved by admins), offering a robust freemium model for content creation and management.

Inspiration

The inspiration for PeoplID stemmed from a desire to create a more meaningful and structured way for individuals to document their lives, careers, and family legacies. Traditional social media often fragments personal narratives, while professional platforms can be too rigid. We envisioned a space where users could curate their stories, memories, and achievements with rich media, connect with family members through an interactive tree, and even build professional resumes or showcase pages from their curated content. The idea was to provide a "home" for every story, allowing for both public sharing and private reflection, with granular control over visibility.

How it was Built

PeoplID is a modern full-stack application built with a strong emphasis on performance, scalability, and developer experience.

  • Frontend: The user interface is crafted using React with TypeScript, leveraging React Hook Form for efficient and robust form management across complex data structures. React Router DOM handles seamless navigation, and Tailwind CSS provides a utility-first approach for rapid and consistent styling, ensuring a clean and responsive design. Vite serves as the build tool, offering a fast development environment.
  • Backend: Supabase forms the backbone of the backend infrastructure.
    • PostgreSQL Database: All application data, from user profiles and content to entitlements and administrative logs, is stored in a PostgreSQL database.
    • Authentication: Supabase's built-in email/OTP authentication system provides secure user access.
    • Storage: Media uploads (profile images, content-related images, audio, video, and general files) are managed efficiently using Supabase Storage buckets, with specific policies for different content types and user roles.
    • Edge Functions (Deno/TypeScript): Critical business logic, data processing, and integrations are handled by Supabase Edge Functions. These serverless functions are written in TypeScript and deployed on Deno, enabling complex operations like payment webhook processing (Razorpay), AI-powered transcription (OpenAI Whisper), content generation prompts (Gemini), and dynamic data fetching for feeds and curated pages.
  • Key Concepts Implemented:
    • Profile Types: A core distinction between user-managed "personal" profiles and admin-approved "personality" profiles, each with distinct workflows.
    • Content Types: A wide array of content types, including Memories, Professional Memories, Book Writing Entries, Wall Entries, Magazines, Photobooks, Awards, Professional Experiences, Education, Certifications, and Dynamic Custom Fields.
    • Entitlement System: A sophisticated freemium model that grants users daily, weekly, monthly, six-monthly, and lifetime free quotas for various content types, with options to purchase additional capacity.
    • Media Handling: Robust upload, storage, and display of diverse media formats.
    • Privacy & Visibility: Granular control over content visibility (is_public, send_to_feed) and profile approval statuses.
    • Social Interactions: Features like likes, comments, upvotes/downvotes, and reporting for content engagement.
    • Family Connections: The ability to link family members and visualize relationships through an interactive family tree.
    • Curated Pages: Users can create custom showcase or resume pages by selecting specific profile sections and content items.

Challenges Faced

Building PeoplID presented several interesting challenges:

  1. Complex Data Modeling and Relationships: Designing a flexible database schema to accommodate diverse content types, each with its own set of fields and media, while maintaining clear relationships to user profiles, was a significant undertaking. The dynamic_fields feature, allowing users to define their own structured data, required a highly adaptable JSONB-based solution.
  2. Granular Quota Management: Implementing the freemium entitlement system with its various rolling and lifetime quotas proved complex. Ensuring accurate tracking of used and available quotas, and enforcing these limits across different content types and user tiers, demanded careful logic in the Edge Functions and precise updates to the people table.
  3. Supabase Edge Function Orchestration: Many core features, especially content creation, updates, and deletions, involved intricate logic within Supabase Edge Functions. Managing transactions, handling media uploads, and updating related tables (like quota counts) within a serverless environment required careful error handling and robust design.
  4. Media Upload and Management: Integrating Supabase Storage for various media types (images, audio, video, generic files) and ensuring proper file paths, public URLs, and deletion mechanisms was crucial. The MediaUploadInput component became a central piece of this.
  5. Dynamic UI Rendering: Creating a frontend that could dynamically render forms and display content based on user-selected types (e.g., for dynamic custom fields or curated pages) required a flexible component architecture and extensive use of React Hook Form's capabilities.
  6. Authentication and Authorization (RLS): Setting up comprehensive Row Level Security (RLS) policies in Supabase was critical for data privacy and security. Distinguishing between personal profile owners, personality profile contributors, and public viewers, and ensuring each could only access or modify data according to their permissions, was a continuous challenge.
  7. Family Tree Visualization: Developing the interactive family tree visualization required understanding graph data structures and integrating a library like Cytoscape.js, which had its own learning curve for styling and interaction.
  8. Content Moderation and Submissions: For personality profiles, implementing a submission and approval workflow, including the ability for admins to review changes and compare submitted data with live data, added another layer of complexity.

Each challenge provided valuable learning opportunities, deepening our understanding of full-stack development, database design, serverless architectures, and user experience considerations in a complex application.

Built With

Share this project:

Updates