Michael Mainguy
c1503d959e
Implement comprehensive feature toggle system allowing menu options and features to be controlled via JSON configuration fetched from API endpoint or static files. Core System: - Create FeatureConfig type system with page, feature, and limit-based flags - Add React Context (FeatureProvider) that fetches from /api/user/features - Implement custom hooks (useFeatures, useIsFeatureEnabled, useFeatureLimit, etc.) - Default config disables everything except home page Integration: - Update PageHeader to filter menu items based on page flags - Add ProtectedRoute component to guard routes - Update VR menu to conditionally render items based on feature flags - Update CreateDiagramModal to enable/disable options (private, encrypted, invite) - Update ManageDiagramsModal to use configurable maxDiagrams limit Configuration Files: - Add static JSON files for local testing (none, free, basic, pro tiers) - Add dev proxy for /api/user/features endpoint - Include README with testing instructions Updates: - Complete CLAUDE.md naming conventions section - Version bump to 0.0.8-27 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> |
||
|---|---|---|
| .. | ||
| features | ||
| features-basic.json | ||
| features-free.json | ||
| features-none.json | ||
| features-pro.json | ||
| README.md | ||
Feature Configuration Testing
This directory contains static JSON files for testing different user tiers locally.
Available Configurations
Default: features (none tier)
- What you see: Only the home page
- All pages and features: Disabled
- Use case: Unauthenticated users or when API is unavailable
Free Tier: features-free.json
- Pages: All marketing pages + VR Experience
- Features: Basic diagram creation, management, immersive mode
- Limits: 6 diagrams max, 100MB storage
- No access to: Templates, private/encrypted designs, collaboration
Basic Tier: features-basic.json
- Pages: All pages available
- Features: Free features + templates + private designs
- Limits: 25 diagrams max, 500MB storage
- No access to: Encrypted designs, collaboration
Pro Tier: features-pro.json
- Pages: All pages available
- Features: Everything unlocked
- Limits: Unlimited (indicated by -1)
How to Test Locally
Method 1: Copy the file you want to test
# Test free tier
cp public/api/user/features-free.json public/api/user/features
# Test basic tier
cp public/api/user/features-basic.json public/api/user/features
# Test pro tier
cp public/api/user/features-pro.json public/api/user/features
# Test none/default (locked down)
cp public/api/user/features-none.json public/api/user/features
Method 2: Symlink (easier for switching)
# Remove the default file
rm public/api/user/features
# Create a symlink to the tier you want to test
ln -s features-free.json public/api/user/features
# or
ln -s features-basic.json public/api/user/features
# or
ln -s features-pro.json public/api/user/features
What Changes Between Tiers
| Feature | None | Free | Basic | Pro |
|---|---|---|---|---|
| Pages (Examples, Docs, Pricing) | ❌ | ✅ | ✅ | ✅ |
| VR Experience | ❌ | ✅ | ✅ | ✅ |
| Create Diagram | ❌ | ✅ | ✅ | ✅ |
| Create From Template | ❌ | ❌ | ✅ | ✅ |
| Private Designs | ❌ | ❌ | ✅ | ✅ |
| Encrypted Designs | ❌ | ❌ | ❌ | ✅ |
| Share/Collaborate | ❌ | ❌ | ❌ | ✅ |
| Max Diagrams | 0 | 6 | 25 | ∞ |
| Storage | 0 | 100MB | 500MB | ∞ |
Backend Implementation (Future)
When you're ready to implement the backend, create an endpoint at:
GET https://www.deepdiagram.com/api/user/features
The endpoint should:
- Validate the Auth0 JWT token from
Authorization: Bearer <token>header - Query the user's subscription tier from your database
- Return JSON matching one of these structures based on their tier
- Handle errors gracefully (401 for invalid token, 403 for unauthorized)
The frontend will automatically fall back to the static features file if:
- User is not authenticated
- API returns an error
- Network request fails