Sep 25, 2025
The DaliCollab Bookshelf Builder is an interactive app that allows users to design their own bookshelf. They can add up to 12 books they are reading, plan to read, or recommend. Books can be displayed as covers or spines, and each can be arranged with drag-and-drop positioning and z-index layering, giving the user freedom to personalize their shelf.
To make the bookshelf come alive, users can also add decorations (plants, sculptures, clocks, etc.). The final bookshelf can be exported as:
An image for social media — to share reading lists with friends.
A printable PDF — which includes covers that can be folded into mini 3D books for a DIY project.
The project is part of my ongoing DaliCollab initiative: creating fun, collaborative, and shareable experiences that blend UX design, technology exploration, and creative outcomes.
React, Tailwind, Bolt.new, Cursor AI, Cloudflare Workers (Client + Server), Google Books API, Design: Figma (mockups, components)
This project had two main goals: Experiment with new technologies like Bolt.new, Cursor AI code agents, and Cloudflare Workers to test how AI and automation can speed up frontend development. Apply UX principles to transform a functional bookshelf builder into a delightful, customizable, and sharable experience.
The project began in Bolt.new, where I quickly prototyped a clean, stylish design and structured the bookshelf layout.
Code + API Integration (Cursor):
Once it was time to connect to APIs, I moved the project to Cursor, leveraging AI code agents to accelerate development.Backend Architecture (Cloudflare Workers):
I already had an MCP (multi-cloud pattern) system set up on Cloudflare. For this project:The server worker connects to the Google Books API.
The client worker acts as a secure intermediary, exposing only safe endpoints to the app.
This layered setup improves security and organization of external API calls.
User Experience:
The UI gives users freedom to decide how their bookshelf looks. Each book can be shown as a cover or a spine, with drag-and-drop positioning and z-index control for stacking. Decorations add personality and fun.
Allowing drag-and-drop freedom risked making the UI feel overwhelming.
Solution: limited to 12 books per shelf and guided positioning while still letting users customize layout and z-index.
Consistent Shelf Design
Early versions had uneven shelf heights.
Solved with a grid-based layout ensuring equal shelf spacing while keeping visual variety.
API Restrictions (Google Books)
Google Books API has usage quotas and required secure handling of keys.
Solved by implementing the client-worker / server-worker architecture for safe external calls.
AI Code Assistance
While AI tools like Bolt.new and Cursor were powerful, they sometimes produced verbose or incorrect code.
Required a human-in-the-loop approach: I guided the AI outputs, corrected logic, and shaped the UX.
Delivered a working app that blends reading culture, personalization, and DIY creativity.
Gave users two outputs:
Digital sharing (social media image).
Physical making (PDF for 3D mini-books).
Showcased how AI code agents and worker-based APIs can be applied in a secure, user-centered product.
