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-storyblok-algolia-tailwindcss
Deployed app - https://nuxt-storyblok-algolia-tailwindcss.vercel.app/
My article for Storyblok - https://www.storyblok.com/tp/digital-experience-nuxt-3-algolia-tailwindcss?_storyblok=170868811&_storyblok_c=targeted_page&_storyblok_version=&_storyblok_lang=default&_storyblok_release=0&_storyblok_tk[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 - https://twitter.com/jacobandrewsky
Blog - https://dev.to/jacobandrewsky
Linkedin - https://www.linkedin.com/in/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)

Видео Nuxt 3, Algolia, Storyblok, and TailwindCSS Crash Course канала Jakub Andrzejewski