All projects
E-Learning Platform
2025-2026 Actively maintained

FunnyCode Learning Platform

A Vietnamese e-learning platform that helps learners build programming skills through structured courses, practical lessons, and an AI-assisted learning roadmap.

Live demo

Course detail and learning content organized into lessons and sections.

Quick Highlights

Lighthouse audit
95 / 95 / 100 / 100

Performance / Accessibility / Best Practices / SEO.

Visitors / page views · 7 days
~400 · ~2.8K

Recent owner-provided production traffic snapshot.

Edge requests · 7 days
~56K

Recent owner-provided production traffic snapshot.

Project overview

FunnyCode is an online learning platform for programming that helps learners move from course discovery to structured study and practical application in one responsive web experience.

The product brings together searchable courses, detailed lesson delivery, video and document-based materials, account access, purchase flows, learner progress, and an AI-assisted roadmap workflow.

Its feature-oriented frontend supports a broad learning product with server-rendered content, cached client data, rich educational content, and realtime platform integrations.

A recent owner-provided seven-day production snapshot recorded approximately 400 visitors, 2.8K page views, and 56K edge requests. These figures describe traffic, not performance benchmarks.

Objectives

  1. 01

    Make programming learning structured

    Give learners a clear path from discovering a course to working through organized lessons and practical materials.

  2. 02

    Support different learning formats

    Combine video, documents, slides, rich text, and exercises inside a consistent course experience.

  3. 03

    Personalize the learning journey

    Use learner context and existing skills to generate a more relevant AI-assisted roadmap.

  4. 04

    Connect learning with product workflows

    Make authentication, course access, purchasing, progress, and achievements work together across the platform.

Key features

Course discovery and purchase

Browse courses with search, categories, ratings, pricing, cart, orders, packages, and promotions.

Multi-format learning content

Deliver structured courses containing video lessons, documents, slides, and practical exercises.

AI-assisted learning roadmap

Generate a personalized learning path from a learner’s study context, target field, and existing skills.

Authentication and account access

Support JWT-based sessions, device tracking, Google sign-in, and account-specific learning access.

Rich educational content

Support rich text and code-oriented learning content through an editor and lesson content system.

Progress and achievements

Organize learner progress around owned courses, points, certificates, and achievement-oriented experiences.

Challenges and decisions

Representing complex course structures

Challenge

A single course can contain multiple parts and different lesson types, while learners still need a simple and predictable way to navigate the content.

Decision

Organized course and lesson data into reusable domain structures and presented video, document, and slide lessons through a consistent learning surface.

Keeping account, access, and commerce in sync

Challenge

Authentication, owned courses, cart activity, and orders all depend on the same user context across a large set of routes.

Decision

Combined centralized authentication state with cached server data and shared API handling so feature modules could respond consistently to session changes.

Keeping content-heavy pages responsive

Challenge

Course discovery and learning pages combine dynamic data, rich media, video content, and long lesson structures.

Decision

Used server-rendered content, focused client-side data fetching, bundle optimization, and responsive image delivery to keep the experience fast and usable.

My contribution

  • Owned the frontend-wide refactor across the product feature modules, moving the codebase from Next.js 14 to Next.js 16 with PPR.
  • Consolidated a mixed UI library setup into a consistent shadcn/ui and Tailwind CSS 4 system.
  • Reworked SSR and rendering boundaries to improve the delivery of content-heavy learning pages.
  • Reduced unnecessary client-side JavaScript and improved image loading and optimization across key routes.
  • Refined the core course, authentication, roadmap, and commerce experiences while keeping the product ready for continued feature development.

luongductrong2004@gmail.com

© 2026 Made with ❤️ by Duc Trong Luong