In the age of information overload, tools like Instantpaper, Pocket, and Readwise have become essential for managing what we read, save, and revisit. These apps have refined the art of content consumption, but they come with their own limitations—be it cost, proprietary ecosystems, or missing features I personally crave.
This post explores how these tools work, what sets them apart, and my journey towards creating a free, open-source alternative. I’ll also outline my goals, the milestones I’ve set, and some potential challenges to look out for.
The Big Three: Instantpaper, Pocket, and Readwise
1. Instantpaper
Instantpaper is a no-frills, minimalist tool for saving articles to read later. It excels at:
- Providing a clean reading experience by stripping unnecessary formatting.
- Offering offline access, which is great for on-the-go readers.
- Remaining lightweight and easy to use.
However, its simplicity can feel limiting for users seeking advanced categorization or integration with other tools.
2. Pocket
Owned by Mozilla, Pocket takes the “read-it-later” concept to the next level. Key features include:
- Cross-platform sync: Articles and videos can be saved and accessed across devices.
- Tagging and organization: A step up from Instantpaper for categorizing saved content.
- Content recommendations: Pocket introduces users to new reads based on their interests.
Despite its robust feature set, Pocket’s premium subscription can feel like a barrier for casual users.
3. Readwise
Readwise isn’t a read-it-later tool per se; instead, it focuses on making what you read stick. It does this by:
- Importing and organizing highlights from Kindle, Pocket, and more.
- Using spaced repetition to resurface key takeaways.
- Offering robust export options for note-taking apps like Notion and Obsidian.
Readwise is an invaluable tool for those serious about knowledge retention, but its subscription-based model might not suit everyone.
Why Build a Free Alternative?
While I appreciate what these tools offer, I often found myself wishing for a solution that combined their best features without the paywalls or proprietary lock-ins. Here’s what I set out to achieve:
My Vision
- Seamless Saving and Reading:
Like Instantpaper, I want a clutter-free reading experience with offline access.
- Efficient Organization-
Borrowing from Pocket, tagging and categorization will be essential.
- Highlighting and Recall:
Inspired by Readwise, I aim to incorporate highlighting and spaced repetition, but for free.
My Roadmap and Goals
MVP (Minimum Viable Product)
- Article saving (via URL).
- A clean, distraction-free reader.
- Local tagging and search functionality.
Offline Support
- Enable offline reading and storage, ensuring accessibility anywhere.
Highlighting and Notes
- Add the ability to highlight passages and attach personal notes.
Spaced Repetition
- Develop a lightweight algorithm to resurface saved highlights over time.
Third-Party Integrations
- Integrate with popular tools like Notion and Obsidian for export options.
Mobile App
- Create native apps for iOS and Android, emphasizing a seamless user experience. (but this is at the end of my backlog for sure)
Challenges to Watch Out For
Data Storage and Privacy
- Ensuring user data is securely stored and private, especially in the open-source context.
Sustainability
- How do I keep this project alive and updated without a monetization model?
User Experience
- Balancing feature richness with simplicity to avoid overwhelming users.
Community Contributions
- Managing contributions, code quality, and feature requests in an open-source ecosystem.
Building the Frontend: Next.js with shadcn
To bring my vision to life, I decided to build the frontend using Next.js.
For the UI layer, I chose shadcn, a library that provides a clean and modular approach to component design while supporting a customizable aesthetic.
Setting Up the Base Template
Before diving into the core functionality, I established a foundation to ensure scalability and ease of maintenance. Here’s a quick overview of my setup process:
Initializing the Project:
I bootstrapped the project using create-next-app, which provided a solid base with TypeScript enabled for better type safety and development experience.
npx create-next-app@latest my-reading-app --typescript
Integrating shadcn:
Adding shadcn allowed me to leverage pre-designed components while maintaining flexibility to customize them. I started by installing it and setting up the required configuration:
I then structured my components directory to align with shadcn’s modular philosophy, enabling seamless updates and scalability.
-
Tailwind CSS:
- For styling, Tailwind CSS is the backbone of the project, and it integrates beautifully with both Next.js and
shadcn.
npm install tailwindcss postcss autoprefixer
- The base configuration ensures responsiveness and a modern aesthetic out of the box.
Whats Next?
With the base functionality taking shape, here are my next steps:
Highlighting and Notes:
Adding the ability to highlight text within saved articles and attach notes.
Spaced Repetition Algorithm:
Developing a lightweight algorithm for resurfacing key highlights, inspired by Readwise.
Progressive Web App (PWA) Support:
Enabling offline functionality and push notifications by transforming the app into a PWA.
Open-Sourcing the Project:
Preparing the codebase for public release, including comprehensive documentation to encourage community contributions.