React x Shepherd.JS Workshops - Onboard Users Like a Wizard!

Опубликовано: 02 Февраль 2026
на канале: Kintone Developer Program
2,483
27

Learn to set up an onboarding guide for your React project using the open-source Shepherd.JS library.

🤖 Clone the Workshop Repository!
https://bit.ly/kdp-shepherd

📚 Workshop Steps
https://github.com/sean-kintone/sheph...

🚀 Have your Kintone Subdomain ready!
If you have not already, sign up for the FREE Kintone Developer License by going here:
https://bit.ly/KDP_NEW

💫 Chapters
00:00:00 - Hello
00:00:20 - What We Will Make Today
00:01:44 - Git Clone Repo
00:03:34 - Step-By-Step Guide
00:03:55 - Overview of the Repo
00:05:08 - Workshop Overview
00:05:37 - Codebase Setup
00:05:53 - Backend Setup
00:06:43 - Frontend Setup
00:07:41 - Quick Dive into React & Shepherd
00:08:12 - Quick React Review
00:10:57 - What is Shepherd?
00:12:13 - What is Kintone?
00:17:10 - Let's Create a Kintone Database App
00:23:15 - Create a Kintone API Token
00:25:02 - .env file
00:28:36 - Time to Explore the Code
00:31:15 - App.js
00:33:19 - Content.js
00:35:10 - Content.js - Fruit Selector
00:42:15 - Number Clicker
00:47:24 - Treasure Chest
00:52:08 - Build a Shepherd.JS Tour
01:05:10 - Treasure Chest Logic
01:12:00 - Test the Code
01:12:22 - Upload Our Status
01:13:04 - Checking the Kintone Database
01:13:24 - Final Test
01:14:00 - Want a Job?
01:14:38 - Thank You!

⚙️ WHAT IS KINTONE?
Kintone is a no-code/low-code cloud platform for teams to easily & effectively share and collaborate on their data.
You can add JavaScript, CSS, &/or HTML to enhance the frontend UI/UX of a Kintone App. This can include features such as maps, buttons, and color-coding.
Read up on how to customize and develop on the Kintone platform at https://kintone.dev/

🕒 Join our Meetup
https://www.meetup.com/kintone-develo...

📣 Shout-out to @hackbuddyorg for being our Community Partner!