Zibibbo Menu - Restaurant Showcase App

A real-time, TikTok-style restaurant menu app using OpenAI and Cloudinary, built for maximum engagement and SEO performance.

Web Project

Created: March 19, 2024 • Updated: June 19, 2024

Technologies Used

All Technologies

Cloudinary

Framer Motion

Improvmx

Mailchimp API

Mongo DB

NextJS

NextAuth.js

Nodemailer

Live Site

Zibibbo Menu - Restaurant Showcase App - Responsive showcase

Project Info

My Role

Full Stack Developer

Team Size

1 person

Duration

3 Months

Timeline

3/19/2024 - 6/19/2024

Featured

Yes

About This Project

Zibibbo Menu is a cutting-edge showcase app designed for restaurants to display their menu in a visually engaging, TikTok-style feed. Built with Next.js 14 and MongoDB, it supports real-time updates using Pusher, media optimization with Cloudinary, and wine pairing recommendations via OpenAI API. The app is SEO-optimized, supports image/video uploads, and includes social media automation with Metricool, helping restaurants engage with customers across platforms instantly.

Key Features

Real-time menu updates with Pusher
TikTok-style interface for engaging UX
SEO-optimized for maximum online visibility
Wine pairing suggestions using OpenAI API
Cloudinary-powered image and video gallery
Automatic social media posting via Metricool
Responsive design for tablets and TVs
Admin dashboard for easy item management

Challenges Overcome

"challenge": "Implementing smooth real-time updates without delays.", "solution": "Built scalable architecture for real-time interactions using WebSockets."
"challenge": "Integrating AI-generated content without overwhelming the UI.", "solution": "Used OpenAI with prompt templates to generate concise and relevant wine pairings."
"challenge": "Optimizing media delivery while maintaining image and video quality.", "solution": "Leveraged Cloudinary's transformations and lazy loading for efficient performance."
"challenge": "Ensuring fast load times with high-resolution media and SEO optimization.", "solution": "Used Next.js dynamic rendering, CDN caching, and image optimization techniques."

What I Learned

"Built scalable architecture for real-time interactions using WebSockets.", "Mastered integrating OpenAI for dynamic, personalized recommendations.", "Learned to balance SEO best practices with media-heavy UI.", "Streamlined social media workflows through Metricool and Cloudinary automation."

This is a private repository

Due to confidentiality agreements, the source code for this project is not publicly available. Please contact me for more information or to request access.