Modeling TFSA, FHSA and RRSP Rules in Software
How I model TFSA, FHSA and RRSP contribution room in MapleWealth: ledgers instead of balances, carry-forward, re-contribution timing and the edge cases.
8 min read
Case StudyEnterprise-Grade French Learning Platform for Canadian Immigration
Built with Next.js 15, TypeScript, and Firebase - combining cutting-edge web technologies with educational best practices to create an immersive, accessible, and highly performant learning experience.
2 Weeks
Timeline
2025
Year
Full-Stack
Services
Next.js 15
Tech Stack
Executive Summary
Français Pro is a modern, enterprise-grade French language learning platform specifically designed for Canadian immigration preparation. Built with Next.js 15, TypeScript, and Firebase, it represents a sophisticated solution that combines cutting-edge web technologies with educational best practices to create an immersive, accessible, and highly performant learning experience.
60%
Bundle Size Reduction
95+
Lighthouse SEO Score
<2s
Load Time (3G)
WCAG
2.1 AA Compliant
29s
Build Time
41
Dynamic Pages
The Challenge
Canadian immigration applicants face significant barriers when learning French for Express Entry requirements. Traditional language courses are expensive, often costing $2000-5000, and lack specific focus on Canadian immigration needs.
Key Problems Identified:
- •Cost Barrier: Traditional courses cost $2000-5000, making French learning inaccessible to many immigrants
- •Content Misalignment: Existing courses lack focus on Canadian Language Benchmarks (CLB) and Express Entry requirements
- •Progress Tracking: No efficient way to track learning progress for immigration applications
- •Motivation & Engagement: Lack of structured, gamified learning experiences to maintain long-term engagement
- •Cultural Context: Limited focus on French-Canadian cultural elements relevant to immigration
Mission Statement:
Français Pro helps immigrants learn French efficiently for Canadian Express Entry, providing a 100% free alternative to expensive language courses while maintaining enterprise-level architecture and real-time progress tracking.
We needed to create a comprehensive, accessible platform that could deliver enterprise-level education while remaining completely free for users, with specific focus on Canadian immigration preparation and cultural integration.
Solution
Français Pro was designed as a modern, enterprise-grade French learning platform specifically tailored for Canadian immigration preparation. Built with cutting-edge web technologies, it combines educational best practices with performance optimization to create an immersive learning experience.
Accessibility
100% free with no hidden costs, removing financial barriers to French learning
Relevance
Content specifically aligned with Canadian Language Benchmarks (CLB) and Express Entry requirements
Technology
Built with Next.js 15, TypeScript, and Firebase for optimal performance and scalability
Our Approach Focused on Three Core Pillars:
1. Educational Excellence
- • Progressive learning path from beginner to advanced
- • Interactive content with click-to-hear pronunciation
- • Real-world scenarios and cultural integration
- • Gamification with XP system and achievements
2. Technical Innovation
- • 60% bundle size reduction for faster loading
- • Real-time data synchronization across devices
- • WCAG 2.1 AA accessibility compliance
- • Advanced caching and performance optimization
Target Audience:
Primary: Canadian immigration applicants preparing for Express Entry
Secondary: French language learners seeking structured, comprehensive education
Tertiary: Educators and institutions looking for modern language learning tools
Technical Architecture
Frontend Stack
- ✓Next.js 15 (App Router, Server Components)
- ✓React 19.1.0 (Latest concurrent features)
- ✓TypeScript 5.0 (Full type safety)
- ✓Tailwind CSS 4.1.13 (Utility-first styling)
- ✓shadcn/ui (High-quality component library)
- ✓Radix UI (Accessible primitives)
- ✓Lucide React (Icon system)
Backend & Database
- ✓Firebase Authentication (JWT tokens)
- ✓Firestore NoSQL Database
- ✓Firebase Storage (File uploads)
- ✓Realtime Database (Live updates)
- ✓Cloud Functions (Serverless)
- ✓Firebase Hosting (Static site hosting)
Development Tools
- ✓Turbopack (Next.js fast bundler)
- ✓ESLint + Prettier (Code quality)
- ✓Vercel Deployment (Global CDN)
- ✓GitHub Actions CI/CD
- ✓Vercel Analytics + Speed Insights
- ✓Jest + React Testing Library
Data Architecture & Models
User Data Structure
interface UserProfile {
uid: string;
email: string;
displayName: string;
level: 'beginner' | 'intermediate' | 'advanced';
totalStudyTime: number;
streakCount: number;
lastActiveAt: Date;
preferences: UserPreferences;
achievements: Achievement[];
}Learning Content Structure
interface Module {
id: string;
title: string;
description: string;
icon: string;
color: string;
lessons: Lesson[];
prerequisites?: string[];
estimatedTime: number;
}Learning Modules
Foundations
Grammar
Vocabulary
Conversations
Culture
Pronunciation
Immigration
TEF Prep
Key Features & Innovation
Immigration-Focused Content
All learning materials are specifically aligned with Canadian Language Benchmarks (CLB) and Express Entry requirements.
• CLB-aligned curriculum
• Express Entry preparation
• Real-world scenarios
High-Performance Architecture
60% bundle size reduction, <2s load times on 3G networks, and 95+ Lighthouse scores.
• Next.js 15 optimization
• Code splitting
• Advanced caching
Real-Time Progress Tracking
Live synchronization of user progress across devices with comprehensive analytics dashboard.
• Firebase Realtime Database
• Cross-device sync
• Admin analytics
Universal Accessibility
WCAG 2.1 AA compliant design with full keyboard navigation and screen reader support.
• Screen reader support
• Keyboard navigation
• High contrast ratios
Gamified Learning System
XP points, achievement badges, learning streaks, and level progression to maintain engagement.
• XP and level system
• Achievement badges
• Learning streaks
Interactive Audio Learning
Click-to-hear pronunciation for all French content with native speaker audio.
• Native speaker audio
• Pronunciation practice
• Interactive exercises
Advanced Features
Learning Management System
• Progressive learning path from beginner to advanced
• Interactive content with click-to-hear pronunciation
• Real-time progress tracking and analytics
• Adaptive learning content based on performance
Admin Dashboard & Analytics
• User management and content administration
• Real-time analytics and user engagement metrics
• System monitoring and performance tracking
• Data storage management and backup systems
Performance & Results
95+
Lighthouse SEO Score
60%
Bundle Size Reduction
<2s
Load Time (3G)
99.9%
Uptime
70%+
Lesson Completion
41
Dynamic Pages
The platform demonstrates exceptional technical performance across all key metrics. Through careful optimization of the Next.js bundle, implementation of advanced caching strategies, and use of modern web technologies, we achieved industry-leading performance scores.
User engagement metrics show strong adoption with high lesson completion rates and low bounce rates. The combination of gamification elements and relevant content keeps users engaged throughout their learning journey.
Business Impact & Results
User Engagement
• High retention: Users return for daily learning
• Long sessions: Average > 15 minutes
• Low bounce rate: < 30%
• High completion: > 70% lesson completion
Technical Performance
• Fast loading: < 2 seconds on 3G
• High availability: 99.9% uptime
• SEO success: 95+ Lighthouse scores
• Accessibility: WCAG 2.1 AA compliant
Educational Impact
• Structured learning: Clear progression path
• Real-world application: Practical content
• Cultural integration: French-Canadian context
• Immigration focus: Direct relevance to goals
Français Pro successfully addresses the critical need for accessible, high-quality French education in the Canadian immigration context. By providing a completely free platform with enterprise-level features, we've removed significant barriers that prevented many applicants from pursuing French language learning.
Future Development Roadmap
Phase 2 - Enhanced Learning (Q1 2025)
- • AI-powered pronunciation feedback
- • Smart recommendations system
- • Advanced spaced repetition
- • Mobile app development
Phase 3 - Community Features (Q2 2025)
- • Study groups and peer learning
- • Teacher dashboard tools
- • Community forums
- • Mentorship programs
Key Technical Innovations
Real-time Data Synchronization
Firebase Realtime Database with custom hooks and context providers for live progress updates across devices.
Performance Optimization
Next.js 15 Server Components, automatic code splitting, and advanced caching strategies for optimal performance.
See how modern web technologies create exceptional learning experiences
Blog and articlesNotes from client work and side projects: architecture decisions, tooling and what shipped.
- Read more
Read moreReal-Time Bidding Architecture: Lessons from AlphaAuctions
Server-authoritative bids, countdown clock sync, optimistic UI and reconnection: the architecture behind real-time bidding with Socket.io and PostgreSQL.
6 min read
Read moreBuilding Dev Tools: 59 Free Browser Tools, No Backend
Why I built 59 free developer and design tools that run entirely in the browser, how one data file drives them, and what I'd change.
6 min read