Developer Manual | Riper Minds Publishing

Introduction & Architecture

Platform Overview

The Riper Minds Publishing platform is built on the Base44 platform, leveraging modern web technologies to deliver secure, scalable content management and user authentication. The application serves exclusive Masonic content to verified members while maintaining strict access controls and content protection.

Core Technologies

Frontend Framework: React with functional components and hooks
Styling: Tailwind CSS with custom theme variables and shadcn/ui component library
Icons: Lucide React icon library
Backend Runtime: Deno Deploy for serverless functions
Database: Supabase (PostgreSQL) with Row-Level Security (RLS)
Authentication: Google Single Sign-On via Base44 platform
Content Delivery: VdoCipher for secure video streaming
File Storage: Supabase Storage with public and private buckets

Project Structure

├── pages/                    # React page components
├── components/              # Reusable React components
│   ├── admin/              # Admin-specific components
│   ├── contexts/           # React Context providers
│   ├── dashboard/          # Dashboard-related components
│   ├── home/               # Homepage components
│   └── video/              # Video-related components
├── entities/               # JSON schema definitions for data models
├── functions/              # Deno serverless functions
├── agents/                 # AI agent configuration files
├── integrations/           # External API integrations (Core provided)
├── utils/                  # Utility functions
└── Layout.js              # Global layout wrapper

Core Concepts

Entities (Data Models)

Entities are defined as JSON Schema objects that represent the structure of data stored in the platform. Each entity corresponds to a database table with automatic CRUD operations provided by the Base44 SDK.

Key Entity Definitions

User Entity (Built-in with custom extensions):

{
  "lodge_number": {"type": "string"},
  "years_in_craft": {"type": "number"},
  "masonic_rank": {
    "type": "string", 
    "enum": ["entered_apprentice", "fellowcraft", "master_mason", "officer", "critic"]
  },
  "membership_status": {
    "type": "string", 
    "enum": ["pending", "approved", "suspended"]
  },
  "subscription_type": {
    "type": "string", 
    "enum": ["free", "basic", "premium", "critic"]
  }
}

MasonicRegistration Entity:

{
  "full_name": {"type": "string"},
  "email": {"type": "string", "format": "email"},
  "affiliation": {"type": "string"},
  "jurisdiction": {"type": "string"},
  "office_title": {"type": "string"},
  "ip_address": {"type": "string"},
  "proof_file_uri": {"type": "string"},
  "status": {"type": "string", "enum": ["pending", "approved", "denied"]}
}

Working with Entities

Basic CRUD Operations:

import { EntityName } from '@/entities/EntityName';

// Create
const newRecord = await EntityName.create({
  field1: "value1",
  field2: "value2"
});

// Read
const allRecords = await EntityName.list();
const sortedRecords = await EntityName.list('-created_date', 10); // Latest 10
const filteredRecords = await EntityName.filter({status: 'active'});

// Update
await EntityName.update(recordId, {field1: "newValue"});

// Delete
await EntityName.delete(recordId);

// Get schema
const schema = EntityName.schema();

Row-Level Security (RLS)

Entities include RLS rules that automatically filter data based on user permissions:

{
  "rls": {
    "read": {
      "$or": [
        {"created_by": "{{user.email}}"},
        {"user_condition": {"role": "admin"}}
      ]
    },
    "write": {
      "user_condition": {"role": "admin"}
    }
  }
}

RLS Variables:

{{user.email}}: Current user's email
{{user.id}}: Current user's ID
{{user.data.field}}: Custom user data fields
user_condition: Object matching user properties

Special User Entity Methods

import { User } from '@/entities/User';

// Get current user
const currentUser = await User.me();

// Update current user's data
await User.updateMyUserData({
  lodge_number: "123",
  membership_status: "approved"
});

// Authentication
await User.login(); // Redirects to Google SSO
await User.loginWithRedirect(callbackUrl);
await User.logout();

Frontend Architecture

Pages & Components

Page Structure:

Each page is a default-exported React functional component:

// pages/ExamplePage.js
import React, { useState, useEffect } from 'react';
import { SomeEntity } from '@/entities/SomeEntity';

export default function ExamplePage() {
  const [data, setData] = useState([]);

  useEffect(() => {
    const loadData = async () => {
      const records = await SomeEntity.list();
      setData(records);
    };
    loadData();
  }, []);

  return (
    <div className="container mx-auto p-6">
      <h1 className="text-3xl font-bold">Example Page</h1>
      {/* Component content */}
    </div>
  );
}

Navigation:

import { createPageUrl } from '@/utils';
import { Link } from 'react-router-dom';

// Internal navigation
<Link to={createPageUrl('PageName')}>
  Navigate to Page
</Link>

// URL parameters
const urlParams = new URLSearchParams(window.location.search);
const videoId = urlParams.get('id');

Authentication & Authorization

Authentication Flow

Login Process:

User clicks login button
User.login() redirects to Google SSO
Google handles authentication
User returns to platform with session
User.me() retrieves user data

Protected Routes:

// components/ProtectedRoute.js
export default function ProtectedRoute({ children, requiredRole = "admin" }) {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  // Check for development mode bypass
  const isDeveloperMode = localStorage.getItem('developerMode') === 'true';

  useEffect(() => {
    const checkAuth = async () => {
      if (isDeveloperMode) {
        setUser({ role: 'admin' }); // Mock user for development
        setIsLoading(false);
        return;
      }

      try {
        const currentUser = await User.me();
        setUser(currentUser);
      } catch (error) {
        setUser(null);
      } finally {
        setIsLoading(false);
      }
    };
    checkAuth();
  }, [isDeveloperMode]);

  if (isLoading) return <LoadingSpinner />;
  if (!user || user.role !== requiredRole) return <AccessDeniedMessage />;
  
  return children;
}

Developer Mode

Developer Mode bypasses authentication for testing:

// Enable in browser console or DevMode page
localStorage.setItem('developerMode', 'true');

// Check in components
const isDeveloperMode = localStorage.getItem('developerMode') === 'true';

if (isDeveloperMode) {
  // Bypass auth checks, use mock data
  return <ComponentWithMockData />;
}

Security Warning: Never enable Developer Mode in production environments.

Backend Functions

Function Structure

Backend functions are Deno Deploy handlers that provide serverless API endpoints:

// functions/exampleFunction.js
import { createClientFromRequest } from 'npm:@base44/sdk@0.7.1';

Deno.serve(async (req) => {
  try {
    const base44 = createClientFromRequest(req);

    // User-scoped operations (requires authentication)
    const user = await base44.auth.me();
    if (!user) {
      return Response.json({ error: 'Unauthorized' }, { status: 401 });
    }

    // Parse request body
    const { param1, param2 } = await req.json();

    // Business logic here
    const result = await base44.entities.SomeEntity.create({
      user_id: user.id,
      data: param1
    });

    // Service-scoped operations (admin privileges)
    await base44.asServiceRole.integrations.Core.SendEmail({
      to: user.email,
      subject: 'Notification',
      body: 'Your action was completed.'
    });

    return Response.json({ success: true, data: result });

  } catch (error) {
    console.error('Function error:', error);
    return Response.json({ error: error.message }, { status: 500 });
  }
});

Base44 SDK Usage

Client Initialization:

// Always use createClientFromRequest for proper authentication
const base44 = createClientFromRequest(req);

User vs Service Role:

// User-scoped (respects RLS, uses user's permissions)
const userPosts = await base44.entities.Post.list();

// Service-scoped (admin privileges, bypasses RLS)
const allPosts = await base44.asServiceRole.entities.Post.list();

When to Use Service Role:

Webhooks from external services
Admin operations that need to bypass RLS
System-level operations
Always verify user authentication first with service role operations

Security Best Practices

Data Protection

Sensitive Data Handling:

// Never log sensitive data
console.log('User data:', { 
  id: user.id, 
  email: user.email.replace(/(.{2}).*@/, '$1***@') 
});

// Use private file storage for sensitive uploads
const { file_uri } = await UploadPrivateFile({ file: sensitiveDocument });

// Validate input data
const validateInput = (data) => {
  if (!data.email || !data.email.includes('@')) {
    throw new Error('Invalid email format');
  }
  if (data.content && data.content.length > 10000) {
    throw new Error('Content too long');
  }
};

Component-Level Security:

const SecureComponent = ({ children }) => {
  const { user, isApprovedMember } = useUser();
  
  // Multiple layers of authorization
  if (!user) {
    return <LoginPrompt />;
  }
  
  if (user.membership_status !== 'approved') {
    return <PendingApprovalMessage />;
  }
  
  if (!isApprovedMember) {
    return <AccessDeniedMessage />;
  }
  
  return children;
};

Development Workflow

Local Development Setup

Environment Requirements:

Modern web browser with developer tools
Access to Base44 platform dashboard
Code editor with JavaScript/React support

Development Mode:

// Enable developer mode (browser console or DevMode page)
localStorage.setItem('developerMode', 'true');

// Check development status
const isDev = localStorage.getItem('developerMode') === 'true';

Debugging Techniques

Frontend Debugging:

// Add debugging hooks
useEffect(() => {
  console.log('Component mounted with props:', props);
  console.log('User context:', user);
}, []);

// Conditional debugging
if (isDeveloperMode) {
  console.log('Debug info:', debugData);
}

Backend Function Debugging:

// functions/debugFunction.js
Deno.serve(async (req) => {
  console.log('Request method:', req.method);
  console.log('Request headers:', Object.fromEntries(req.headers.entries()));
  
  try {
    const body = await req.json();
    console.log('Request body:', body);
    // Function logic
  } catch (error) {
    console.error('Function error:', error.stack);
    return Response.json({ error: error.message }, { status: 500 });
  }
});

Conclusion

This technical manual provides a comprehensive foundation for developing, maintaining, and extending the Riper Minds Publishing platform. The architecture is designed to be scalable, secure, and maintainable while providing the flexibility needed for future enhancements.

Key Principles to Remember

Security First: Always validate authentication and authorization
User Experience: Prioritize responsive design and accessibility
Data Protection: Handle sensitive information with appropriate security measures
Code Quality: Write clean, documented, and testable code
Performance: Optimize for speed and efficiency
Maintainability: Structure code for easy understanding and modification

For questions, clarifications, or assistance with advanced implementations, refer to the Base44 platform documentation or contact the development team.

Riper Minds Platform - Developer Technical Manual