pro
Muhammad Shoukat
Framer, Webflow & Kajabi Developer and Figma Designer,Top 1%
Coletix Learning Hub — AI-Powered Certification Training & Exam Preparation Platform
Coletix Learning Hub is a premium certification-learning ecosystem designed to combine the structured course and academy experience of Kajabi with a custom-built AI-powered learning environment.
The project was designed for students and professionals preparing for technical certifications such as AWS SAA-C03 and Microsoft Azure AI-102. Instead of functioning as a conventional course website, the platform connects learning, practice, assessment, AI assistance, analytics, weak-area detection, and exam readiness into one continuous learning journey.
The Core Learning Experience
The platform follows a complete learning lifecycle:
Choose a certification → Learn → Ask AI → Practice → Test → Analyze → Identify Weak Areas → Improve → Retest → Measure Readiness → Prepare for the Exam
This approach turns a traditional online course into a more interactive and measurable learning product.
Kajabi-Based Academy Ecosystem
Kajabi is positioned as the core academy and course ecosystem, providing the foundation for presenting courses, learning programs, offers, and the broader creator/education experience.
The custom learning environment extends that ecosystem with specialized functionality for certification preparation, allowing the product to go beyond a standard course-library experience.
The result is an education ecosystem that combines course delivery, student engagement, structured learning, AI assistance, assessment, and certification-readiness workflows rather than relying on a generic LMS template.
AI-Powered Learning
A central feature is the AI Tutor, designed around the learner's course context rather than functioning as a generic chatbot.
Students can use AI assistance to:
Ask questions about course concepts
Request explanations
Explore difficult technical topics
Receive contextual learning assistance
Generate study guidance
Interact with learning material while studying
Get personalized next-step recommendations
The platform also incorporates a RAG-oriented architecture using PostgreSQL/pgvector and OpenRouter, creating a foundation for source-grounded AI responses based on learning materials and knowledge sources.
Adaptive Testing & Exam Preparation
The assessment system is one of the project's major differentiators.
Instead of simply giving students a final quiz, the platform continuously analyzes learning and testing activity.
The adaptive workflow is:
Test → Analyze Performance → Detect Weak Topic → Generate Targeted Practice → Retest → Measure Improvement
The system supports:
Topic quizzes
Daily tests
Weekly tests
Monthly mock exams
Full exam simulation
Question banks
Scenario-based questions
Multi-select questions
Difficulty-based assessment
Performance analysis
Adaptive practice
Weak-area detection
Weak-Area Detection
Rather than showing only an overall score such as 70%, the platform helps identify the specific concepts where a learner is struggling.
Students can see topic-level weaknesses and use that information to determine where additional study and practice are required.
This creates a much more actionable learning experience than simply displaying quiz scores.
Exam Readiness & Progress Analytics
The learner dashboard provides a centralized view of preparation, including:
Exam Readiness
Course progress
Average score
Study streak
Study activity
Test performance
Weak areas
Learning progress
AI study recommendations
The Exam Readiness Score provides a higher-level indicator based on learning and assessment activity, helping students understand how prepared they are rather than relying on isolated test results.
Structured Learning & Study Room
Courses are organized into a structured hierarchy:
Course → Chapters → Lessons → Steps
The Study Room brings learning content, progress, AI assistance, quizzes, and learning actions into one workspace.
The platform also includes Step Learning, allowing individual learning steps to be tracked separately and giving students a clearer understanding of their progress through a lesson.
Practical & Interactive Learning
The platform extends beyond passive video/course consumption through dedicated learning experiences such as:
Training Mode
Practical Labs
Written Practice
Voice Tutor
AI-assisted study
Step-based learning
Inline assessment
Practice and retesting
This creates a more complete learning environment for technical certification preparation.
Voice & Multilingual Learning
The platform includes a Voice Tutor foundation for conversational and hands-free learning experiences.
It also supports multilingual learning workflows, with the product designed around 12+ language support, including interfaces demonstrating languages such as Roman Urdu.
Curriculum & Course Management
Behind the student experience is a structured content-management architecture including:
Curriculum Factory
Course Factory
Source Packs
Source Discovery
Verified Sources
Content Quality
Global Courses
Question Bank
Question Quality management
These systems allow educational content and certification programs to be structured, reviewed, and expanded without treating every course as a hard-coded page.
Certificates & Readiness
The platform includes a certificate-readiness workflow based on learning and assessment criteria such as:
Lesson completion
Step completion
Checkpoint completion
Mock-exam performance
Integrity agreement
The system distinguishes Learning Hub completion from official third-party certification, which is important for certification-preparation products.
Custom Technology & Engineering
The advanced learning experience is supported by a custom full-stack architecture using:
Next.js + React + TypeScript
Python + FastAPI
PostgreSQL + pgvector
OpenRouter + RAG
JWT + RBAC
Docker + Docker Compose
Nginx + Linux VPS
The architecture separates the frontend, API/application services, database, AI capabilities, learning engines, assessment systems, and infrastructure.
Role-Based Platform
The platform also includes role-based access and administrative functionality for managing:
Users
Courses
AI usage
Knowledge sources
Questions
Curriculum
Content quality
Testing
Certificates
Platform configuration
System status
JWT authentication and RBAC provide the underlying authorization structure.
Production Deployment
The platform was deployed as a production application at learninghub.coletix.pro (http://learninghub.coletix.pro), using Docker, Docker Compose, Nginx, FastAPI, PostgreSQL, and supporting AI services on Linux infrastructure.
0
18
Elevate Academy
Full Kajabi-connected online academy ecosystem
Project overview
Elevate Academy is a complete online learning and academy operating system — marketing site, student studio, teacher portal, and headmaster command center — designed and engineered as a production-ready product experience that connects to the Kajabi platform and ships as a fully working ecosystem.
The vision
Not a single landing page — a full academy brand. Elevate Academy unifies learner journeys, faculty workflows, and leadership control into one premium product language, ready for Kajabi-connected businesses that need more than a course catalog.
Kajabi-connected capabilities
Built to operate as a Kajabi-aligned academy layer with memberships, offers, learning access, and commerce flows that feel native to creator-education businesses.
Course catalog, programs, memberships & pricing surfaces
Enrollment, checkout, coupons, and advance card/PayPal payment demo
Certificates, community, announcements, and learner progress
Teacher publishing with headmaster approval gates
Role-based portals mapped to real academy operations
Student Studio
A polished learner command center for buying, learning, and staying engaged.
Enrolled / Active / Completed course grids with progress & certificates
Live class invites (accept → enter Zoom-style classroom)
Assignments with coach tips, quiz attempts, wishlist & cart
Support chat with teachers and headmaster
Plans, orders, reviews, profile & notifications
Teacher Studio
Faculty tools to teach, monetize, and coach without leaving the platform.
My courses, add course (headmaster review), announcements
Students, progress tracking, course orders & reviews
Assignments desk with Today / Yesterday / Last week work packs
Live class requests, messages, blog posts & roles
Headmaster Command
Leadership-grade control for people, curriculum quality, and academy health.
Approve / decline students, teachers, and teacher-submitted courses
Assign roles, match students by skills, issue certificates
Edit courses, classrooms, programs, membership, pricing & pages
Shop, orders, community, blog, support chat & notifications
Tools & stack
Engineered with a modern product stack for speed, polish, and maintainability.
Next.js App Router · React · TypeScript
Tailwind CSS design system · Framer Motion
Role-based dashboards · shared support & notification systems
Kajabi-oriented commerce, membership, and learning UX patterns
Project gallery
Selected screens from the live product experience.
2
3
144
CRM & Business Management Dashboard UI/UX — Webflow, React.js & Tailwind CSS
A modern, polished CRM and business management dashboard designed to give teams a clear overview of financial activity, customer operations, tasks, transactions, and business performance from a single workspace.
The interface uses a clean, professional SaaS aesthetic with soft neutral backgrounds, white cards, subtle borders, green accent states, and a structured grid layout. The dashboard features a comprehensive top navigation and sidebar system for accessing Overview, Activity, Manage, Programs, Accounts, and Reports.
The main overview includes key business metrics such as Total Balance, Total Earnings, Total Spending, Total Income, Total Revenue, monthly spending limits, wallet balances, and recent activities. Interactive-style financial charts and visual KPI cards make important information easy to scan.
The Recent Activities section provides a structured data table with order IDs, activity types, prices, statuses, dates, search, filtering, and row actions. A dedicated My Cards section displays active cards and account information in a visually polished format.
The UI was designed with scalable SaaS patterns and reusable components, focusing on responsive behavior, clear information hierarchy, accessibility, and efficient workflows.
Tools Used: Webflow, React.js, Tailwind CSS, UI/UX Design, Responsive Web Design, SaaS Dashboard Design, Design Systems.
Key Features: CRM dashboard, business analytics, KPI cards, financial overview, wallet management, income and revenue tracking, spending limits, transaction/activity tables, search and filtering, card management, responsive navigation, reusable components, responsive layouts, and modern SaaS UX.
Keywords: Webflow, React.js, Tailwind CSS, CRM Dashboard, CRM UI/UX, SaaS Dashboard Design, Business Dashboard, Admin Dashboard, Financial Dashboard, React Dashboard, Webflow Designer, React Developer, Tailwind CSS Developer, Responsive Dashboard, UI/UX Design, B2B SaaS Design.
0
93
Finance & Personal Money Management App UI/UX — Figma, Webflow & Framer
A premium personal finance and money management mobile app UI/UX concept designed to make financial tracking, income monitoring, card management, and bill sharing simple and visually engaging.
The interface combines a sophisticated dark-and-green visual language with clean white surfaces, creating a modern fintech experience. The concept includes a personalized financial dashboard with total balance, active account information, card management, earning dynamics, financial news, income tracking, spending insights, and performance analytics.
A dedicated Split the Bill flow allows users to select friends, divide expenses, share receipts, set percentages, and manage shared payments. The finance dashboard also includes interactive charts, income trends, monthly/quarterly comparisons, transaction insights, and financial goals.
The UI/UX was designed in Figma, focusing on strong visual hierarchy, reusable components, responsive layouts, intuitive navigation, and polished fintech interactions. The design was structured for adaptation and implementation using Webflow and Framer, with scalable sections and component-based design patterns.
Tools Used: Figma, Webflow, Framer, UI/UX Design, Fintech App Design, Mobile UI Design, Responsive Design, Design Systems, Interactive Prototyping.
Key Features: Personal finance dashboard, total balance tracking, card management, income tracker, financial analytics, earning charts, spending insights, bill splitting, friend selection, receipt sharing, percentage-based bill distribution, financial news, transaction insights, performance metrics, responsive UI, reusable components, and modern fintech UX.
Keywords: Figma, Webflow, Framer, Figma UI/UX Designer, Webflow Designer, Framer Designer, Finance App UI, Fintech UI/UX, Personal Finance App, Banking App Design, Financial Dashboard, Mobile App UI Design, Responsive UI, Figma Web Design, Webflow Development, Framer Website Design.
0
99