Our first tutorial using TutorialKit

[noam-honig]

I've been spending the last 4 days writing a comprehensive tutorial using tutorialkit, and I've got to say it's impressive - tutorialkit simply makes it easy to focus on what you're trying to teach and get things done.

I would love to hear your feedback about the tutorial:
https://learn.remult.dev/

Let me know what you think

Thanks to @AriPerkkio & @Nemikolh for all the support.

Checkout what I did instead of the navigation bar (#191) and url for preview windows (#192) at:
https://learn.remult.dev/1-basics/1-introduction/3-insert-data-on-the-backend
and
https://learn.remult.dev/1-basics/5-live-query/2-realtime-updates

[sulco]

@noam-honig Thanks for sharing, I'd love to showcase it on the StackBlitz twitter! The navigation bar links are :cheffs-kiss!

• I have 2 ideas for small improvements — you can add the text-tk-elements-content-textColor class to the text elements in the navigation bar to make it look good in both dark and light mode
• If you want to get rid of the numbers in the url (/1-basics/1-introduction/3-insert-data-on-the-backend) you can define a slug for each part, chapter and lesson - it's a bit of additional chore, but this way you can have sth like /basics/introduction/insert-data-on-the-backend, without changing the underlying folder structure

[yoni-rapoport]

Thank @sulco !

I'm looking for a way to fix all the urls in one place. Thoughts?

[sulco]

Unfortunately, there's no way to do that for now in TutorialKit, but I've just made a little node script for this — I hope it helps!
https://gist.github.com/sulco/092b7ca2d87519722d4f891593f792ce

[GaetanRdn]

Well done! Good work ✌🏼

[GaetanRdn]

I started mine about Angular. It's in French 🇫🇷

https://easy-angular-kit.vercel.app/

Really easy to do it even if we don't know Astro. Perfect tool thanks ✌🏼

[AriPerkkio]

Thanks for sharing the tutorial! It's amazing to see how TutorialKit is being used in real-world tutorials. I just finished the whole tutorial and wrote some notes below. Playing with the remult examples and seeing how my code changes affected the application gives confidence that I could actually build applications with this myself. Awesome tutorial!

• If you create public/logo-dark.svg, it will be shown for the dark theme. Example tutorial-vite-plugin/public.

• Once we get the feat: add template.visibleFiles option feature released you'll be able to reduce code repetition of _files and _solutions a lot. For example the shared/Task.ts is currently requried to be visible in multiple lessons with same content. With this feature you can have the file in templates, and just toggle it visible in lessons that it's required.

• If you want, you could add line numbers and filename visible in the codeblocks. Then in "Code Explanation" sections you could refer to the code with line numbers.

  Example of Lesson 2

  https://expressive-code.com/plugins/line-numbers/#usage-in-markdown--mdx

  ```ts showLineNumbers title="src/backend/index.js" add={2,3,6-9}
  import express from 'express'
  import { remultExpress } from 'remult/remult-express'
  import { Task } from '../shared/Task.js'
  
  export const app = express()
  export const api = remultExpress({
    entities: [Task],
  })
  app.use(api)
  \```
  

  

• You could add Edit this page-link to all pages so that students can easily contribute small fixes like typos. In src/content/tutorial/meta.md add editPageLink: https://github.com/remult/remult/blob/main/docs/interactive/src/content/tutorial/${path}?plain=1.

• Add remult-like theming to the whole tutorial. For example all application links could use the blue brand color that is used on the website. See example theme.css in Vite Plugin Tutorial and https://tutorialkit.dev/reference/theming/.

• Nice to see that src/templates are utilizing template inheritance with tk-config.json!

• Hot reload works really fast in "Querying Data" chapters! Changing different orderBy values and seeing how they affect the outcome immediatelly is just perfect here.

• The "Live Query" chapter works nicely now with embedded "windows" for 2 users. Once Adding urls to the previews definition #192 is completed it will be great to see two completely separate preview windows here.

• "Authentication & Authorization" chapters - wow! Creating a full-stack application with front+backend authentication directly in browser. Just amazing to see that database changes done with one user persist when I logged back with another user.

• Database chapter: Seeing logging from an actual sqlite without having to install anything on my machine, nice!