Nuxt 3, Algolia, Storyblok, and TailwindCSS Crash Course

As you quite enjoyed the first live coding video, I decided to do another one! This time, I have built a very simple Digital Experience Platform with Nuxt 3, Algolia, Storyblok, and TailwindCSS. I also used NuxtImage but encountered some problems with 403 for one of the images. Finally, I have deployed the app to Vercel just to see how it works in production.

Enjoy!

Code repository - https://github.com/Baroshem/nuxt-stor...
Deployed app - https://nuxt-storyblok-algolia-tailwi...
My article for Storyblok - https://www.storyblok.com/tp/digital-...[space_id]=88751&_storyblok_tk[timestamp]=1659430998&_storyblok_tk[token]=43f9469d7aa00acc483d3db500eba6f653aa8d5a

#javascript #programming #developer #nuxtjs #image #optimization #opensource #algolia #storyblok #tailwindcss #css #typescript #cats

-----------------------------------------------------------------------------------------------

Twitter -   / jacobandrewsky  
Blog - https://dev.to/jacobandrewsky
Linkedin -   / jakub-and.  .
Github - https://github.com/Baroshem


Timestamps:
0:00 Intro
0:55 Technology Stack
1:55 Nuxt project
2:15 Storyblok Dashboard
3:20 Algolia Index
3:45 Modules used in the app
5:30 Installing dependencies
6:25 Configuring modules in nuxt.config.ts
9:00 Adding environment variables
10:30 Testing if Algolia module works correctly
13:00 Testing if Storyblok module works correctly
15:10 Create CatImage.vue component
16:07 Create CatImageGallery.vue component
18:20 Add preview in Storyblok
21:00 Add NuxtImage
24:30 Add Indexer
34:00 Deploy to Vercel (and debugging some issues)