DEV Community: Michael

Restaurant Website Builder

Michael — Mon, 30 Jun 2025 06:54:21 +0000

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.

Map Location Picker Plugin

Michael — Sun, 22 Jun 2025 14:29:34 +0000

Map Location Picker Plugin for Storyblok

This is a submission for the Storyblok Challenge

Demo

Code Repository:

GitHub – storyblok-get-location-plugin

Demo Video or Screenshots

Watch the demo on YouTube

What I Built

I created a Storyblok Field Plugin that makes adding real-world locations as easy as typing an address. Powered by the Google Maps Geocoding API, editors can search for a place, see it instantly pinned on a map, and automatically store clean location data — latitude, longitude, and formatted address — into their Storyblok content.

No complex setup. No copying coordinates from Google. Just search, pin, and go.

It’s a lightweight plugin for a heavyweight need. Whether it’s contact pages, store locators, event listings, or any content that benefits from geographic context, this solves a common problem with minimal friction.

The goal wasn’t to reinvent maps. It was to take something almost every site needs and make it feel like a native part of the Storyblok editing experience. I wanted location data to be just another field — not a separate workflow.

It’s simple by design — and that’s the point.

Getting Started

1. Clone the repository

git clone https://github.com/your-username/storyblok-map-location-plugin.git
cd storyblok-map-location-plugin

2. Deploy the plugin to Storyblok

npm run deploy --workspace=get-location

3. Follow the Prompts

It will ask for your Storyblok Personal Access Token.
You can create one at:

Storyblok → My Account → Personal Access Tokens
Make sure the token has permission to manage your space and plugins.

4. Add the plugin to a Block

Go to your Storyblok Space
Open or create a component
Add a new field:
- Type: custom
- Plugin: Select your deployed plugin (e.g., get-location)
Save the schema
You can use the following code to implement the visual UI of the data:

.address-map-iframe {
  width: 100%;
  height: 280px;
  border: none;
  display: block;
  border-bottom: 1px solid #e5e7eb;
}

.map-wrapper {
  border-radius: 8px;
  overflow: hidden;
}

.address-map-text {
  padding: 1rem 0.5rem;
  font-size: 0.95rem;
  color: #374151;
  font-family: system-ui, sans-serif;
  margin: 0;
}

.address-map-fallback {
  font-size: 0.875rem;
  color: #9ca3af;
  font-style: italic;
  margin: 1rem 0;
}

export default function AddressMap({ blok }) {
  if (!blok?.address_view?.embedUrl || !blok?.address_view?.formatted_address) {
    return <p className="address-map-fallback">Address not found</p>;
  }

  return (
    <div className="map-wrapper">
      <iframe
        className="address-map-iframe"
        loading="lazy"
        src={blok.address_view.embedUrl}
        title="Google Maps Location"
        referrerPolicy="no-referrer-when-downgrade"
        allowFullScreen
      ></iframe>
    </div>
  );
}

Tech Stack

Frontend Plugin: React + Vite
Framework/Platform: Storyblok Field Plugin SDK (iframe-based integration)
Design System: Custom CSS mimicking Blok.ink (Storyblok Design System)
Input & Button Components: Styled to match SbTextField and SbButton
Cloud Function: Firebase Functions for address-to-coordinate resolution
Maps API: Google Maps Geocoding API (called via Firebase Function)
UX Behavior: Debounced search, cooldown logic, and loading indicator
Preview Feature: Google Maps iframe showing selected location
State Management: React useState for managing form and result states

How I Used Storyblok

Registered the plugin as a custom field type using the Field Plugin UI
Used useFieldPlugin() to sync data between the Visual Editor and plugin iframe
Saved structured data such as:

{
  lat: number
  lng: number
  formatted_address: string
  embedUrl: string
}

PikPok – Share Your Creativity, Your Way.

Michael — Mon, 14 Oct 2024 06:48:28 +0000

This is a submission for the The Pinata Challenge

Demo

Live App

My Code

Github Code

What I Built

PikPok is a fun and interactive platform where you can share and explore different types of content, from videos and images to audio and even apps. It’s like TikTok, but with more ways to get creative! Plus, you can earn points by posting or interacting with others (TBD), making it a playful experience that rewards your engagement. Whether you’re sharing videos, music, or cool apps, PikPok is the place to connect, create, and have fun.

Here are some of the features I built:

Sophisticated Upload Form

Profile Gallery

Custom Video Player and Content Snap Scrolling

Custom Image Viewer

Application Viewer with the ability to Download

Custom Audio Player

More Details

Storage Versatility

I can store any file types I want -- image/, audio/, application/*, etc.

Client-side Upload using JWT with custom use limit and scoped rules

I created a Firebase Cloud Function that generates the JWT and uses it to upload a file in Firestore.

Generate a signed URL for limited-time access

I have both public and paid content. The public option immediately generates a signed URL on upload and the paid option generates one after users pay with points. Both can be accessed blazingly fast, given their CDN support.

Overall, PikPok combines creativity, interactivity, and rewards to deliver an engaging experience for users, all powered by Pinata’s reliable and flexible storage solutions, making content sharing fun and accessible.

National Identity-focused Social Platform

Michael — Mon, 27 May 2024 04:35:53 +0000

This is a submission for the The AWS Amplify Fullstack TypeScript Challenge

What I Built

General Overview

A social platform that connects people worldwide by celebrating different national identities and cultures. It's perfect for expatriates, global enthusiasts, and anyone interested in exploring cultural diversity. Users can share their traditions, discuss important issues, and learn about various countries in a straightforward and engaging way. This platform aims to build understanding and cooperation among its global community.

Technical Overview

This application is built on top of the starter pack environment that AWS Amplify Gen 2 docs provided. It includes all FOUR INTEGRATIONS but the UI and everything frontend is done from scratch.

Demo and Code

Design

Home

Profile and Settings

Login/Signup Page

Link to my Github Repository: Github Link

Link to my app: Culture Application

Note: If you're trying to sign up, you will have to reload the site once you're in and log in. Once you see your email at the top right, that indicates that you are logged in. Sorry for the inconvenience. I tried.

Integrations

Amazon Cognito

Used mainly for user authentication and preliminary data storage.

AWS Lambda

Post confirmation trigger that creates a new user to the User table in DynamoDB.

DynamoDB

Main database for storing new data for connections, messaging, notifications, categories, etc.

S3

Profile Picture storage

AppSync

GraphQL and PubSub APIs to connect my application to my data and events.

IAM and IAM Identity Center

Roles and policies for services and more.

Feature Full