Quote of the Day

Modern life leaves little time for meaningful reflection. Quote of the Day uses AI to turn fleeting thoughts into profound wisdom—making self-reflection effortless, engaging, and shareable.

Comment

Inspiration

In our hectic, modern lives, daily reflection often feels like a chore. As a solo developer without a formal engineering background, I struggled with the blank page of journaling: “What should I write?” and “Does this even matter?” This frustration sparked an idea: What if an app could transform our fleeting daily thoughts into something timeless and shareable? This led to Quote of the Day, an application designed to make daily reflection not just easy, but a deeply motivating and creative experience.

What it does

Quote of the Day is a creative platform that transforms your brief daily notes into three unique, elegant quotes crafted by Google's Gemini AI. You can select your favorite, save it to a persistent cloud-based archive, and instantly share it on social media.

Every shared quote generates a beautiful, dynamic OG image card, making your personal insights visually compelling and highly shareable on platforms like X (Twitter).

Key Features:

  • AI-Powered Quote Generation: Turns user thoughts into three distinct, personalized quotes using the Google Gemini API.
  • Dynamic OG Image Sharing: Creates beautiful, shareable image cards for every quote using @vercel/og.
  • Persistent Cloud Archive: Saves all generated quotes, images, and like counts to a Supabase PostgreSQL database.
  • Anonymous Real-Time "Likes": Allows any user to "like" a quote, with the count updated in real-time.
  • Homepage Carousel: Displays a user's recently saved quotes in an autoplaying slideshow for rediscovery.

How we built it

This application was brought to life using Next.js 14 (App Router) and TypeScript, with a modern UI built upon Tailwind CSS and shadcn/ui.

The entire development process was managed and accelerated within Bolt.new, an AI-powered development environment. The core logic relies on a Next.js API route that sends carefully constructed prompts to the Google Gemini API to generate personalized quotes.

The most crucial feature, social sharing, was achieved using a second API route leveraging Vercel's @vercel/og (Satori) library. This API dynamically generates beautiful OG images from quote data on the fly.

All data persistence—including quote text, image URLs, and like counts—is handled by Supabase, using a PostgreSQL database secured with Row Level Security (RLS) policies and a database function for safely incrementing likes. The entire application is deployed on Netlify.

Challenges we ran into

As a solo developer new to this stack, this project was a series of intense debugging challenges that taught me invaluable lessons.

  1. The @vercel/og Gauntlet: The biggest hurdle was the strict and nuanced CSS rendering rules of the OG image generation library. Achieving readable, non-overlapping text with dynamic lengths required abandoning complex position and z-index properties in favor of a pure flexbox-based layout. This required a complete redesign of the image's internal structure.
  2. Environment Inconsistency: We faced stubborn Module not found errors that persisted despite clean installs. The root cause was a Node.js version mismatch between different development environments. The solution was to use nvm to enforce a consistent Node.js version (v22+) and switch to the pnpm package manager for more reliable dependency resolution.
  3. Backend & Database Hurdles: Implementing the "Like" feature was blocked until I diagnosed a missing UPDATE policy in Supabase's Row Level Security. Adding the correct SQL policy was the key to enabling database updates from the API.

Accomplishments that we're proud of

I am incredibly proud of building a full-stack, AI-integrated web application from scratch without a formal engineering background. Overcoming the complex environmental and library-specific bugs was a tremendous learning experience. Most importantly, I successfully translated a personal concept into a tangible, functional, and (I hope!) beautiful tool that others can use to find a little more meaning in their own daily lives.

What we learned

  • The Environment Is Everything: The most difficult bugs often live not in the code, but in the inconsistencies between development environments (Node.js versions, package managers).
  • Simplicity is Robustness: When facing the limitations of an advanced library like @vercel/og, abandoning a complex design for a simpler, more fundamental approach (like pure flexbox) is the key to a working solution.
  • AI as a True Development Partner: AI tools like Bolt.new and Gemini are not just helpers; they are genuine partners that can propose architectures, write code, and accelerate the path from idea to reality.

What's next for Quote of the Day

This MVP is a powerful foundation. The next steps are focused on deepening the user's connection to their data:

  1. User Authentication: Implementing user accounts to make the archive truly private.
  2. Reflection Dashboard: Visualizing a user's quote history and emotional patterns over time.
  3. Community Features: Creating a public gallery where users can optionally share their favorite quotes.

Built With

Share this project:

Updates