{"id":150588,"date":"2026-03-05T11:25:29","date_gmt":"2026-03-05T11:25:29","guid":{"rendered":"https:\/\/devsdata.com\/?post_type=case_study&#038;p=150588"},"modified":"2026-04-03T08:14:18","modified_gmt":"2026-04-03T08:14:18","slug":"e-learning-platform-with-everything-in-one-place","status":"publish","type":"case_study","link":"https:\/\/devsdata.com\/de\/case-studies\/e-learning-platform-with-everything-in-one-place\/","title":{"rendered":"SkillToon &#8211; eLearning platform development for SF startup"},"content":{"rendered":"<section>\n<h1>SkillToon &#8211; eLearning platform development for SF startup<\/h1>\n\n    <style>`\n        .post-info {\n            display: flex;\n            flex-direction: row;\n            font-family: Montserrat;\n            font-style: normal;\n            font-weight: 500;\n            font-size: 16px;\n            line-height: 150%;\n            letter-spacing: 0.02em;\n            color: #6D7082;\n            \/*padding-top:32px;*\/\n        }\n\n        .info-container .post-info {\n            display: flex;\n            flex-direction: column;\n            justify-content: space-between;\n        }\n\n        .post-info-main {\n            width: 100%;\n            display: flex;\n            flex-wrap: wrap;\n            row-gap: 5px;\n            column-gap: 20px;\n            grid-template-rows: repeat(3, auto);\n            grid-template-columns: 60px max-content auto;\n            margin-bottom:12px;\n        }\n\n        .with-reviewer {\n            flex-wrap: wrap;\n            row-gap: 5px;\n        }\n\n        .author-name {\n            margin-bottom:4px;\n            grid-row-start: 2;\n            text-decoration: underline;\n            color:black !important;\n        }\n\n        .rank-math-breadcrumb {\n            margin-top:20px;\n            position: relative;\n            z-index: 1;\n        }\n\n        .rank-math-breadcrumb p {\n            margin: 0;\n            white-space: nowrap; \n            overflow: hidden;\n            text-overflow: ellipsis;\n            gap: 8px;\n            display: flex;\n        }\n\n        .rank-math-breadcrumb a {\n            color: #6d7082;\n        }\n\n        .rank-math-breadcrumb a:hover {\n            text-decoration: underline;\n            color: #0332c9;\n        }\n\n        .author-avatar {\n            display: flex;\n            justify-content: center;\n            margin-right: 15px;\n            width: fit-content;\n            grid-row-start: span 2;\n            grid-row-end: 4;\n        }\n\n        .author-avatar picture {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n        }\n\n        .author-avatar.clicked {\n            transform: scale(1.1);\n        }\n\n        .post-info .author-avatar img {\n            min-width:44px;\n            height: 44px;\n            width: auto;\n            object-fit: cover;\n            aspect-ratio: 1\/1;\n            filter: grayscale(1);\n            border-radius: 100%;\n            position: relative;\n            top: 2px;\n        }\n\n        .post-info .author_socials {\n            display: flex;\n            flex-direction: row;\n            align-items: center;\n            grid-row-start: 3;\n            grid-column: span 2;\n            gap: 15px;\n            list-style-type: none;\n            padding: 0;\n            margin: 0;\n        }\n\n        .post-info .author_socials li a {\n            display: flex;\n            align-item: center;\n            text-decoration: none;\n        }\n\n        .author_socials a svg {\n            width: 16px;\n            height: 16px;\n            transition: 0.3s;\n            color: #000;\n        }\n      \n        .author_socials li:hover svg {\n            color: #0332c9;\n        }\n\n        .right-info a {\n            width: fit-content;\n            color: unset;\n        }\n\n        .right-info a:hover {\n            text-decoration: underline;\n        }\n\n        .post-info .clock {\n            position: relative;\n            padding-right: 5px;\n            top: 2px;\n        }\n\n        .post-info .arrow {\n            position: relative;\n            margin-left: 10px;\n            margin-right: 10px;\n            transition: .2s;\n            height: 6px;\n            bottom: 1px;\n        }\n        .post-info .post-info-separator {\n            padding-right: 3px;\n            padding-left: 3px;\n        }\n\n        .reviewer-info {\n            display: flex;\n            flex-direction:column;\n            justify-content: center;\n            align-items: flex-start;\n            grid-row-start: 2;\n            align-self: start;\n            justify-self: end;\n            font-family: \"Montserrat\", arial;\n            color: #000;\n        }\n\n        .reviewer-info.the_first_row {\n            justify-self: start;\n            grid-row-start: 1;\n            grid-column: span 3;\n        }\n\n        .meta-checkmark {\n            width: 20px;\n            height: auto;\n        }\n\n        .reviewer-info a {\n            margin-left: 0;\n            color: #000;\n            text-decoration: underline;\n        }\n        .reviewer-info a:hover {\n            color: #0332c9;\n        }\n        .reviewer-info a:visited {\n            color: #551a8b;\n        }\n        .reviewer-info a:active {\n            color: #0332c9;\n        }\n        .language-dropdown-container {\n            display: inline-block;\n            width: 200px;\n        }\n\n        .language_switcher {\n            display: inline-flex;\n            align-items: center;\n            flex-direction: row;\n            gap: 5px;\n            vertical-align: middle;\n        }\n        \n        .language_switcher .wpml-ls-legacy-dropdown {\n            width: auto;\n            position: relative;\n            vertical-align: middle;\n        }\n\n        .language_switcher .wpml-ls-legacy-dropdown ul {\n            list-style: none;\n            padding: 0;\n            margin: 0;\n        }\n\n        .language_switcher .wpml-ls-legacy-dropdown .wpml-ls-current-language {\n            position: relative;\n            margin-bottom:0;\n        }\n\n        .language_switcher .wpml-ls-legacy-dropdown .wpml-ls-current-language > a {\n            padding-left:16px !important;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            width: 100%;\n            box-sizing: border-box;\n        }\n\n        .language_switcher .wpml-ls-legacy-dropdown .wpml-ls-sub-menu {\n            display: none;\n            position: absolute;\n            z-index: 10;\n            top: 100%;\n            left: 0;\n            width: 100%;\n            margin: 0;\n            background-color: rgb(238, 238, 238);\n            border-radius: 0 0 8px 8px;\n            overflow: hidden;\n        }\n\n        .language_switcher .wpml-ls-legacy-dropdown .wpml-ls-sub-menu li {\n            display: block;\n            width: 100%;\n            margin-bottom:0;\n        }\n\n        .language_switcher .wpml-ls-legacy-dropdown .wpml-ls-sub-menu li:hover {\n            background-color:rgba(204, 204, 211) !important\n        }\n\n        .language_switcher .wpml-ls-legacy-dropdown .wpml-ls-sub-menu a {\n            display: block;\n            width: 100%;\n            padding: 8px 15px 8px 16px;\n            margin-left: 0;\n            box-sizing: border-box;\n            white-space: nowrap;\n            text-align: left;\n        }\n\n        @media (hover: hover) {\n            .language_switcher .wpml-ls-legacy-dropdown .wpml-ls-current-language:hover > .wpml-ls-sub-menu {\n                display: block;\n            }\n        }\n\n        .language_switcher .wpml-ls-legacy-dropdown .wpml-ls-current-language.wpml-dropdown-open > .wpml-ls-sub-menu {\n            display: block;\n        }\n\n        .language_switcher .wpml-ls-legacy-dropdown .wpml-ls-current-language.wpml-dropdown-open > a.wpml-ls-item-toggle:after {\n            transform: scale(.7) rotate(180deg);\n        }\n\n        .language_switcher .wpml-ls-legacy-dropdown .wpml-ls-current-language.wpml-dropdown-open > .wpml-ls-item-toggle {\n            border-radius: 8px 8px 0 0;\n            background-color: rgba(204, 204, 211);\n        }\n\n        .wpml-ls-legacy-dropdown a:focus {\n            background-color: #FFFFFF;\n        }\n\n        .language_switcher .wpml-ls-legacy-dropdown a:visited {\n            color: #000000 !important;\n        }\n\n        .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle:after {\n            content: \"\";\n            display: inline-block;\n            transform: scale(.7);\n            height: 20px;\n            width: 20px;\n            background: url(\"\/wp-content\/uploads\/2020\/07\/Vector.png\");\n            margin-left: 5px;\n            background-repeat: no-repeat;\n            background-position: center center;\n            background-size: 10px;\n            border: none;\n            position: unset;\n            background-color: #eee;\n            border-radius: 50%;\n            padding: 10px;\n            transition: transform 0.2s ease-in-out;\n            vertical-align: middle;\n            flex-shrink: 0;\n        }\n\n        .language_switcher a {\n            border: none;\n            padding: 10px 15px;\n        }\n\n        .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle {\n            padding: 0 5px 0 2px !important;\n        }\n\n        @media (hover: hover) {\n            .wpml-ls-sub-menu a.wpml-ls-link:hover,\n            .language_switcher .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle:hover {\n                background-color: rgba(204, 204, 211);\n                color: #000000 !important;\n                text-decoration: none;\n            }\n        }\n\n        .wpml-ls-sub-menu {\n            border: none !important;\n            background-color: transparent;\n        }\n\n        .wpml-ls-sub-menu a {\n            background-color: #FFFFFF;\n        }\n\n        .wpml-ls-current-language .wpml-ls-item-toggle {\n            border-radius: 8px;\n        }\n\n        @media (hover: hover) {\n            .wpml-ls-current-language:hover .wpml-ls-sub-menu a {\n                background-color: rgb(238, 238, 238) !important;\n            }\n\n            .wpml-ls-current-language .wpml-ls-sub-menu a:hover,\n            a.wpml-ls-item-toggle:hover:after {\n                background-color: rgba(204, 204, 211) !important;\n            }\n\n            .wpml-ls-current-language:hover a.wpml-ls-item-toggle:after {\n                transform: scale(.7) rotate(180deg);\n            }\n\n            .wpml-ls-current-language:hover .language_switcher .wpml-ls-legacy-dropdown a {\n                background-color: rgba(109, 112, 130, 0.1);\n            }\n\n            .wpml-ls-current-language:hover .wpml-ls-item-toggle{\n                border-radius: 8px 8px 0 0;\n            }\n\n            .wpml-ls-current-language:hover .wpml-ls-item:last-child .wpml-ls-link{\n                border-radius: 0 0 8px 8px;\n            }\n        }\n\n        .wpml-ls-current-language.wpml-dropdown-open .wpml-ls-sub-menu a {\n            background-color: rgb(238, 238, 238) !important;\n        }\n\n        .wpml-ls-current-language.wpml-dropdown-open .wpml-ls-item:last-child .wpml-ls-link{\n            border-radius: 0 0 8px 8px;\n        }\n\n        ul.language-list {\n            \/*min-height: 71px;*\/\n            margin: 0;\n            overflow: hidden;\n            position: absolute;\n            display: inline-block;\n            list-style: none;\n            vertical-align: top;\n            background-color: #FFFFFF;\n            padding: 0;\n            z-index: 2;\n        }\n\n        ul.language-list.mobile {\n            border-radius: 10px;\n            border: 1px solid rgba(109, 112, 130, 0.1);\n            margin-left: 10px;\n        }\n\n        .language-list.mobile li:hover {\n            background-color: rgba(109, 112, 130, 0.1)\n        }\n\n        .language-list.mobile li:hover a {\n            color: #000000;\n        }\n\n        .dropdown-arrow {\n            display: inline-block;\n            border-radius: 50%;\n            height: 30px;\n            width: 30px;\n        }\n\n        .dropdown-arrow {\n            background-color: rgba(109, 112, 130, 0.1);\n        }\n\n        .dropdown-arrow:hover {\n            background-color: rgba(109, 112, 130, 0.3);\n        }\n\n        .dropdown-arrow.mobile,\n        .dropdown-arrow.mobile:hover {\n            background-color: unset;\n        }\n\n        .language-list li {\n            padding-left: 10px;\n            cursor: pointer;\n            display: none;\n        }\n\n        .language-list li a {\n            color: #6D7082;\n            text-decoration: none;\n        }\n\n        .language-list li:first-child {\n            display: block;\n        }\n\n        .active li {\n            display: block;\n        }\n\n        .rotated {\n            transform: rotate(180deg);\n            bottom: 2px !important;\n        }\n        .bookmark {\n            align-self: center;\n            cursor:pointer;\n            display:none;\n        }\n        \n        .article h1 + p,\n        .article h1 + p + p {\n            margin: 0;\n            margin-bottom: 0 !important;\n        }\n\n        .info-container{\n            \/*min-height:150px;*\/\n            direction: ltr;\n            display: flex;\n            flex-direction: column;\n            justify-content: space-between;\n            padding-top: 20px;\n        }\n        .tags{\n            font-family: \"Montserrat\", sans-serif;\n            display: flex;\n            flex-direction: row;\n            justify-content: flex-start;\n            flex-wrap: wrap;\n            width: 100%;\n            overflow: hidden;\n            font-size: 14px;\n            border-radius: unset;\n            margin-bottom:20px;\n        }\n        .tags a {\n            font-style: normal;\n            line-height: 1.75em;\n            border: 0.5px solid #e2e5e9;\n            margin-right: 7px;\n            margin-top: 7px;\n            transition: 0.2s;\n            transition-property: background;\n            border-radius: 5px;\n            padding: 0.2em 0.8em;\n            color: black;\n        }\n        .tags a:hover {\n            background-color: #c1c7d0;\n        }\n\n        .tags a:visited {\n            color: #000;\n        }\n        .tags a:active {\n            color: #000;\n        }\n        .default-a:focus {\n            background-color: unset;\n        }\n\n        .default-a:hover{\n            text-decoration: underline;\n        }\n        .separator {\n        color:black !important;\n        font-weight:600;\n        }\n        .last {\n        color:black !important;\n        font-weight:600;\n        }\n        @media screen and (max-width:1034px) {\n        .author_links {\n        margin-right:auto;\n        }\n        .reviewer-info {\n        width: 100%;\n        }\n        }\n        @media screen and (max-width:767px) {\n        .language_switcher {\n        display: flex;\n        margin-top: 5px;\n        }\n        }\n        @media screen and (max-width:490px) {\n        .review-lowres {\n        display:flex !important;\n        }\n        .review-highres {\n        display:none !important;\n        }\n        .author_links {\n        margin-right:36px !important;\n        } \n        }\n    <\/style>\n    <div><nav aria-label=\"breadcrumbs\" class=\"rank-math-breadcrumb\"><p><span class=\"last\">Home<\/span><\/p><\/nav><\/div>\n    \n    <div class=\"info-container\">\n    <div class=\"post-info with-reviewer\">\n        <div class=\"post-info-main\">\n            <div class=\"author-avatar\">\n                <picture>\n                        <source\n                            srcset=\"https:\/\/devsdata.com\/wp-content\/uploads\/2024\/10\/nikoloz-khotcholava-min.webp\" type=image\/webp> \n                        <source \n                            srcset=\"https:\/\/devsdata.com\/wp-content\/uploads\/2024\/10\/nikoloz-khotcholava-min.jpg\" type=\"image\/jpeg\">\n                        <img decoding=\"async\" \n                            class=\"avatar lazyload\"\n                            width=\"64\" \n                            height=\"64\"\n                            src=\"https:\/\/devsdata.com\/wp-content\/uploads\/2024\/10\/nikoloz-khotcholava-min.jpg\"\n                            alt=\"avatar\"\n                            loading=\"lazy\"\n                            title=\"Nikoloz Khotcholava\"\n                        >\n                <\/picture>\n            <\/div>\n            <div style=\"display:flex; flex-direction:column;margin-right:auto;\" class=\"author_links\">\n            <a href=\"\/author\/nikoloz-khotcholava\/\" class=\"author-name\">Nikoloz Khotcholava<\/a>\n            <ul class=\"author_socials\">\n            <li>\n                <a href=\"https:\/\/www.linkedin.com\/in\/nikoloz-khotcholava\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" aria-label=\"Nikoloz Khotcholava on Linkedin\">\n                    <svg version=\"1.0\" fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 448 512\" aria-hidden=\"true\">\n                            <g id=\"linkedin5_layer\">\n                                <path d=\"M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z\" data-hs-event-238572417=\"1\"><\/path>\n                            <\/g>\n                        <\/svg>\n                <\/a>\n            <\/li>\n            <li>\n                <a href=\"https:\/\/twitter.com\/Nikakhotcholava?s=21&#038;t=AwFIbg9ghHf56q6Z6iQ9NQ\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" aria-label=\"Nikoloz Khotcholava on Twitter\">\n                    <svg viewBox=\"0 0 512 512\" class=\"scriptlesssocialsharing__icon twitter\" fill=\"currentColor\" height=\"1em\" width=\"1em\" aria-hidden=\"true\" focusable=\"false\" role=\"img\">\n                            <path d=\"M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z\"><\/path>\n                        <\/svg>\n                <\/a>\n            <\/li><\/ul>\n            <\/div>\n            <div class=\"reviewer-info\"> \n                                                                            <span style=\"color:#6D7082;\" class=\"\">\n                Last updated on \n                5. M\u00e4rz 2026 \n                <span class=\"post-info-separator\">| <\/span> \n                9 min read\n                \n            <\/span>\n                            <\/div>\n        \n        <\/div>\n    <\/div>\n    <div class=\"bookmark\">\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2020\/08\/bookmark-add-2-1.svg\" alt=\"bookmark\" title=\"\">\n    <\/div>\n    <div class=\"tags\"><\/div>\n    <\/div>\n    <script type=\"module\" defer>\n      document.addEventListener(\"DOMContentLoaded\", function () {\n    \/\/ Get the current path from the URL\n    const path = window.location.pathname;\n\n    \/\/ Check if it starts with \/case-studies\n        if (path.startsWith(\"\/case-studies\")) {\n        const tagsElement = document.querySelector(\".tags\");\n        if (tagsElement) {\n        tagsElement.style.marginBottom = \"0\";\n        }\n        }\n        });\n        Array.from(document.getElementsByClassName(\"separator\")).forEach(el => {\n            el.textContent = \" > \";\n        });\n\n            var wpmlToggle = document.querySelector(\".language_switcher .wpml-ls-item-toggle\");\n            if (wpmlToggle) {\n                wpmlToggle.addEventListener(\"click\", function(e) {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    var currentLang = this.closest(\".wpml-ls-current-language\");\n                    if (currentLang) {\n                        currentLang.classList.toggle(\"wpml-dropdown-open\");\n                    }\n                });\n                document.addEventListener(\"click\", function(e) {\n                    var openDropdown = document.querySelector(\".wpml-ls-current-language.wpml-dropdown-open\");\n                    if (openDropdown && !openDropdown.contains(e.target)) {\n                        openDropdown.classList.remove(\"wpml-dropdown-open\");\n                    }\n                });\n            }\n\n            var languageList = document.querySelector(\"#language-list\");\n            var dropdownArrow = document.querySelector(\".dropdown-arrow\");\n\n            if(languageList){\n                languageList.addEventListener(\"click\", () => {\n                    languageList.classList.toggle(\"active\");\n                    document.querySelector(\"#arrow\").classList.toggle(\"rotated\");\n                })\n            }\n                \n            function handleViewportChange() {\n                if(languageList) {\n                    if (window.innerWidth < 1280) {\n                        if(!languageList.classList.contains(\"mobile\")) {\n                            languageList.classList.add(\"mobile\");\n                            dropdownArrow.classList.add(\"mobile\");\n                        }\n                    } else {\n                        if(languageList.classList.contains(\"mobile\")) {\n                            languageList.classList.remove(\"mobile\");\n                            dropdownArrow.classList.remove(\"mobile\");\n                        }\n                    }\n                };\n            };\n\n            \/\/ If there is a small\/no space between reviewer and author name, reviewer moves to the first row\n            function update_post_info_layout() {\n                const author_name_element = document.querySelector(\".author-name\");\n                const reviewer_element = document.querySelector(\".reviewer-info\");\n                const post_info_container = document.querySelector(\".post-info\");\n\n                if(reviewer_element) {\n                    let distance_next_to_author, reviewer_fits_next_to_author; \n                    if(post_info_container && author_name_element) {\n                        distance_next_to_author = post_info_container.getBoundingClientRect().right - author_name_element.getBoundingClientRect().right;\n                        reviewer_fits_next_to_author = distance_next_to_author - reviewer_element.clientWidth >= 15;\n                    }\n\n                    if(!reviewer_fits_next_to_author) {\n                        reviewer_element.classList.add(\"the_first_row\");\n                    } else if (reviewer_fits_next_to_author && reviewer_element.classList.contains(\"the_first_row\")) {\n                        reviewer_element.classList.remove(\"the_first_row\");\n                    }\n                }\n            }\n\n            handleViewportChange();\n            update_post_info_layout();\n             \n            window.addEventListener(\"resize\", () => {\n                handleViewportChange();\n                update_post_info_layout();\n            });\n    <\/script>\n\n        <span class=\"img-container\">\n            <picture class=\"\" style=\"filter: grayscale(0)\">\n                <source media=\"(max-width: 500px)\" srcset=\"\/wp-content\/uploads\/2026\/03\/SkillToon-Main_small.webp\" type=\"image\/webp\">\n                <source media=\"(max-width: 500px)\" srcset=\"\/wp-content\/uploads\/2026\/03\/SkillToon-Main_small.jpg\" type=\"image\/jpg\">\n                <source srcset=\"\/wp-content\/uploads\/2026\/03\/SkillToon-Main.webp\" type=\"image\/webp\">\n                <source srcset=\"\/wp-content\/uploads\/2026\/03\/SkillToon-Main.jpg\" type=\"image\/jpg\">\n                <img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/03\/SkillToon-Main.jpg\" width=\"640\" height=\"357\" alt=\"SkillToon e-learning platform testimonial\" title=\"\">\n            <\/picture>\n        <\/span>\n    \n<div style=\"margin-top:1.5em\" class=\"download-button-container\"><a class=\"case-study-download-button\" href=\"\/wp-content\/themes\/intentionally-blank\/assets\/case_studies\/skilltoon\/SkillToon.pdf\" target=\"_blank\" rel=\"noopener\">Download as PDF<\/a><\/div>\n<h2>Introduction<\/h2>\n<p><a href=\"https:\/\/skilltoon.com\/\" rel=\"nofollow noreffer noopener\" target=\"_blank\">SkillToon<\/a>, an eLearning startup based in San Francisco, approached DevsData LLC without an existing technical platform. The startup required a complete, end-to-end system built from scratch that kept tutors and learners connected from registration through live instruction. They needed an MVP delivered quickly, with Google sign-in for fast onboarding and a unified environment for class discovery and live sessions.<\/p>\n<p>The architecture needed to handle traffic spikes during evening hours when concurrent session demand peaked across multiple time zones. Core functionality relied on Google for authentication. SendGrid managed email delivery for onboarding and transactional messages.<\/p>\n<p><a href=\"https:\/\/devsdata.com\/\" target=\"_blank\">DevsData LLC<\/a> stepped in ahead of a fixed launch date, shaping the first version of the platform through a focused two-week review and design cycle. The product relied on <a href=\"https:\/\/vuejs.org\/\" rel=\"nofollow noreffer noopener\" target=\"_blank\">Vue.js<\/a> with <a href=\"https:\/\/www.typescriptlang.org\/\" rel=\"nofollow noreffer noopener\" target=\"_blank\">TypeScript<\/a> on the frontend and <a href=\"https:\/\/expressjs.com\/\" rel=\"nofollow noreffer noopener\" target=\"_blank\">Express.js<\/a> with <a href=\"https:\/\/www.postgresql.org\/\" rel=\"nofollow noreffer noopener\" target=\"_blank\">PostgreSQL<\/a> on <a href=\"https:\/\/aws.amazon.com\/\" rel=\"nofollow noreffer noopener\" target=\"_blank\">AWS<\/a> on the backend, forming a strong base for classroom features and live sessions developed later in the project.<\/p>\n\n        <span class=\"img-container\">\n            <picture class=\"\" style=\"filter: grayscale(0)\">\n                <source media=\"(max-width: 500px)\" srcset=\"\/wp-content\/uploads\/2026\/03\/SkillToon-Icons_small.webp\" type=\"image\/webp\">\n                <source media=\"(max-width: 500px)\" srcset=\"\/wp-content\/uploads\/2026\/03\/SkillToon-Icons_small.jpg\" type=\"image\/jpg\">\n                <source srcset=\"\/wp-content\/uploads\/2026\/03\/SkillToon-Icons.webp\" type=\"image\/webp\">\n                <source srcset=\"\/wp-content\/uploads\/2026\/03\/SkillToon-Icons.jpg\" type=\"image\/jpg\">\n                <img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/03\/SkillToon-Icons.jpg\" width=\"640\" height=\"357\" alt=\"Project Highlights testimonial\" title=\"\">\n            <\/picture>\n        <\/span>\n    \n<h2>Client overview<\/h2>\n<p>Founded in 2021 and based in San Francisco, SkillToon connects tutors with learners who want structured online education. The platform eliminates the need to coordinate multiple sites and tools by keeping all class activities within a single interface. Students can find classes without having to jump between sites, and booking is completed with just a few clicks. This streamlined approach has made remote learning feel less fragmented for users worldwide.<\/p>\n<p>DevsData LLC built tools that simplify instructor workflows rather than complicate them. Tutors can set up one-time workshops or create recurring class schedules depending on their teaching style. The team integrated financial tracking directly into the platform, removing the need for spreadsheets or separate accounting software. Video features enable screen sharing and live demonstrations without leaving the interface. DevsData LLC is embedded daily.co sessions directly into SkillToon, eliminating the need to coordinate separate Zoom meetings or install additional software. The infrastructure DevsData LLC designed handles traffic spikes during peak evening hours when concurrent session demand rises across multiple time zones.<\/p>\n<p>The platform provides students from various countries with browser-based access. No downloads required. Growth focuses on expanding the student base and bringing more instructors into the marketplace, while refining features to maintain high learning quality on both sides of the platform.<\/p>\n\n            <div class=\"schedule-consultation middle-scheduler\">\n                <div class=\"block-contact\">\n                    <p>Do you have IT recruitment needs?<\/p>\n                <\/div>\n                <div class=\"contact-us-show schedule-consultation-button\">\n                    \ud83c\udfa7\n                    <span>Schedule a meeting<\/span>\n                <\/div>\n            <\/div>\n    \n<h2>Project scope and objectives<\/h2>\n<p>SkillToon engaged DevsData LLC to plan and design a user-friendly eLearning web application and deliver it in production by a fixed launch date. The startup had seen DevsData deliver complete platforms to other early-stage companies under similar deadline pressure. Learners and tutors needed to remain in a single controlled environment from registration through the live class, without switching tools. SkillToon required predictable delivery and sessions routed through their own video interface. Fast registration and clear course discovery would determine whether users stayed on the platform or abandoned it.<\/p>\n<p>DevsData LLC&#8217;s engineers shaped the technical approach after analyzing SkillToon&#8217;s user requirements and growth projections. DevsData LLC\u2019s engineers built the system using Vue.js with Vuetify and TypeScript for the frontend and Express.js on <a href=\"https:\/\/nodejs.org\/en\" rel=\"nofollow noreffer noopener\" target=\"_blank\">Node.js<\/a> for the backend. PostgreSQL and <a href=\"https:\/\/typeorm.io\/\" rel=\"nofollow noreffer noopener\" target=\"_blank\">TypeORM<\/a> ensured data integrity, with AWS hosting providing support for performance and uptime. The platform integrates Google sign-in for fast registration, Stripe for secure global payments, daily.co for live video classrooms, and SendGrid for communication. A pilot followed, enabling adjustments to the user flow based on testing feedback before final deployment.<\/p>\n<p>DevsData LLC conducted business analysis sessions with SkillToon&#8217;s founders to map out feature requirements and user workflows. These discussions revealed that learners needed registration completed in under a minute, while tutors required integrated tools for managing lessons, payments, and communications without leaving the platform. The system needed to support over 100 participants per class while maintaining reliability during concurrent sessions. Analysis extended beyond immediate launch needs to identify scalability requirements that would support global user growth while preserving consistent performance.<\/p>\n<h2>Challenges and constraints<\/h2>\n<p>The SkillToon project presented several demanding conditions from the start. The platform had to be delivered on a tight schedule, integrate multiple services, and remain stable under heavy load from hundreds of simultaneous users. Each feature, from live video classrooms to in-app payments, required seamless coordination between frontend and backend systems. These overlapping priorities left no margin for misalignment or rework. The following table outlines the key challenges encountered during the engagement and how DevsData LLC addressed them.<\/p>\n<table style=\"width: 100%; font-weight: normal;\">\n<thead>\n<tr>\n<th>Challenge<\/th>\n<th>The DevsData solution<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Tight delivery timeline with a fixed launch date<\/td>\n<td>DevsData LLC divided the work into focused sprints, aligning design and engineering from day one. This approach enabled final design approval within two weeks and ensured that backend development progressed in parallel, keeping delivery on schedule.<\/td>\n<\/tr>\n<tr>\n<td>High user load during real-time video sessions<\/td>\n<td>To accommodate more than 100 participants per class, DevsData LLC integrated daily.co for live communication and performed stress tests to validate scalability. Backend optimization improved responsiveness during peak usage.<\/td>\n<\/tr>\n<tr>\n<td>Complex integration across multiple services<\/td>\n<td>The team implemented Stripe, Google sign-in, and SendGrid through a modular structure built on Vue.js, Node.js, and TypeScript. Each service operated independently, minimizing conflict during updates and ensuring smooth deployment.<\/td>\n<\/tr>\n<tr>\n<td>User flow complexity revealed during pilot testing<\/td>\n<td>DevsData LLC conducted usability reviews with beta testers to identify friction points in navigation. Insights from these sessions guided interface refinements that made onboarding and class management faster and more intuitive.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>DevsData LLC established a collaborative framework that addressed challenges through continuous client engagement. Business analysis sessions with SkillToon&#8217;s founders occurred throughout development, allowing requirements to evolve as technical realities became clearer. Project managers maintained communication rhythms that surfaced integration issues early, preventing delays that could have compromised the launch date. This comprehensive approach to client collaboration ensured that SkillToon reached its launch goals while preserving stability and user satisfaction.<\/p>\n<h2>Results and impact<\/h2>\n<p>The SkillToon platform reached completion on schedule after a fast-paced development cycle that moved from design approval to final deployment in under six weeks. The build met every technical and usability requirement, achieving stability during testing. Both the client and beta participants confirmed that the platform simplified onboarding and payment management, all within a single interface. The collaboration between SkillToon and DevsData LLC demonstrated efficiency in both execution speed and software quality.<\/p>\n<p><strong>Key outcomes included:<\/strong><\/p>\n<ul style=\"padding-left: 2.5em;\">\n<li>The platform launch was completed on schedule, avoiding any delays to the startup\u2019s public rollout.<\/li>\n<li>Live classrooms supported over 100 simultaneous participants without performance loss.<\/li>\n<li>Internal tests consistently recorded uptime and stable response times during peak activity.<\/li>\n<li>Stripe integration enabled global participation and instant instructor withdrawals.<\/li>\n<li>Daily.co video sessions delivered reliable performance, improving learner retention in longer courses.<\/li>\n<li>Pilot feedback confirmed intuitive navigation and reduced user drop-off during registration.<\/li>\n<li>SendGrid adoption improved delivery rates for onboarding and transactional emails.<\/li>\n<\/ul>\n<p>The project team centered on a senior full stack engineer tasked with defining the core architecture that would determine how different system components interacted with each other. A frontend specialist focused on user flows to make navigation intuitive for students exploring courses, then designed classroom interfaces that provided teachers with efficient tools for managing their educational content. <\/p>\n<p>The project team centered on a senior full stack engineer tasked with defining the core architecture that would determine how different system components interacted with each other. A frontend specialist focused on user flows to make navigation intuitive for students exploring courses, then designed classroom interfaces that provided teachers with efficient tools for managing their educational content. <\/p>\n<p>A backend engineer concentrated on integrations that would connect third-party services to the platform seamlessly, followed by building data structures that organized information in ways optimized for retrieval speed. A project manager orchestrated timelines to keep development phases synchronized and managed communication to prevent misalignment, ensuring each sprint delivered functional components without delays that could compromise the delivery schedule.<\/p>\n<p class='quote'><i>\u201cAs a project, SkillToon tested our ability to move fast without losing structure. The integrations were complex, and each required precise sequencing across teams. Delivering a fully functional platform under such tight timing demanded clear communication and accountability at every stage.\u201d<\/i> \u2013 Nenad Hrisafovic, DevsData LLC<\/p>\n<h2>Conclusion<\/h2>\n<p>SkillToon entered the project with a clear need: a single environment that kept tutors and learners together from registration to live class while still meeting a fixed launch date. DevsData LLC delivered a production-ready platform that kept onboarding short and supported large live sessions. Payments and communication were consolidated within a single interface, reducing friction for both instructors and students. The result gave the startup a stable base for validating its business model and growing the marketplace without immediate rework.<\/p>\n<p>The collaboration demonstrated DevsData LLC&#8217;s ability to work with early-stage companies under time pressure. The team previously rebuilt <a href=\"https:\/\/devsdata.com\/case-studies\/lina-webflow-software-development-nyc-medical-startup\/\" target=\"_blank\">Lina Inc.&#8217;s Webflow platform<\/a> for a New York medical startup, repairing broken HubSpot integrations that were blocking client acquisition across their expanding coworking spaces. <a href=\"https:\/\/devsdata.com\/case-studies\/case-studies-microsite-25-lessons-for-a-startup-incubator\/\" target=\"_blank\">A startup incubator received a fully functional microsite within five working days<\/a> to meet their 25th anniversary deadline, complete with dynamic content activation and video commenting features. DevsData also developed complete <a href=\"https:\/\/devsdata.com\/case-studies\/branding-and-website-design-for-a-space-startup\/\" target=\"_blank\">branding and website redesigns for space technology startups<\/a>, working through multiple concept iterations while staying under budget through focused three-person teams.<\/p>\n<p>Teams building eLearning platforms or managing live instruction at scale can contact DevsData LLC at <a href=\"mailto:general@devsdata.com\" target=\"_blank\" rel=\"noopener\">general@devsdata.com<\/a> or visit <a href=\"http:\/\/www.devsdata.com\" target=\"_blank\">www.devsdata.com<\/a>. The group supports short delivery cycles and handles projects that combine real-time video, payments, and high user load with predictable execution.<\/p>\n<div class=\"download-button-container\"><a class=\"case-study-download-button\" href=\"\/wp-content\/themes\/intentionally-blank\/assets\/case_studies\/skilltoon\/SkillToon.pdf\" target=\"_blank\" rel=\"noopener\">Download as PDF<\/a><\/div>\n\n        <section class=\"author_section_container\">\n            \n            <p class=\"contact_on_twitter\">\n                Any questions or comments? Let me know on \n                <a href=\"https:\/\/twitter.com\/Nikakhotcholava\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Twitter\/X<\/a>.\n            <\/p> \n        \n            <div class=\"schedule-consultation\">\n                <div class=\"block-contact\">\n                    <p>Discover how IT recruitment and staffing can address your talent needs. Explore trending regions \n        like Poland, Portugal, Mexico, Brazil and more. <\/p>\n                <\/div>\n                <div class=\"contact-us-show schedule-consultation-button\">\n                    \ud83d\uddd3\ufe0f\n                    <span>Schedule a consultation<\/span>\n                <\/div>\n            <\/div>\n            <div class=\"author_section\">\n                <div class=\"author_photo_container\">\n                    <picture>\n                        <source srcset=\"https:\/\/devsdata.com\/wp-content\/uploads\/2024\/10\/nikoloz-khotcholava-min.webp\" type=\"image\/webp\"> \n                        <source srcset=\"https:\/\/devsdata.com\/wp-content\/uploads\/2024\/10\/nikoloz-khotcholava-min.jpg\" type=\"image\/jpeg\">\n                        <img decoding=\"async\" class=\"avatar lazyload\" width=\"64\" height=\"64\" src=\"https:\/\/devsdata.com\/wp-content\/uploads\/2024\/10\/nikoloz-khotcholava-min.jpg\" alt=\"avatar\" loading=\"lazy\" title=\"Nikoloz Khotcholava\" >\n                    <\/picture>\n                    <a class=\"read_full_bio\" href=\"\/author\/nikoloz-khotcholava\/\" aria-label=\"Read more from Nikoloz Khotcholava\">Read full bio<\/a>\n                <\/div>\n                <div class=\"author_info_container\">\n                    <div class=\"author_info\" data-role=\"Author\">\n                        <h4 id=\"author_title\">\n                            <a href=\"\/author\/nikoloz-khotcholava\/\" aria-label=\"Read more from Nikoloz Khotcholava\">Nikoloz Khotcholava<\/a>\n                            <span class=\"position\">Copywriter and Marketer<\/span>\n                        <\/h4>\n                    <\/div>\n                <\/div>\n                <div class=\"author_about\">\n                    <span>Nika Khotcholava is a dedicated Copywriter crafting engaging content across various platforms. His background in social media management has sharpened his ability to communicate ideas effectively and collaborate closely with designers to bring creative visions to life. Nika thrives in fast-paced environments and enjoys learning new technical aspects every day.<\/span>\n                    <div class=\"links\">\n                        <ul class=\"author_socials\">\n            <li>\n                <a href=\"https:\/\/www.linkedin.com\/in\/nikoloz-khotcholava\/\" aria-label=\"Check out Nikoloz Khotcholava on LinkedIn\" target=\"_blank\" rel=\"nofollow noreferrer noopener\">\n                    <svg version=\"1.0\" fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 448 512\" aria-hidden=\"true\">\n                        <g id=\"linkedin5_layer\">\n                            <path d=\"M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z\" data-hs-event-238572417=\"1\"><\/path>\n                        <\/g>\n                    <\/svg>\n                <\/a>\n            <\/li>\n            <li>\n                <a href=\"https:\/\/twitter.com\/Nikakhotcholava?s=21&#038;t=AwFIbg9ghHf56q6Z6iQ9NQ\" aria-label=\"Check out Nikoloz Khotcholava on Twitter\" target=\"_blank\" rel=\"nofollow noreferrer noopener\">\n                    <svg viewBox=\"0 0 512 512\" class=\"scriptlesssocialsharing__icon twitter\" fill=\"currentColor\" height=\"1em\" width=\"1em\" aria-hidden=\"true\" focusable=\"false\" role=\"img\">\n                        <path d=\"M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z\"><\/path>\n                    <\/svg>\n                <\/a>\n            <\/li>\n            <li>\n                <a href=\"mailto:nikoloz.khotcholava@devsdata.com\" aria-label=\"Email Nikoloz Khotcholava\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 512 512\"><path fill=\"currentColor\" d=\"M64 112c-8.8 0-16 7.2-16 16v22.1l172.5 141.6c20.7 17 50.4 17 71.1 0L464 150.1V128c0-8.8-7.2-16-16-16zM48 212.2V384c0 8.8 7.2 16 16 16h384c8.8 0 16-7.2 16-16V212.2L322 328.8c-38.4 31.5-93.7 31.5-132 0zM0 128c0-35.3 28.7-64 64-64h384c35.3 0 64 28.7 64 64v256c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64z\"\/><\/svg>\n                <\/a>\n            <\/li><\/ul>\n                        <a class=\"recruitment_link\" href=\"\/recruitment\/\" target=\"_blank\" rel=\"noopener noreferrer\">\n                            Read more about our IT staffing services\n                            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"https:\/\/www.w3.org\/2000\/svg\">\n                                <path d=\"M5 12H19\" stroke=\"#000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\n                                <path d=\"M12 5L19 12L12 19\" stroke=\"#000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\n                            <\/svg>\n                        <\/a>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div class=\"tags-author \">\n                \n            <\/div>\n        <\/section>\n    \n<p>\n        <script>\n            document.addEventListener(\"DOMContentLoaded\", function() {\n                function debounceMessagePopUp(func, timeout = 300) {\n                    let timer;\n                    return (...args) => {\n                        clearTimeout(timer);\n                        timer = setTimeout(() => {\n                            func.apply(this, args);\n                        }, timeout);\n                    };\n                }\n\n                const toastPopUp = document.getElementById(\"copy-toast-meet-us\");\n                const copyEmailPopButtons = document.querySelectorAll(\".copy-email-button-meet-us\");\n\n                const debouncedMessagePopUp = debounceMessagePopUp(() => toastPopUp.classList.remove(\"toast-active\"), 2000);\n\n                for (let i = 0; i < copyEmailPopButtons.length; i++) {\n                    copyEmailPopButtons[i].addEventListener(\"click\", () => copyEmailFunctionPopUp(copyEmailPopButtons[i]));\n                }\n\n                function copyEmailFunctionPopUp(button) {\n                    navigator.clipboard.writeText(button.previousElementSibling.innerHTML);\n                    toastPopUp.querySelector(\"span\").innerHTML = \"Email copied\";\n                    toastPopUp.classList.add(\"toast-active\");\n                    debouncedMessagePopUp();\n                }\n        })\n<\/script>\n<br \/>\n<\/section>\n","protected":false},"author":40,"featured_media":152035,"template":"","class_list":["post-150588","case_study","type-case_study","status-publish","has-post-thumbnail","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/devsdata.com\/de\/wp-json\/wp\/v2\/case_study\/150588","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devsdata.com\/de\/wp-json\/wp\/v2\/case_study"}],"about":[{"href":"https:\/\/devsdata.com\/de\/wp-json\/wp\/v2\/types\/case_study"}],"author":[{"embeddable":true,"href":"https:\/\/devsdata.com\/de\/wp-json\/wp\/v2\/users\/40"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devsdata.com\/de\/wp-json\/wp\/v2\/media\/152035"}],"wp:attachment":[{"href":"https:\/\/devsdata.com\/de\/wp-json\/wp\/v2\/media?parent=150588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}