Building a ‘Read It Later’ App for my digital highlights: A Step-by-Step Guide

3 min readSep 2, 2024

I love to revisit my Kindle highlights, but the native experience is limited and it lacks a neat UI. In this guide, I’ll walk you through the process of building a ‘Read It Later’ app using Vue.js.

The question is, did I knew to code in Vue.js before? Answer is, NO.
This project, which I call Swotor, is a testament to how we can create something influential without much knowledge of a technology.

Step 1: Create a UI

The laziest way to create a UI is to copy one. I used an open-sourced Vuejs template. This helped me kickstart a project without any hustle to setup from scratch. And without overwhelming myself with a bunch of new terms and fundamentals.

For this project I used the below free template — you can browse through the website to see what fits your needs. I deleted a lot of unwanted views and kept the ones that I saw fit.

https://madewithvuejs.com/giraffe

Step 2: Designing the Data Structure

For storing the data, we’ll fall back to Google Sheets as our database. Create a new Google Sheet with columns for ‘book title’, ‘highlight’, ‘date’, and ‘page number’. This sheet will store all your Kindle highlights.

The Google sheets API brings in a couple of limitations,

The use of filters is not supported in the API.
The number of cells are limited to a couple of millions.

But these things can be over looked for our use case.

Step 3: Fetching Data from Google Sheets

To fetch data from Google Sheets, we’ll use the Google Sheets API. Set up API credentials in the Google Cloud Console and note down your API key. Then, create a new file src/services/googleSheets.js:

import axios from 'axios';
const API_KEY = 'YOUR_API_KEY';
const SHEET_ID = 'YOUR_SHEET_ID';

export default {
  async getHighlights() {
    const response = await axios.get(`https://sheets.googleapis.com/v4/spreadsheets/${SHEET_ID}/values/A:D?key=${API_KEY}`);
    return response.data.values;
  }
};

Step 4: Stitch in the data APIs

We already have a UI setup and we have our data ready. Now we can stitch these two things together to make a workable reading experience. Below is the how the Highlights.vue looks like.

<template>
  <div>
    <v-row>
      <v-col cols="12" lg="8" xl="8" v-for="(item, index) in records" :key="index" >
        
        <div class="pl-2 pr-2">

          <div v-if="index == 0" class="text-h5 primary--text pt-4">
            {{item.book_name }}
          </div>

          <div>
            <p class="text--secondary">
              Page: {{ item.page_number }}
            </p>
          </div>

          <div>
            <p class="primary--text font-weight-medium">
              {{item.body }}
            </p>
          </div>

        </div>

      </v-col>
    </v-row>
  </div>
</template>

Step 5: Adding Kindle Highlights

To add your Kindle highlights to the Google Sheet:

Export your Kindle highlights (you can usually find them in a “My Clippings.txt” file on your Kindle).
Parse this file (you might need to write a small script to do this).
Add the parsed data to your Google Sheet.

The screenshot of the elegant reading experience in the app.

Step 6: Hosting the App

There are a couple of deployment Saas options available like Vercel and Netlify. The hobby deployments on these providers are free.

Conclusion

And there you have it! A simple ‘Read It Later’ app for your Kindle highlights using Vue.js. This app provides a clean interface to revisit your favourite book passages anytime.

If you have to leave with one takeaway — don’t limit yourself to what you know and find lazy ways to do what you don’t.