Project
Project Lifescape
Project Lifescape is a full-stack, purpose-driven SaaS platform that unifies personal growth, coaching, education, and community into one seamless digital experience. Built with a modern Next.js and TypeScript architecture, it delivers a complete product ecosystem with public marketing pages, subscription workflows, personalized user dashboards, and robust learning and engagement features such as courses, events, messaging, and community tools. On the operations side, it includes an enterprise-grade admin system with role-based access control, CRM, analytics, content management, and financial oversight. The platform reflects both technical depth and product strategy, translating the Lifescape brand promise into a scalable system that helps people design more intentional, meaningful lives.

Lifescape is a full-stack, purpose-driven platform that combines personal development, coaching, education, and community into one integrated SaaS experience. Its core mission is to help people move from living by default to living by design through structured learning, practical tools, and ongoing community support.
From a product perspective, the website functions as a complete ecosystem: public marketing pages, member onboarding and subscription tiers, user dashboards for courses/events/messages, and a large enterprise-style admin environment for operations, finance, content, CRM, and analytics. The platform supports both digital and real-world engagement through courses, live events, video bookings, community discussions, affiliate features, and commerce flows (including merch and subscription billing).
Technically, this is a substantial production-grade implementation built with Next.js App Router, React, TypeScript, Tailwind, and Supabase for auth/data/realtime, plus Stripe, Daily, Mux, SendGrid/Resend, and Printful integrations. The architecture reflects scale and governance needs, including a multi-role admin model with fine-grained access control and a broad operational surface across content, revenue, customer lifecycle, and system health.
Brand-wise, Lifescape is positioned as warm, empowering, and intentional, with messaging centered on growth, wellness, and community. The visual and verbal identity supports that positioning through approachable educational tone, trust-oriented design choices, and a clear promise: helping people orchestrate meaningful, purpose-led lives.
Project README
Project Lifescape
A comprehensive community and learning platform built with modern web technologies. Lifescape enables users to connect, learn, share, and grow together through courses, live events, messaging, video calls, and community engagement.
Tech Stack
- Framework: Next.js 16.2.3 (App Router, Turbopack, TypeScript 5)
- Runtime: React 19.2.3
- Database & Auth: Supabase (PostgreSQL, Auth, Realtime, Storage) —
@supabase/supabase-jsv2.97,@supabase/ssrv0.8 - Styling: Tailwind CSS v4 + shadcn/ui (Radix UI v1.4.3) + Geist font
- Payments: Stripe v20 (API version
2026-02-25.clover) + React Stripe.js v5 - Video: Daily.co v0.89 (interactive video calls), Mux v12 (livestreaming)
- Animations: Framer Motion v12 + Lottie React
- Notifications: Sonner v2 (toast notifications)
- Email: Resend + SendGrid (inbound webhooks)
- Rich Text: Tiptap v3 editor + React Markdown v10
- Charts: Recharts v3
- Forms: React Hook Form v7 + Zod v4
- State: Zustand v5 + TanStack Query v5
- PDF: PDFKit v0.17
- Merch: Printful (print-on-demand, via custom API client)
- AI: OpenAI API
Key Features
User Features
- Authentication & Profiles — Supabase Auth with profile customization, avatars, bios
- Dashboard — Personalized dashboard with stats, progress tracking, quick actions
- Courses & Learning — Enroll in courses, complete lessons, take quizzes, earn certifications
- Community — Create/join discussion threads, reply, build social connections
- Messaging — Direct 1-on-1 and group messaging with Realtime updates
- Live Events — Register for events, watch interactive video (Mux livestreaming), live chat
- Video Calls — Schedule bookings with video calls via Daily.co (1-on-1 meetings)
- Content Library — Save/bookmark blog posts, courses, and resources
- Gamification — 50+ achievement badges, streaks, engagement scoring, leaderboards
- Merch & Shop — Browse and order merchandise (Printful print-on-demand)
- Affiliate Program — Track referrals, earn commissions, access marketing assets
- Subscription Tiers — 5 tiers: Free → Explorer → Pathfinder → Architect → Visionary
- Contests — Enter and submit to creative contests
- Notifications — Real-time notifications with Supabase Realtime
- Global Search — Cmd+K search palette across all content
Admin Features
- 13-Role Access Control — Hierarchical RBAC: superadmin, ceo, coo, cfo, cto, content_director, marketing_director, sales_director, community_manager, support_agent, advisory_board, data_manager, admin — with temp-admin and data-team membership overrides
- 90+ Admin Pages — Dashboard, executive summary, operations, revenue, financials (reports/earnings/payouts/contractors), budget management, tax & compliance, investor dashboard
- Full CRM Suite — Contacts, accounts, pipeline, activities, forecasting, lead scoring, playbooks, RevOps, territories, workflows, reports
- Content Management — Blog editor, course builder (modules/lessons), product management, resource library, media gallery, email templates
- Marketing Tools — Campaign manager, newsletter builder, editorial calendar, search analytics, social tracker, A/B testing, landing pages
- Community & Events — Community management, moderation, events, bookings, contests, polls, badges, member segments
- Finance & Commerce — Revenue dashboard, invoices, refunds, coupons, pricing management, affiliate program, merch orders (Printful)
- System & Data — User management, audit log, platform health, data management (tables/reports/team-reports), webhooks, integrations
- Analytics — SQL analytics console, learning analytics, community health, abandoned cart tracking
Getting Started
Prerequisites
- Node.js 18+ (recommend using the latest LTS)
- npm, yarn, pnpm, or bun
- Supabase account
- Stripe account (for payments)
- Daily.co account (for video)
- Mux account (for livestreaming)
- Resend account (for email)
Installation
Clone the repository:
git clone https://github.com/TheOfficialDM/lifescape.x.git cd lifescape.xInstall dependencies:
npm install # or yarn install, pnpm install, bun installSet up environment variables:
cp .env.example .env.localFill in the
.env.localfile with:# Supabase NEXT_PUBLIC_SUPABASE_URL=your_supabase_url NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key SUPABASE_SERVICE_ROLE_KEY=your_service_role_key # Stripe STRIPE_SECRET_KEY=your_stripe_secret NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your_stripe_public_key STRIPE_WEBHOOK_SECRET=your_webhook_secret STRIPE_CONNECT_WEBHOOK_SECRET=your_connect_webhook_secret # App NEXT_PUBLIC_APP_URL=http://localhost:3000 CRON_SECRET=your_random_secret_for_cron # Email RESEND_API_KEY=your_resend_api_key SENDGRID_API_KEY=your_sendgrid_api_key [email protected] # Video & Livestreaming DAILY_API_KEY=your_daily_api_key NEXT_PUBLIC_DAILY_DOMAIN=your_daily_domain MUX_TOKEN_ID=your_mux_token_id MUX_TOKEN_SECRET=your_mux_token_secret # Printful (merch) PRINTFUL_API_KEY=your_printful_api_key # AI OPENAI_API_KEY=your_openai_api_keyPush database migrations:
supabase db pushOr manually run migrations via the Supabase dashboard.
Start the development server:
npm run devOpen http://localhost:3000 to see the app.
Project Structure
src/
├── app/ # Next.js App Router (164 pages, 51 API routes)
│ ├── (admin)/admin/ # Admin dashboard (90+ pages, role-gated)
│ │ ├── crm/ # Full CRM: contacts, accounts, pipeline, forecasting, etc.
│ │ ├── financials/ # Financial reports, earnings, payouts, contractors
│ │ ├── courses/ # Course CRUD, analytics, student management
│ │ ├── data/ # Data management hub, tables, reports, team access
│ │ ├── email-templates/ # Email template editor with brand settings
│ │ ├── users/ # User management, temp access grants
│ │ ├── events/ # Event management
│ │ └── ... # 70+ more admin pages
│ ├── (user)/dashboard/ # User dashboard (33 pages)
│ │ ├── courses/ # Course player, quizzes
│ │ ├── messages/ # Direct messaging
│ │ ├── community/ # Discussion threads
│ │ ├── events/ # Live events
│ │ ├── bookings/ # Video call bookings
│ │ ├── orders/ # Digital + merch orders
│ │ └── ... # Profile, settings, billing, etc.
│ ├── (marketing)/ # Public pages (32 pages)
│ │ ├── services/ # Service pages (coaching, books, web3, etc.)
│ │ ├── blog/, courses/, events/ # Content listings + detail views
│ │ ├── merch/ # Merchandise store
│ │ └── ... # Pricing, FAQ, legal pages, etc.
│ ├── (auth)/ # Auth: login, signup
│ ├── api/ # API routes (51 endpoints)
│ │ ├── webhooks/ # Stripe, SendGrid, Printful, Cal.com
│ │ ├── cron/ # 6 cron endpoints (daily, SLA, sequences, etc.)
│ │ ├── admin/ # Admin API (SQL, uploads, newsletters, licenses)
│ │ ├── payment-methods/ # Payment method CRUD
│ │ ├── licenses/ # License validation, activation, checkout
│ │ └── ... # Search, session, revalidate, etc.
│ └── error.tsx, not-found.tsx # Error boundaries
├── components/ # 32 component directories
│ ├── ui/ # shadcn/ui primitives (50+ components)
│ ├── layout/ # Header, sidebar, footer, navigation
│ ├── admin/ # Admin-specific components
│ ├── video/ # Daily.co + Mux components
│ ├── events/ # Event registration, live chat
│ ├── courses/ # Course player, lesson cards
│ ├── community/ # Thread lists, reply forms
│ ├── messages/ # Conversation UI
│ ├── feed/, realtime/ # Activity feed, realtime notifications
│ ├── search/ # Global search palette
│ ├── save/, share/ # Bookmark + social share
│ ├── marketing/ # Marketing page components
│ ├── badges/ # Achievement badge system (50+ badges)
│ ├── animations/ # Framer Motion + Lottie
│ └── ... # Checkout, invoices, blog, etc.
├── lib/ # 37 library files
│ ├── actions/ # Server actions (7 modules)
│ ├── supabase/ # Supabase clients (server, client, admin, middleware)
│ ├── printful/ # Custom Printful SDK
│ ├── admin-role-config.ts # RBAC: 13 roles, page-role map, nav config
│ ├── badges.ts # 50+ achievement badges
│ ├── constants.ts # App constants, tier configs
│ ├── stripe-connect.ts # Stripe Connect (payouts)
│ ├── subscription-renewal.ts # Renewal orchestration
│ ├── invoice-generator.ts # PDFKit invoice generation
│ └── utils.ts, daily.ts, mux.ts # Utility + API helpers
├── types/ # 7 TypeScript definition files
└── styles/
└── globals.css # Tailwind v4 + OKLCH palette + dark mode
Database Schema (Key Tables)
Core
| Table | Purpose |
|---|---|
profiles |
User profiles, roles (user_role[]), engagement scores, onboarding flag |
subscriptions |
Membership tiers (free → visionary), billing info |
Courses & Learning
| Table | Purpose |
|---|---|
courses, course_modules, course_lessons |
Course content & structure |
course_enrollments, lesson_completions |
User progress tracking |
quizzes, quiz_questions, quiz_attempts |
Course quizzes |
Community & Social
| Table | Purpose |
|---|---|
community_threads, user_posts, community_replies |
Community discussions |
events, event_registrations, event_chat_messages |
Events & registrations (Realtime) |
bookings |
Video call bookings with meeting URLs |
user_messages, message_recipients |
Direct messaging |
Gamification
| Table | Purpose |
|---|---|
achievement_badges, user_streaks |
Badges (50+ defined) & streaks |
user_statistics |
Aggregated user stats |
CRM & Sales
| Table | Purpose |
|---|---|
crm_contacts, crm_accounts |
CRM contacts & accounts |
crm_deals, crm_pipeline_stages |
Sales pipeline |
crm_activities, crm_notes |
Activity tracking & notes |
crm_health_scores, crm_customer_tags |
Health scoring & tagging |
crm_drip_assignments, crm_drip_campaigns |
Drip campaign automation |
Commerce & Finance
| Table | Purpose |
|---|---|
orders, order_items |
Digital product orders |
merch_orders |
Merchandise orders (Printful) |
invoices |
Generated invoices |
coupons, coupon_redemptions |
Coupon codes |
licenses, license_activations |
Software licenses |
affiliate_clicks, affiliate_commissions |
Affiliate tracking |
Content & Admin
| Table | Purpose |
|---|---|
blog_posts |
Blog content |
products |
Digital products |
saved_content |
Bookmarked content (with RLS) |
data_team_members |
Data team access control (time-gated) |
search_keywords |
Search analytics data |
newsletters, newsletter_segments |
Email newsletters |
Custom Enums
| Enum | Values |
|---|---|
user_role |
20 values: user, moderator, coach, instructor, support, editor, partner, admin, temp_admin, superadmin, ceo, coo, cfo, cto, content_director, marketing_director, sales_director, community_manager, support_agent, advisory_board, data_manager |
membership_tier |
free, explorer, pathfinder, architect, visionary |
order_status |
pending, processing, completed, cancelled, refunded |
course_status |
draft, published, archived |
product_status |
draft, active, archived |
Development Workflow
Running Locally
npm run dev
Building for Production
npm run build
npm start
Type Checking
npx tsc --noEmit
Database Migrations
Create a new migration in supabase/migrations/:
supabase migration new migration_name
Then push to your Supabase project:
supabase db push
Server Actions
Place all mutations in src/lib/actions/ with the "use server" directive. Always validate input and check user permissions.
Authentication
- Server: Import
createClient()from@/lib/supabase/server - Client: Import
createClient()from@/lib/supabase/client - Admin: Import
createAdminClient()from@/lib/supabase/admin(service-role queries only)
Code Conventions
Naming
- Components: PascalCase (e.g.,
FeedbackModal,CommentList) - Files: kebab-case for components (e.g.,
feedback-modal.tsx) - Folders: kebab-case or PascalCase as appropriate
- No duplicate or ambiguous names
Component Organization
- UI primitives:
components/ui/ - Layout components:
components/layout/ - Feature-specific:
components/[feature]/ - File pattern: Server page → props to
*-client.tsxfor interactive state
Imports
- Use alias imports:
@/lib,@/components,@/types - Radix UI imports:
import { Dialog as DialogPrimitive } from "radix-ui"(not@radix-ui/react-dialog)
Error & Empty States
- 404 errors:
app/not-found.tsx(branded design) - 500 errors:
app/error.tsx(friendly message with retry) - Empty states: Use
EmptyStatecomponent fromcomponents/ui/empty-state.tsx
Styling
- Use Tailwind CSS with shadcn/ui components
- Dynamic widths: Use inline
style={{ width: \${pct}%` }}(NOT Tailwind dynamic classes likew-[X%]`) - Dark mode: Implemented via
next-themeswith.darkoverrides inglobals.css
Deployment
Vercel (Recommended)
- Push to GitHub
- Connect repo to Vercel
- Set environment variables in Vercel dashboard
- Deploy (automatic on main branch pushes)
Environment Variables for Production
Ensure all required env vars are set in Vercel before deploying (see Installation section).
Contributing
This project uses:
- TypeScript — Type safety required
- Tailwind CSS + shadcn/ui — Consistent component library
- Server actions — Mutations in
src/lib/actions/ - Supabase — All data queries and auth
Before Submitting a PR
- File structure: Follow naming conventions above
- Types: Add TypeScript types (
src/types/) - Error handling: Validate user input and check permissions
- Dark mode: Test light and dark themes
- Mobile: Test on mobile devices (fixed bottom tab bar)
- Accessibility: Use semantic HTML and ARIA attributes where needed
Testing
Unit and integration tests should be added for critical features. Configuration to be added soon.
Support
For questions or issues:
- Check existing GitHub issues
- Create a new issue with a clear description
- Include environment details and reproduction steps
License
All rights reserved. © Devin Marshall
Project Gallery
This album hosts the website screen captures for Project Lifescape.


