Build a Link Shortener App with SvelteKit, TypeScript, and Directus.io
This is the most beautiful Headless CMS I’ve ever seen! Let’s use Directus.io along with SvelteKit and TypeScript to build a link shortener app. We’ll create a new project in Directus along with define a data model (collection) that we’ll use to store information about our shortlinks. Then, we’ll create a SvelteKit project that looks for a slug, queries the associated record in Directus, and redirects the user to the route link.
00:00 - Intro
00:40 - Directus.io Intro (sponsor)
01:40 - FREE Project Setup with Directus.io
04:30 - Data Model Setup for the Short Links Collection
09:15 - Creating Sample Short Links
10:00 - Customizing Roles and Permissions
11:45 - SvelteKit Project Setup with TypeScript
13:30 - Directus Tokens and Environment Variables
15:30 - Installing and Configuring the Directus NPM Package
17:40 - Creating the Dynamic SvelteKit API Endpoint
20:00 - Querying Directus and Handling the Redirect
28:30 - Wrap Up
Suggest:
☞ Web Development Tutorial - JavaScript, HTML, CSS
☞ Javascript Project Tutorial: Budget App
☞ E-Commerce JavaScript Tutorial - Shopping Cart from Scratch
☞ JavaScript Programming Tutorial Full Course for Beginners