Content Recommendations & Profile Customization
The CAFH Platform uses intelligent personalization to deliver content that matches your interests and spiritual journey stage.
How Personalization Works
The platform builds a personalized experience through multiple data sources:
Personalization Hierarchy
Wizard Profile Tags (Priority 1)
If you completed the Journey Wizard, your derivedTags are used:wizardProfile?.derivedTags // ["Meditación", "Principiante", "Bienestar"]
User Interests (Priority 2)
If no wizard profile, uses manual interests:user?.interests // ["Meditación", "Estudio"]
Default Fallback (Priority 3)
If neither exists, uses defaults:["Meditación", "Bienestar"]
Interest Loading Code
const userInterests = (
wizardProfile?.derivedTags?.length ?
wizardProfile.derivedTags :
user?.interests?.length ?
user.interests :
['Meditación', 'Bienestar']
);
Recommendation Engine
The engine filters content based on tag matching:
Content Sources
The engine pulls from multiple databases:
// Content items (articles, pages, events)
const contents = db.content.getAll().map(c => ({
id: `c_${c.id}`,
originalId: c.id,
title: c.title,
type: c.type,
tags: c.tags,
date: c.publishDate,
url: c.imageUrl,
source: 'content'
}));
// Media assets (documents, videos, audio)
const medias = db.media.getAll()
.filter(m => ['document', 'video', 'audio'].includes(m.type))
.map(m => ({
id: `m_${m.id}`,
originalId: m.id,
title: m.name,
type: m.type,
tags: m.tags || [],
date: m.uploadedAt,
url: m.url,
source: 'media'
}));
Tag Matching Algorithm
const recommendations = [...contents, ...medias].filter(item =>
item.tags.some(tag => userInterests.includes(tag))
).slice(0, 6);
- Combine all content and media items
- For each item, check if any of its tags match any of your interests
- Keep only items with at least one matching tag
- Take the first 6 results
The more interests you have, the more diverse your recommendations will be. Complete the wizard to get the most personalized experience!
Tag Categories
Journey Stage:
Principiante - Beginner contentIntermedio - Intermediate levelAvanzado - Advanced teachings
Interest Areas:
Meditación - Meditation practicesEstudio - Study materialsBienestar - Wellness topicsComunidad - Community activitiesRetiro - Retreat informationMétodo - Method teachingsEspiritualidad - Spiritual concepts
Content Format:
Video - Video contentAudio - Audio recordingsLectura - Reading materialsPráctica - Practical exercises
Administrators assign tags when creating content:{
title: "Introducción a la Meditación",
tags: ["Meditación", "Principiante", "Práctica"]
}
Your Personalized Dashboard
The main dashboard section “Tu Biblioteca Personalizada” displays your recommendations:
Content Card Layout
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{recommendations.map(item => (
<ContentCard
icon={getIcon(item.type)}
color={getColor(item.type)}
title={item.title}
type={item.type}
onClick={() => handleOpen(item)}
/>
))}
</div>
Type-Based Styling
📝 Article
Color: Blue (bg-blue-50 text-blue-600)Written content and blog posts
📥 Resource/Document
Color: Green (bg-green-50 text-green-600)PDFs and downloadable materials
🎵 Audio
Color: Purple (bg-purple-50 text-purple-600)Audio recordings and meditations
🎬 Video
Color: Red (bg-red-50 text-red-600)Video content and recordings
Empty State
If no recommendations match:
<p className="text-slate-500 italic">
Completa "Comenzar el Viaje" o añade tags a tu perfil
para ver recomendaciones.
</p>
The empty state appears when:
- You haven’t completed the wizard
- Your interests don’t match any content tags
- All matching content is set to “Draft” status
Profile Customization
You can customize your profile in several ways:
Cover Image
The dashboard header has a customizable background:
Hover Header
Move your mouse over the dashboard header area.
Click Image Icon
The camera icon appears in the top-right corner when hovering.
Cycle Backgrounds
Each click rotates through 4 preset landscape images:const presets = [
"https://images.unsplash.com/photo-1469474968028-56623f02e42e",
"https://images.unsplash.com/photo-1518531933037-91b2f5f229cc",
"https://images.unsplash.com/photo-1506126613408-eca07ce68773",
"https://images.unsplash.com/photo-1534447677768-be436bb09401"
];
Automatic Save
Your selection is saved immediately to your user profile.
<input
type="text"
value={profileForm.name}
placeholder="Tu nombre completo"
/>
<input
type="tel"
value={profileForm.phone}
placeholder="+56 9 1234 5678"
/>
<input
type="text"
value={profileForm.city}
placeholder="Ej: Santiago, Buenos Aires"
/>
Save Profile Changes
const handleSaveProfile = () => {
setIsSaving(true);
const updated = db.auth.updateCurrentUser({
name: profileForm.name,
phone: profileForm.phone,
city: profileForm.city
});
setCurrentUser(updated);
setIsSaving(false);
};
Changes to your name are immediately reflected in the dashboard header greeting: “Hola, [Your First Name]“
Activity-Based Learning
The platform learns from your behavior:
Consumption Tracking
Every content interaction is logged:
db.analytics.trackConsumption({
userId: currentUser.id,
assetId: item.id,
assetName: item.title,
assetType: item.type,
tags: item.tags,
timestamp: new Date().toISOString()
});
What’s Tracked
- Which articles you read
- Videos you watch
- Documents you download
- Audio you listen to
- Virtual meetings attended
- In-person events checked in
- Feedback submitted
- Time spent on content
- Content completion rates
- Preferred content types
Future Enhancements
The tracking system is designed to support:
- Adaptive Recommendations: Suggest similar content based on what you’ve consumed
- Engagement Scoring: Identify your most relevant topics
- Personalized Emails: Send content matching your demonstrated interests
- Journey Progression: Track your spiritual development over time
Privacy Note
All tracking is used solely to improve your experience. Data is never shared externally or used for advertising.
News Feed Personalization
The Novedades para ti (News for You) section shows recent blog posts:
Current Implementation
const recentBlogPosts = db.blog.getAll().slice(0, 2);
Future Personalization
Planned enhancement:
const personalizedNews = db.blog.getAll()
.filter(post =>
post.tags.some(tag => userInterests.includes(tag))
)
.slice(0, 2);
Profile Type Influences
Your wizard profile type affects:
Content Recommendations
profileType: {
id: "pt_seeker",
name: "Explorador Espiritual",
contentTags: ["Principiante", "Meditación", "Bienestar"]
}
derivedTags for content filtering.
Kit Items
profileType: {
kitItems: [
{
title: "Guía de Inicio",
type: "PDF",
catalogItemId: "cat_guide_01"
},
{
title: "Primera Meditación",
type: "Audio",
catalogItemId: "cat_audio_01"
}
]
}
CRM Integration
profileType: {
crmTag: "Explorador",
crmListId: "list_seekers"
}
Changing your profile type (by retaking the wizard) will update your tags and may significantly change your content recommendations.
Display Preferences
While not yet exposed in the UI, the platform stores display preferences:
interface UserPreferences {
theme: 'light' | 'dark'; // UI theme
notifications: boolean; // Enable notifications
emailDigest: boolean; // Weekly email digest
language: 'es' | 'en'; // Interface language
}
const prefs = db.user.getPreferences();
Coming Soon
A full preferences editor is planned for future releases, allowing you to control all display and notification settings.
Recommendations Best Practices
For Members
Complete the Journey Wizard
This provides the most accurate interest profile.
Interact with Content
View articles, watch videos, and download resources to build your activity history.
Keep Profile Updated
Update your information if your interests or journey stage changes.
Provide Feedback
Complete event feedback to help improve content curation.
Understanding Recommendations
If recommendations seem off:
- Check your profile tags (wizard or manual interests)
- Verify content in the library has matching tags
- Contact an administrator to adjust your profile type
- Retake the wizard if your journey stage has changed significantly
Data Persistence
Your personalization data is stored in:
Browser Storage
// Wizard Profile
localStorage.getItem('cafh_user_wizard_profiles_v1')
// User Session & Preferences
localStorage.getItem('cafh_user_session_v1')
localStorage.getItem('cafh_user_prefs_v1')
// Activity History
localStorage.getItem('cafh_user_history_v1')
// Content Interactions
localStorage.getItem('cafh_content_interactions_v1')
Data Sync
In a production environment:
- Browser storage caches for performance
- Server database is source of truth
- Periodic sync ensures consistency
Clearing browser data will clear cached preferences but won’t affect your server-side profile. Simply log in again to restore your personalization.