Ep 8- Dashboard: Setup Course Page Template | LMS with WWX

แชร์
ฝัง
  • เผยแพร่เมื่อ 15 พ.ค. 2024
  • View the live demo:
    • Build an LMS app with ...
    In this eighth part of the flowacademy series we are going to learn how to construct the Course Page template. We will walkthrough our @Webflow build, explore the database and api endpoint setup over on Xano (@nocodebackend) and then finally learn to setup the requests and actions on @Wized .
    HIRE ME FOR YOUR NEXT WIZED BUILD:
    www.upwork.com/fl/~01f1c6797a...
    GET XANO AT 10% DISCOUNT:
    xano.io/mgfswoqi
    GET 50% OFF YOUR FIRST MONTH WITH DOCUGENERATE(www.docugenerate.com/) WITH THIS PROMO (AS USED IN THIS DEMO):
    50OFFAONNOY
    (DocuGenerate provides a flexible and scalable platform for generating high-quality documents, whether it's for creating contracts, agreements, invoices, proposals, letters, certificates or any other type of document.)
    Create an account on Wized and build incredible apps like Flowacademy:
    www.wized.com/?via=aonnoy
    CLONEABLE:
    webflow.com/made-in-webflow/w...
    CHAPTERS:
    00:00 : Intro
    02:51 : Webflow Build Walkthrough - Skeleton Loader
    04:05 : Webflow Build Walkthrough - Breadcrumbs
    04:21 : Webflow Build Walkthrough - Video Player
    09:21 : Webflow Build Walkthrough - Why Codesandbox
    11:44 : Webflow Build Walkthrough - Chapters Playlist
    14:24 : Webflow Build Walkthrough - Quill Js Editor
    25:34 : Webflow Build Walkthrough - Disqus Comments
    28:15 : Xano API Endpoint - Get Chapter Details
    53:12 : Xano API Endpoint - Get Notes
    53:58 : Xano Add Note API Endpoint
    55:23 : Xano Edit Note API Endpoint
    56:18 : Xano Remove Note API Endpoint
    56:36 : Xano Update Chapter Course Progress API Endpoint
    01:25:55 : Wized General Walkthrough
    01:28:43 : 00. Get User Details - Action
    01:29:49 : 01. Get Chapter Details - Action
    01:30:04 : 02. Set Chapter Detail Variable
    01:30:52 : 03. Set Chapters Playlist Variable
    01:31:24 : 04. Set Visibility to Course Loader - Action
    01:32:00 : 05. Set Visibility to Course content
    01:32:45 : 07. Add attribute to video player - Action
    01:34:13 : 08. Run plyr JS and its other functions - Action
    01:42:20 : Skipping through Action 9-19
    01:42:54 : 20. Set Chapter Last Played till variable - Action
    01:43:25 : 21. Set Chapter Completed Variable
    01:44:08 : 22. Update Chapter Completed Variable - Action
    01:45:03 : 23. Set Visibility for Chapter Completed Icon - Action
    01:45:40 : 24. Set visibility to completed icon (real time) - Action
    01:47:40 : 25. Set Realtime playback duration
    01:48:44 : 26. Run Quill Editor JS - Action
    01:53:47 : 28. Load Notes - Action
    01:54:36 : Quick Walkthrough from action 29-34
    01:56:14 : 35. Set Note ID to variable - Action
    01:56:56 : 36. Prevent Default Action - Action
    01:59:01 : Quick Walkthrough actions from 38-40
    RESOURCES:
    1. Checkout Yacine's amazing Wized Beginner Tutorials ( @WizedDev )
    / @wizeddev
    ---
    Follow me:
    Instagram: / aonnoyux
    X: / aonnoyux
    Linkedin: / aonnoy-sengupta
    Dribbble: dribbble.com/aonnoysengupta
    Email: hello@aonnoysengupta.com
    ---
    TAGS
    #webflow #wized #webapplication
  • วิทยาศาสตร์และเทคโนโลยี

ความคิดเห็น •