managarten/apps/mana/apps/web/WELCOME_ROUTE_SETUP.md

Welcome Route Setup - Mana Web

✅ Files Created

1. /src/lib/config/apps.ts - App configuration system
2. /src/routes/welcome/+page.svelte - Welcome page component
3. /src/routes/auth/callback/+page.svelte - Auth callback handler

🚀 How to Test

1. Access Welcome Page Directly

Open your browser and navigate to:

http://localhost:5173/welcome?appName=memoro

Try different apps:

• ?appName=memoro - Blue theme, voice memo features
• ?appName=cards - Purple theme, flashcard features
• ?appName=storyteller - Amber theme, writing features
• ?appName=mana - Indigo theme, account management
• No parameter - Default Mana platform overview

2. Test Email Verification Flow

To test the full flow, you need to configure Supabase email templates:

In Supabase Dashboard > Authentication > Email Templates:

<h2>Confirm your signup</h2>
<p>Follow this link to confirm your user:</p>
<p><a href="{{ .ConfirmationURL }}&appName=memoro">Confirm your email</a></p>

Then:

1. Register a new account
2. Check email for confirmation link
3. Click link → Should redirect to welcome page with Memoro branding
4. Click "Get Started" → Dashboard

🎨 Supported Apps

App Name	Theme Color	Features
memoro	Blue #3B82F6	Voice memos, AI transcription
cards	Purple #8B5CF6	Flashcards, spaced repetition
storyteller	Amber #F59E0B	Creative writing, AI assistant
mana	Indigo #6366F1	Account management, SSO
(none)	Indigo #6366F1	Platform overview

📝 Adding New Apps

Edit /src/lib/config/apps.ts:

export const appConfigs: Record<string, AppConfig> = {
	// ... existing apps

	mynewapp: {
		name: 'mynewapp',
		displayName: 'My New App',
		tagline: 'Your tagline here',
		description: 'What your app does',
		logoEmoji: '🚀',
		primaryColor: '#FF6B6B',
		accentColor: '#FF8E8E',
		features: [
			{
				icon: '✨',
				title: 'Feature Name',
				description: 'Feature description',
				color: '#FF6B6B',
			},
			// Add 4-6 features
		],
		dashboardRoute: '/dashboard',
	},
};

🔧 Customization

Change Colors

Colors are in the app config. Each app has:

• primaryColor - Main brand color (headers, buttons)
• accentColor - Secondary color
• Feature-specific colors for each feature card

Add Custom Instructions

Edit /src/routes/welcome/+page.svelte around line 125:

{:else if appConfig.name === 'mynewapp'}
  <div class="flex items-start gap-3">
    <div class="mt-1 text-xl">🎯</div>
    <div>
      <h4>First Step</h4>
      <p>Instructions for your app...</p>
    </div>
  </div>

🐛 Troubleshooting

Issue: 404 Error on /welcome

• Solution: Refresh the dev server (files created while server running)

Issue: Page shows Mana branding instead of app branding

• Solution: Check appName parameter in URL is correct
• Verify app exists in apps.ts config

Issue: localStorage not persisting

• Solution: Check browser console for errors
• Clear localStorage and try again

📚 Next Steps

1. Configure Supabase email templates to include &appName=memoro
2. Test registration flow end-to-end
3. Customize colors and features per app
4. Add more apps to the config as needed

🎉 Usage Summary

Direct Access:

http://localhost:5173/welcome?appName=memoro

From Email Verification:

User registers → Email sent with appName
→ Click confirmation link
→ /auth/callback processes
→ Redirects to /welcome?appName=memoro
→ Beautiful welcome page shows
→ User clicks "Get Started"
→ Dashboard

That's it! The welcome route is ready to use. 🚀