As I've been studying Chinese the last 2 years I have built a web app companion tool to help me learn Chinese. It keeps track of which words and characters I know. I can find real world content (websites, articles, YouTube, etc...), and bring it into my tool to help make the content easier to understand when I don't know certain words. I really enjoy it and am currently working on expanding its abilities to include a language exchange function. I'd also like an opportunity to practice writing in Chinese so I'll share a series of posts teaching you how to build a tool that goes the opposite direction: helping you to learn English.
Of course no computer tool could ever replace the value and enjoyment of a real conversation with someone using the language you are learning, but it is a good addition to list of study options for when you don't have a friend nearby. And until the recent advancements in AI technology, language exchange was not a function that computers could provide. But now it is, so we will take advantage of it.
Many people are already producing a lot of good tutorials on how to understand AI and use it in everyday applications. So I won't be spending much time helping you to understand AI. You can already find information elsewhere. My focus in these lessons is to help you understand how to implement a practical and powerful use case in a manner that's easy to test and build without being overwhelmed by the complexity. Because the field is so new, there are very few example applications and walkthroughs that help you understand how to build a complete tool, frontend and backend.
This first lesson will be pretty simple. We just want to setup a fullstack project and add a prototyping tool that will easily let us build components in isolation.
I use Svelte because its syntax in the simplest to write. Don't worry if you don't know Svelte or prefer a different framework. The majority of what we will be doing is TypeScript and HTML.
Tip: If your framework is simple then it allows you to build complex features. If your framework is too complex, then you will only have energy left to build simple features.
Let's start by creating a new SvelteKit project. SvelteKit is a fullstack metaframework, similar to Next.js or Nuxt. Run the following commands:
- choose the "Skeleton project"
- choose TypeScript
- select all 4 additional options
Then run the following commands:
Because streaming AI interfaces are complicated to build and test, we need to make sure we have a method to help us easily build components. Let's add a Documentation and Prototyping Workbench Tool I built called Kitbook. Let's install it:
Add the kitbook() Vite plugin before your sveltekit() plugin in vite.config.ts:
Add the MDSvex imports and configuration in svelte.config.js:
Run npm run dev again and you will see a new src/routes/kitbook folder. Now when you navigate to /kitbook, you will be in the Kitbook workbench. You can use it to build components in isolation, test, and document them.
Kitbook is not production ready yet and will still have more breaking changes so I don't recommend you use it yet. Storybook and Histoire are two well-known alternatives that are production ready. I don't use them because they are too large and slow and don't offer the features I use most often. But they are available and well supported in many frameworks.
If you ran those commands locally, great! However, if you're new to web development or simply want to read and observe you can also quickly see the results, including some additional components for demonstration purposes, in the playground to the right.
The example project here also includes UnoCSS, but you can read the docs if you want to understand that part. The styles are written in similar manner to TailwindCSS.
If you have any questions or comments, feel free to leave them in the box below.
Tomorrow, we will talk about continuous deployment to Vercel and how to begin auditing your site's performance with Lighthouse, right from the start.