Teamboard - Calljmp App

A real-time collaborative team board showcasing Calljmp's authentication, database, and real-time capabilities

Overview

Teamboard is a case study application that demonstrates the core capabilities of the Calljmp platform through a real-time team collaboration board. Users can create posts, react to content, and see live updates from other team members - all powered by Calljmp's real-time infrastructure.

This demo showcases:

• Real-time collaboration with live post updates and reactions
• User authentication with email/password and user management
• Raw SQL queries for complex data operations and analytics
• Real-time subscriptions for instant UI updates
• Cross-platform mobile app built with React Native and Expo

Watch the demo video for a walkthrough of the app and its features.

Features

🔐 Authentication & User Management

• Email/password authentication with Calljmp Users
• User registration and login flows
• Profile management with editable user information
• Session management and secure logout

📝 Real-time Post Creation

• Create and publish posts to the team board
• Rich text content with title and body
• Real-time post publishing with instant visibility
• User attribution and timestamps

⚡ Live Reactions & Engagement

• Heart and thumbs-up reactions on posts
• Real-time reaction updates across all connected clients
• Visual reaction indicators and counters
• Optimistic UI updates for smooth UX

👥 Collaborative Features

• Live typing indicators when users are active
• Real-time user presence awareness
• Multi-user collaboration with conflict-free updates
• Cross-device synchronization

📱 Modern Mobile Experience

• Native iOS and Android app with Expo
• Clean, intuitive user interface
• Responsive design with safe area handling
• Pull-to-refresh and infinite scroll

Tech Stack

• Frontend: React Native 0.79.5 with Expo SDK 52
• Language: TypeScript for type safety
• Backend: Calljmp platform for real-time infrastructure
• Database: Calljmp Database with raw SQL queries
• Authentication: Calljmp Users with email/password
• Real-time: Calljmp real-time subscriptions and presence
• Icons: Lucide React Native for consistent iconography

Quick Start

Prerequisites

• Node.js 18+ and npm/yarn
• Expo CLI installed globally
• iOS Simulator (Mac) or Android Emulator
• Calljmp account and project setup

Installation

1. Clone and install dependencies

   cd demos/teamboard
   npm install

2. Run on device/simulator

   For iOS:

   npx expo run:ios

   For Android:

   npx expo run:android

App Architecture

app/
├── (app)/                 # Authenticated routes
│   ├── index.tsx          # Main board with posts feed
│   ├── create-post.tsx    # Post creation form
│   ├── profile.tsx        # User profile management
│   └── _layout.tsx        # Auth-protected layout
├── login.tsx              # Authentication screen
└── _layout.tsx            # Root layout

components/
├── post-card.tsx          # Individual post display
├── realtime-indicator.tsx # Live activity indicators
└── ...

providers/
└── account.tsx            # User state management

common/
├── calljmp.ts            # Calljmp SDK configuration
└── types.ts              # TypeScript type definitions

What This Demo Shows

This teamboard app demonstrates several key Calljmp capabilities:

1. Real-time Data Sync: Posts and reactions update instantly across all connected clients
2. Complex SQL Operations: Join queries for posts with author info and aggregated reactions
3. User Management: Complete authentication flow with profile management
4. Scalable Architecture: Clean separation of concerns with providers and components
5. Mobile-First Design: Native mobile experience with proper UX patterns

Support

• 📧 Email: info@calljmp.com
• 💬 Discord: Calljmp Community
• 📖 Docs: docs.calljmp.com
• 🐛 Issues: GitHub Issues

---

Built with ❤️ using Calljmp - The real-time application platform