Hi HN, I’m Joan, developer of Gridwow.
I created this web app to easily build Bento Grid Layouts, the same style top brands like Apple, Google, and Vercel use to showcase product features on their websites and keynotes. Rich-text, images, videos, and content from X can be added to build the layouts.
Before Gridwow, I used tools like Figma and GIMP to create feature showcase images for my side projects. But whenever I needed to update content, the whole grid would break, and I couldn’t easily re-sort the elements. So, I built an app that allows me to easily add content into a grid and then drag, drop, and resize each element to fit your needs.
As a bonus, since I sometimes stream on Twitch, I made it possible to pull content from a URL into the grid, which can be used in OBS and other streaming platforms to display Bento designs live.
Technical Details: Built with Next.js (frontend & backend), using Cloudinary for media storage, TailwindCSS and Shadcn UI for styling, NextAuth for authentication, Resend for emails, and MongoDB as the database. 'react-grid-layout' handles drag-and-drop and resizing.
What’s next? I want to add more features like pulling content from other social platforms (TikTok, Instagram, YouTube, Product Hunt, Reddit, Hacker News) and incorporating real-time elements like live YouTube subscriber counts or Twitch subscribers. I also plan to add even more customization options.
Let me know your thoughts and feedback! It’s been a blast working on this so far, and I think it’s just neat :)
I got tired of using Figma and GIMP to create Bento Grid designs, so I built a drag-and-drop tool with easy resizing to showcase like top brands.
Joan