Shelf Share: A Personal Space for Book Lovers to Find and Share Reads

Have you ever had a great collection of books but couldn’t find an easy way to share it with your fellow readers? Did you ever struggle with organizing books or collections of books without creating a mess?

If your answer is yes, then shelf share comes to your rescue!

💡The Idea

I always struggle with reading books, but I keep searching for good ones. Since I spend most of my time on my laptop, I search for books online. Unfortunately, I have never found a place that provides me with a good UI/UX experience.

If the user experience and interface are bad, it's easy for someone who already struggles with reading books to step back from searching for one.

Also, there wasn’t a place where one could save books or create collections of similar books and share those. After asking for recommendations from my peers, those recommendations got lost in chats as there was no single platform to keep them saved.

Hence, I thought of making a place that would allow its users to explore books, save them, and share them!

📝An overview

Shelf Share is a web app that allows you to find books, create collections of books, save books and collections, and share them, all under one roof!

The main focus of the web application includes:

• Providing an intuitive user interface: One that is easy to understand and feels natural to use.

• Providing a smooth user experience: All the functions work seamlessly in a logical flow and respond quickly.

• Creating a calm environment: Bright colors and rounded elements, create a calm environment to match a reader’s vibe.

📋Features

• Quick search: You can search directly from the homepage.

• 

  Search suggestions: Upon search, you get book title suggestions.

• 

  Search filters: A quick way to search by categories.

• 

  Bookmark and share: You can save a book to bookmarks and share it to your desired app, or just copy the URL. You can also directly share with X. You can also know more about a book by opening it with Google Books.

• 

  Create collections: You can select books and make a collection of books. The bookmarked books and saved collections can be found under the ‘Book Shelf’ tab.

• 

  Book shelf: All your saved bookmarks and collections under one tab.

• 

  

  Share collections: You can view, delete, and share individual collections as per your choice.

• 

You can also look at the demo video here:

🔧The process

• Since my first concern was the UI and UX, I started exploring similar platforms that provide similar features to find areas of improvement. I used excalidraw and Figma to design my layouts and SVGs. After rejecting many of those designs, I finally selected one that creates a calm environment since readers have calm minds!

• After that, I used Notion.so to brainstorm the features and the data flow of the overall project.

• For my codebase, I did some basic setup with tools like eslint, stylelint, Husky, commitlint, etc. I also set up Parcel to help me with the bundling process.

Selecting the tech-stack

Since this is my first fully functional web-dev project, I focused on the front end mainly for simplicity.

I decided to build it with vanilla JS to strengthen my fundamentals with practice. Since I was not using any frameworks, I decided to not use Tailwind or Bootstrap either. I chose to write and manage my own CSS.

Below you can find the list of languages and tools that I used in this project.

• JavaScript

  • To build the front end and manage the data flow.

• Sass

  • CSS preprocessor to help in managing and maintaining CSS.

• SVG

  • For creating scalable, responsive images.

  • Easy to manipulate properties like colors to match the overall theme.

  • Small file size with a sharp and clear display.

• .webp image format

  • Image format that maintains a high quality of images while keeping a small file size.

• Figma

  • To edit the SVGs, such as changing the colors, extracting specific parts of SVGs, and creating new components by combining different SVGs

• Parcel

  • Provides a development server to host the application locally during the development phase.

  • Provides hot module replacement that enables Parcel to automatically update modules during runtime.

  • Acts as a bundler that compresses the final code during the build process.

  • Performs cache busting, which means it adds a unique hash to the compressed files, which only changes if the file content changes. Browsers are forced to fetch new files only when the content is changed, ensuring older versions are never stored in the browser’s cache.

  • The final build is optimized for fast performance on the client side.

• Vercel

  • A free web hosting service to deploy my web application.

• Git

  • Provides a local version control system. Used GitHub to host and manage the repository on the cloud.

• Supabase

  • A database to remotely store a collection’s data, providing centralized access for sharing collections.

  • I also used local storage to store data. Supabase is only used to store collection data for the sake of URL shortening.

• MVC Architecture

  • Keeps the code and the data flow clean and organized.

  • Model: Represents the application's data and business logic. It is like the brain of the application.

  • View: Responsible for the user interface (UI) and presenting the data to the user. It is like the face of the application.

  • Controller: Acts as an intermediary between the Model and the View. It is like a traffic controller.

• Lint Tools:

  • ESLint: Used for javascript, it identifies patterns that can create bugs and helps in following good practices for writing code.

  • Stylelint: Used for CSS, does a similar job to ESLint but for CSS files.

  • Commitlint: Used for git commit messages (version control system), enforcing certain rules, and helping in following the conventions for writing good commit messages.

• Code Formatters:

  • Prettier: Provides a consistent code style across the code base.

• Other Tools:

  • Husky: To help with automating the lint process.

  • Lint-staged: To run lint tools only on the files that you worked on (added in git’s staging area).

You can check out the blog below to learn more about my dev tools setup.

• A Complete Guide to Setting Up Dev Tools for Vanilla JavaScript Projects: Part 1

Challenges

I faced a lot of challenges during the development of this project, and through them, I got to learn a lot of new things.

I had to manually address those challenges since there was no magic wand of frameworks like react that would Avada Kedavra a few obstacles for me.

1. Handling the Data

I had to find a way to ensure that the data flow of my project was organized. Since there was no framework, I had to do it on my own. A framework would keep the flow of data in one direction by implementing some architecture internally and keep the UI updates efficient.

This is where the MVC architecture helped me, the one discussed earlier in the “Selecting the tech-stack” section. I could handle my data with simplicity following this architecture.

This significantly helped me avoid creating messy code and kept my workflow smooth.

2. Navigation

Since I was building a single-page application, routing was a big concern. There was no magical react-router for me to handle my routes. I created a router that handled all my routing logic. For example, a function to navigate to another page looked like this:

 navigateTo(path) {
// Add path to browser's history
    window.history.pushState('', '', path);
// Handle query params
    const splitPath = path.split('?');
    if (splitPath.length > 1) {
      path = splitPath[0];
    }
// Another method called _loadRoute to load the route
    this._loadRoute(path);
// Scroll to the top of window when loading a new route
    window.scrollTo({
      top: 0,
      left: 0,
    });
  }

The above code shows the navigateTo function of my router that I used to navigate to different routes.

I hope this gives you an idea, but if you want to learn more about it, you can check out this blog I wrote specifically about this router.

• Creating A Router In Vanilla Javascript

3. Handling the URLs

Handling the URLs was also a crucial task. From searching for books to navigating to saved collections, handling those URLs was important. Navigation was handled by the router, and for data, I used query parameters.

• For searching, I decided to store the searched data, such as the query and the category, in my URL so that upon navigating back to the search page, the user can see their last searched item. Also, users can directly share their search results page via the URL in their browser after performing a search.

• For collections, at first, I stored all my collection data in the URL itself. Meaning, that when opening an individual collection, it would take all its data from the URL. This was done since my collections were shareable, and I had to find a way to share all the books inside a collection.

• But that created a very long, ugly-looking URL. Below is an example.

  • /collection?id=1736684424738&collectionName=After&books=%25255B%25257B%252522id%252522%25253A%252522vIlOBAAAQBAJ%252522%25252C%252522rating%252522%25253A4%25252C%252522image%252522%25253A%252522http%25253A%25252F%25252Fbooks.google.com%25252Fbooks%25252Fcontent%25253Fid%25253DvIlOBAAAQBAJ%252526printsec%25253Dfrontcover%252526img%25253D1%252526zoom%25253D1%252526source%25253Dgbs_api%252522%25252C%252522title%252522%25253A%252522After%252522%25252C%252522authors%252522%25253A%25255B%252522Anna%252520Todd%252522%25255D%25252C%252522bookmarked%252522%25253Afalse%25252C%252522selected%252522%25253Afalse%25257D

  • This contains just one book, imagine how long it would be with 10 books. This was a disaster for my sharing feature.

  • Apps like WhatsApp broke my URL since it was too many words, some apps wouldn’t even allow sending the whole URL due to its length if a collection had too many books.

  • 

    You can notice the “Read more” option in the bottom right corner of the message above.

This brings us to the fourth challenge.

4. Making the shared collection’s URL shorter

Although this was the last challenge I addressed, I am putting this here since it aligns with Challenge 3. I had to find a way to store the data somewhere else rather than the URL. I couldn’t use the local storage since the data had to be accessible on both the sender’s and receiver’s sides.

I needed a storage place accessible from anywhere on the internet without adding much complexity to the project, so I chose to use a BaaS, Supabase.

To shorten URLs, I used the Web Crypto API and stored my URL mappings in Supabase.

5. Handling the state of my application

I had to manage the state of my application to provide faster interface changes, on my own, since there was no framework involved. I had to ensure that when there is an update in the UI, only the necessary parts of the DOM get updated, not everything.

Thanks to Jonas Schmedtmann’s course The Complete JavaScript Course 2025: From Zero to Expert! on udemy, I was able to implement a special update method in my parent View class so that all the child view classes can access it. This method compares the new DOM elements with the current DOM elements and updates only the ones that are different.

update(data) {
// Checks if data is unavailable or if it's an empty array; returns error
    if (!data || (Array.isArray(data) && data.length === 0)) return 'error';
    try {
      this._data = data;
// Generating the new markup with the updated data
      const newMarkup = this._generateMarkup();
// Creating a light-weight DOM-like structure using the new markup string 
// To perform faster manipulation
      const newDOM = document.createRange().createContextualFragment(newMarkup);
// Converting all the elements of the new and the current DOM to arrays
      const newElements = Array.from(newDOM.querySelectorAll('*'));
      const curElements = Array.from(this._parentElement.querySelectorAll('*'));

// Iterating over new and current DOM
      newElements.forEach((newEl, i) => {
        const curEl = curElements[i];
// Checking if the new DOM element and current DOM element are different
// Also checking if new DOM's text node is non-empty without whitespaces
        if (
          !newEl.isEqualNode(curEl) &&
          newEl.firstChild?.nodeValue.trim() !== ''
        ) {
// Updating the text content witht the changed DOM element's content
          curEl.textContent = newEl.textContent;
        }

        if (!newEl.isEqualNode(curEl)) {
          Array.from(newEl.attributes).forEach(attr =>
// Updating attributes with the changed DOM element's attributes
            curEl.setAttribute(attr.name, attr.value),
          );
        }
      });
    } catch (err) {
      console.error(err);
    }
  }

6. Storage

Since I was providing the feature of saving books and collections, this data had to be persistent. Meaning, that on page reloads or at the start of a fresh session, this data should not disappear.

Since I wanted to keep everything focused on the front end, I chose to utilize the browser’s local storage to handle this data.

I used a database only to store shared URL data since that could not be handled, just on the front end, without creating a long, messy URL.

7. OG Image

OG image stands for Open Graph Image. It is the image that is shown along with the URL when it is shared.

I needed a place to store it where it would be publically accessible. I couldn't store it only on my project’s GitHub repository, as if it were to be private for some reason, then my OG image would become inaccessible.

As I was using Parcel to bundle and compress my files, it was adding a unique hash to my OG image’s name each time the project was built, making it impossible to access it as a static resource directly from my website.

I wanted to tell Parcel not to add any hash in front of my OG image’s file name so that I can access it as a static resource. I achieved this by creating a public folder and specifying its handling in my build script. Parcel does not affect the files that are present in the public folder present in the root of the project.

This way, I was able to access my OG image as a static resource.

8. Google Books API

There were two challenges that I had to face with Google Books’ API - Rate limit handling and branding.

1. Rate Limit Handling

   • There is an allowance of 1000 free calls per day from the API. I provide suggestions below the title bar when a user performs a search. This means for every letter a user types, one request will be sent to the API to fetch the suggestions.

   • Considering this, 1000 calls might get exhausted sooner than planned.

   • I handled this by implementing debouncing. Debouncing is a technique that is used to limit the number of times a function is invoked. I implemented my suggestions function in such a way that it will only send the request after 3 or more letters are present in the input field.

   • I set the debouncing delay to 300ms. This means that when a user pauses for 300ms or more after typing something in the input field, only then the suggestions will be fetched. This significantly helped me to reduce the number of calls per user.

   • 

export const debounce = (cb, delay = 300) => { 
    // Stores the timeout ID 
    let timeout; 
    return (...args) => { 
        // Clears any timeouts that were queued within the period of the specified delay
         clearTimeout(timeout); 
        // Storing the timeout ID and calling the callback function after the delay 
        timeout = setTimeout(() => cb(...args), delay); 
        }; 
    };

2. Branding

   • I wasn’t aware of the fact that we need to follow some branding rules when deciding to integrate Google’s API until I read it in the API documentation.

   • There were specific rules, for example, showcasing an powered by Google icon near search bars, or following naming conventions when prompting users for action that results in an API query. You can check the documentation here to learn more about it.

   • I read through the documentation and adjusted my UI to reflect those conventions. For example, I had to insert the powered by Google icon next to my search bars.

   • 

These were all the major challenges that I faced. Through them, I got to learn a lot of new things. You really cannot learn a lot of things if you do not practically work and face challenges.

🔮Future Improvements

Collections:

• Editable Collections: Right now database is only being used for storing a map of the short ID and the collection data. Further modifications can be implemented to allow the collections to become editable.

• Collections from bookmarked books: Allow the creation of collections directly from the bookmarked books.

Search:

• Advanced Filters: More search filters can be provided, such as filtering results between books, journals, free e-books, and paid e-books.

• Pagination: Search results can be divided into pages by implementing pagination. This will show fewer books at a time, making browsing the content easier.

Books:

• Book Preview: Book previews can be made available directly into the web application by using the Embedded Viewer API from the Google Books API Family.

🚀 Check out the project

Here’s the project you have been reading about all this time. Please do check it out and I would love to hear your feedback and suggestions on it!

📚 Shelf Share: Search, Share, and Bookmark Books

Here is the GitHub repository for this project if you are interested in the source code. Please do star it if you like it!

⭐ Shelf Share's Git Hub Repository

✅Conclusion

Building this project was challenging but fun. I got to learn a lot of new things throughout the whole process, which I will be sharing in my other blogs, which will have more focus on the technical aspects of this project.

I hope you find my project useful and can use it to make your book-reading experience more fun.

Feel free to share any feedback or suggestions in the comments. I would love to hear your thoughts on my project!