BlokLy AI: From space to site

This is a submission for the Storyblok Challenge

What I Built

BlokLy AI is an automated AI application that generates a fully working, visually styled, live-deployed website from one or more Storyblok spaces

Demo

Live Site:

blok-ly.vercel.app

Code Repository:

Sarah-okolo / BlokLy-BE

Demo Video or Screenshots

How it works
Okay, so I decided to make the flow of the application as simple and as straightforward as possible:

• First, the user is required to input their PAT connected to their Storyblok account
• The PAT is then validated, and the app fetches all spaces connected to the provided account.
• The user then selects the spaces they would like to include in the site.
• Once the space(s) have been chosen, they are then prompted to provide additional optional details for the site creation.
• The app then scaffolds a new application based on the provided details, hosts the site, and then returns the live site link.

Tech Stack

For this project, I opted for the following tech stack:

Frontend

• React TS
• TailwindCss
• Tanstack
• Shadcn UI

Backend

• NodeJS Express
• Gemini 2.0 Flash
• Netlify CLI

How I Used Storyblok

For this project, I made use of the Storyblok Management API to validate the user's PAT and to fetch all the spaces connected to the provided account.

AI Integration

Well, now, the core of this project doesn't work by waving a little wand and voilà, you have a live site😲🤭. Nope, that little magic is all AI, and for that, I utilized Gemini's 2.0 Flash model. The Gemini AI is responsible for generating the site name and description (if not provided by the user). Next, through a properly crafted prompt, it generates the entire codebase based on the data provided for the space(s).

Learnings and Takeaways

Building out this project came with its ups and downs. The easy part of it was the seamless integration of Storyblok into the application through the management API. Then the hard part of it was crafting the perfect prompt to generate the correct code for the application in the right formats, and parsing each of the returned code blocks into actual code files. It took a lot of trial and error, but thankfully, I was finally able to make it work😊.

This was an interesting project to tackle. A big thanks to the Storyblok and DEV team for hosting this challenge🥂.