Back to Projects
In developmentNext.jsReactSupabaseTypeScriptTailwind CSSRedux ToolkitGSAPKaTeXOpenAI API2026
ICFES Master
Interactive platform to practice questions and learn topics for Colombia’s ICFES state exam (Saber 11). Feature-Based and Atomic Design architecture with Next.js 15, React 19, Tailwind CSS, and Supabase. Three learning levels (foundations, per-subject exams, full 200-question 3-hour mock), practice by area (Math, Language, Natural Sciences, Social Sciences, English), study materials, configurable timer, statistics, daily challenges and leaderboard, email and Google auth, 40+ achievement gamification, subscription tiers (Free, Pro, Premium, Annual), feedback with explanations, multimedia (images, tables, KaTeX formulas), and OpenAI API integration. Some content and achievement logic are still evolving.
What I learned
- Structuring a large product with feature-based folders plus Atomic Design to scale UI and domain
- Supabase for auth (email/password, Google) and a service layer on top of the database
- Redux Toolkit for global state in Next.js while keeping boundaries per feature
- Rich learning content: Markdown, KaTeX math, and multimedia in one rendering pipeline
- UI motion with GSAP and controlled coupling with React
- OpenAI API integration while scoping the product (ICFES vs. a generic “every country” exam tool)
Technical Details
- •Next.js 15 (App Router), React 19, TypeScript
- •Tailwind CSS 4, clsx, tailwind-merge for conditional classes
- •Supabase JS client for auth and data access
- •@reduxjs/toolkit and react-redux
- •GSAP and @gsap/react for animations
- •react-markdown; KaTeX and react-katex for math
- •openai SDK for AI-backed features