ShelfLife

Inspiration

This inspiration for this project came from a gap I felt like I was seeing as an avid reader myself. I've used all the big reading tracker platforms out there, but they were all a miss for me for one reason or another so I built the app that fit all my needs.

As a Kindle reader, I don't have physical books lining a shelf in my apartment which means I don't get that satisfying visual of a growing collection to admire. I wanted to simulate the fun of a real-life bookshelf digitally, almost like collecting book trophies for everything I've finished or have next up on my TBR.

Another big driver for me is that I have ADHD, and the existing options in this space don't work for my brain. Goodreads has the functionality but it's aesthetically bare bones and I got bored of it quite quickly as it feels like a database with a book icon on it. Fable is beautiful and fun, but it's overwhelming with features that trigger my shiny object syndrome. I needed something in between: functional enough to actually solve a problem, pretty enough that I want to keep opening it, but streamlined enough that my ADHD brain doesn't get lost in too many bells and whistles.

I'm also a big experience girlie. I wanted to build something that's just for you, like your own cozy digital library that houses your data driven reading insights alongside any personal notes, thoughts, favourite quotes, etc. People often ask me "what did you think of that book?" and I've already read ten books since then so I genuinely can't remember. I needed somewhere to keep my own book related thoughts that wasn't a giant running iPhone note. On top of that, I'm a data person. I want to know how many books I've read, what genres I'm gravitating toward, how long things took me. Platforms like GoodReads are built on a community basis with social feeds, public reviews and groups to join and maybe that can be incorporated into ShelfLife in the future but the vision I had for this project lasered in on your books and your data, laid out in a way that's enjoyable to come back to, almost like my own personal book universe.

Finally, I also wanted to solve the discovery problem. Finding your next great read shouldn't mean spending hours scrolling through Reddit threads, "best of" lists and reading hundreds of reviews trying to figure out if something actually fits your taste. As a busy entrepreneur, I don't have that kind of time to spare. By bringing AI into the experience, ShelfLife can give you tailored recommendations based on what you've already read and loved, matched to your mood in that moment without the research rabbit hole.

In all these things, ShelfLife was born!

What it does

ShelfLife is an AI-powered reading companion with five core experiences:

A 3D Virtual Bookshelf: the hero feature. Your completed books appear as 3D objects on a realistic wooden bookcase, complete with genre-colored spines, hover animations, and customizable accessories. For Kindle readers and digital-first people, this is the physical bookshelf you never had.

Smart Library Management: track books across TBR, currently reading, and finished states. Rate with half-stars, write reviews, and keep a reading journal with notes, quotes, and reflections per book. So when someone asks what you thought six months later, you actually have an answer.

Mood-Based AI Discovery & Recommendations: take a quiz to get personalized recommendations based on your preferences or browse recommendations based on your previous reading + TBR lists not generic bestseller lists.

Reading Goals with Celebrations: set monthly and yearly targets, watch your progress bar fill from terracotta to gold, and get confetti bursts when you finish a book. Enough dopamine to keep an ADHD brain coming back without being overwhelming.

Reading Wrapped: seven swipeable story cards analyzing your reading year showcasing your stats, genre DNA, reading personality archetype, taste evolution, a quote wall, and an AI prediction of your next obsession. Designed to be screenshot-worthy and shareable.

How I built it

I built ShelfLife entirely on MeDo, using a single comprehensive spec document as my foundation. Rather than feeding MeDo one prompt at a time, I wrote a detailed markdown specification covering the full data model, design system, responsive requirements, and all five feature tabs then uploaded it as a single file. This gave MeDo the full context to generate a cohesive app rather than disconnected pieces.

For AI features (mood discovery, smart recommendations, Reading Wrapped insights), I used the Baidu ERNIE plugin with carefully crafted prompt templates that reference the user's actual book titles, ratings, and journal entries to make outputs feel genuinely personal.

The Reading Wrapped cards required the most design iteration. I developed a theme-aware CSS variable system supporting three user-selectable themes (Warm Neutrals, Moon, and Bloom), with a detailed visual specification for each of the seven cards including SVG grain textures, genre-colored visual motifs, and editorial typography. The Reading Wrapped feature alone went through multiple rounds of multi-turn prompt refinement in MeDo's chat to achieve the exact aesthetic I envisioned, proving that MeDo's conversational approach allows for real creative direction, not just one-shot generation.

Book covers are fetched automatically from the Open Library API with Google Books as a fallback, and a genre-colored generated cover as a last resort. Users also have the option to override auto covers by uploading their desired cover URL.

For data storage, users can try ShelfLife instantly with no sign-up required with their data living in browser cache. If they decide to keep their library long-term, they can opt in to create an account and their data migrates to Supabase with Row Level Security, becoming accessible from any device. This zero-friction onboarding was a deliberate choice to reduce barriers for new users.

Challenges I ran into

Reading Wrapped aesthetic: MeDo's initial attempts at the Wrapped cards produced either text-heavy walls or emoji-laden screens. Neither matched the editorial, screenshot-worthy feel I wanted. I solved this by writing an extremely detailed design prompt specifying exact CSS variables, typography scales, visual motifs per card, and layout rules. The key insight: AI builders need visual constraints, not just descriptions.

Credit optimization: MeDo burns credits with each generation, so I couldn't iterate endlessly. I learned to front-load my thinking into the spec document rather than relying on back-and-forth refinement. One thorough spec beats ten vague prompts.

Balancing features against ADHD-friendliness: the whole point of ShelfLife is that it's not overwhelming. Every feature I added had to pass the test: does this make the app more useful without making it more cluttered? The 3D bookshelf, for example, is visually rich but functionally simple, you just look at it and feel good.

Shelf accessory generation: the platform kept using emojis or small vector graphics as the shelf accessories, but I wanted something more robust and visually appealing. Longer term I would like to upgrade these to a large database of images users can select or upload their own.

Accomplishments that I'm proud of

Bringing this to life, into a product that is actually production ready to have users test is a huge milestone for me. As mentioned, I have ADHD so often I have project ideas that get started, but don't get finished as I get distracted with something else. This hackathon really allowed me to take a concept I had played with in theory and gave me the action plan and deadline to execute it into real existence.

Using a platform I was completely unfamiliar with. I have experience using agentic AI and various building tools, but I had never heard of Medo prior to this hackathon and pushed myself out of my comfort zone to try something new.

Building an app that works seamlessly on both desktop and mobile browsers from day one. The 3D bookshelf, navigation, modals, and every feature adapts between screen sizes, which is something I see a lot of projects skip entirely.

What I learned

Spec-first beats micro prompting for bringing your vision together in the more efficient, cohesive way. Writing a complete, detailed specification upfront produces dramatically better results than iterating through vague prompts pieced together because the AI knows upfront exactly what the objective is and full picture for what you want to create so it has the full context it needs to make consistent decisions across the entire app development process.

The more detail I gave per prompt, the better results I got so taking the time to really lay out my ideas and vision in a clear, concise way then architecting that into executable prompt got me so much further then trying to have generic conversation where the AI could misunderstand or get confused as Ambiguity often doesn't give the AI creative freedom, it gives it permission to default to the easiest solution.

I've only worked on projects before that had either full authorization for access necessary through a sign up feature or were completely open with data stored in browser cache. It was a cool learning experience for me to hybrid those two ideas together to allow users to try the app without signing up, but letting them have the option to keep their data private, secure and accessible from any device if they wanted as well.

What's next for ShelfLife

Reading timer- track how long you spend reading each session and keep a log to reflect on

Reading challenges - themed monthly challenges with badge rewards

Social sharing - generate a shareable image of your bookshelf for Instagram and X

Seasonal bookshelf accessories - decorations that rotate with holidays and seasons

Optional social layer - friend shelves and recommendation swaps, without turning the app into a social feed

Built With

• baidu-ernie
• framer-motion
• google-books-api
• lucide-react
• medo
• open-library-api
• react
• shadcn-ui
• supabase
• tailwind-css
• vite
• zxing/browser
• zxing/library