ShelfIt
ShelfIt: A Personalized Media Shelf App
Overview
I’m excited to share my latest project, ShelfIt—a web application designed to help users organize, track, and engage with their favorite books, and soon to be other media. ShelfIt was built with Laravel, Sail, and Vue 3 (initially using the Options API but later transitioning to the Composition API for its simplicity). This app uses Tailwind CSS for styling and a customized validation system that I implemented to deepen my understanding of Laravel.
Features
Book Search and Database Integration
One of the standout features of ShelfIt is its integration with the Google Books API. Users can quickly search for books, and the app first checks the local database for results to ensure faster performance. If nothing is found, it then queries the Google Books API to find the requested titles. The books found in the Google API are then added to the local database. This dual-search approach minimizes wait times and enhances the user experience.
User Shelf Management
Users can easily add searched books to their personal shelves, where they can:
- - Rate books based on their reading experience.
- - Add comments to provide personal insights or notes.
- - Update reading status and specify the dates they started and finished each book.
My database currently includes a users table, a books table, and a many-to-many relationship table (book_user). This setup allows for flexible user-book relationships, making it easy to manage user-specific data.
Custom Sorting and Drag-and-Drop
A unique aspect of ShelfIt is the ability for users to drag and drop their books on the shelf page to reorder them according to their preferences. This order is persisted in the database through a sort-order column in the book_user table. Additionally, users can use a dropdown menu to sort their shelves by custom fields, such as:
- - Title (A-Z)
- - Author
- - Rating (High-Low)
- - Finished Reading
To prevent confusion, I implemented a restriction that disables the drag-and-drop feature when either the search or dropdown sorting is active, ensuring that the custom order remains intact.
Debounce Search Functionality
The search functionality in ShelfIt is powered by lodash's debounce method, which optimizes performance by limiting the number of search requests sent to the server as the user types. This results in a smoother and more responsive search experience.
Modular UI with Popup Modals
I’m particularly proud of how most transactions in ShelfIt are handled through popup modals. Thanks to Vue’s component architecture, creating these modals was incredibly easy. Users can perform actions from authentication to adding a book, rating it, or leaving comments without navigating away from their current view, making for a seamless user experience.
Future Enhancements
While the initial focus of ShelfIt is on books, I have plans to expand the application to include other media types, such as movies and games. I’m also aiming to introduce an "On the Table" section, allowing users to display what they are currently reading, watching, or playing. This addition will create a more holistic media-tracking experience.
Testing with TDD
Throughout the development of ShelfIt, I employed Test-Driven Development (TDD) using PHPUnit. This approach not only ensured that the application met its functional requirements but also improved the overall code quality. Writing tests first allowed me to clarify the app's behavior and prevent potential bugs before they could become an issue.
Conclusion
ShelfIt has be an excellent breakable toy to practice both Laravel and Vue fundamentals and I'm excited for future enhancements of this project. Stay tuned for updates, and I look forward to hearing your thoughts on ShelfIt!