Restaurant Website Builder

This is a submission for the Storyblok Challenge

What I Built

The goal of this project is to build a restaurant website builder using Storyblok. I wanted to enable restaurants to launch beautiful, fully functional websites quickly, without relying heavily on developers, while maintaining a clean, premium design aesthetic.

To ensure the builder was practical, I conducted extensive research on what content restaurants typically need to manage, identifying key data structures such as:

• Menus
• Location and embedded map
• Hours of operation
• About Us pages
• Online ordering links
• Galleries for dishes and ambiance
• Reviews and testimonials
• Contact forms for reservations or inquiries

Using these insights, I implemented all necessary components to create a scalable restaurant website builder on Storyblok.

---

Demo

Storyblok Space:

(Available upon request while final polish is in progress)

Live Website
https://incredible-manatee-d2b954.netlify.app/

Code Repository:

Code Repository
Plugins Repository
Demo Video or Screenshots

---

Tech Stack

• Frontend: React + TypeScript + Tailwind CSS
• CMS: Storyblok
• AI: OpenAI (menu PDF extraction)
• Deployment: Vercel (planned)

---

How I Used Storyblok

I leveraged Storyblok’s:
✅ Visual Editor for live content editing.

✅ Component-based system to build reusable blocks:

• Hero section
• Navbar with active highlighting
• Footer with branding, tagline, and navigation
• Signature food menus with price, description, and images
• Gallery using an image group block
• About Us “Story Clip” sections with optional reversed layouts for storytelling
• Contact sections with forms, embedded Google Maps, and operating hours
• Reviews and testimonials

✅ Map plugin for simple Google Maps integration via address entry.

✅ Structure to enable restaurant owners and teams to manage content independently while maintaining design consistency.

---

AI Integration

For this project, I incorporated AI using OpenAI to extract structured data from menu PDFs. This allows restaurant owners to upload their existing PDF menus and have them converted into structured JSON, which can then be easily imported into Storyblok, drastically reducing onboarding time and manual data entry for restaurant teams.

This AI-powered extraction pipeline ensures even restaurants with only a physical menu can digitize their content and launch quickly on Storyblok.

---

Learnings and Takeaways

✅ What I’m proud of:

• Building a structured, scalable system that empowers non-technical users to manage restaurant content with ease.
• Leveraging Storyblok’s flexibility to maintain a clean, premium design system while allowing dynamic content.
• Successfully integrating AI to transform PDF menu data into structured content for rapid deployment.

✅ Challenges:

• Time constraints prevented a full visual UI polish pass across all components.
• I would have liked to expand the AI integration to include an article generation plugin to help restaurants create seasonal updates and blog content, but I could not complete it within the challenge window.

This project serves as a strong foundation for a restaurant website builder on Storyblok, enabling restaurants to:

• Showcase hero sections, galleries, and signature dishes
• Display menus, location, and operating hours
• Share customer reviews and receive contact inquiries

while maintaining control, consistency, and scalability, with the added power of AI-assisted data onboarding.

---