Pocket lite

Pocket rebuilt with Vue!

I rebuilt the popular Pocket web application with Vue! Why? For two reasons: for learning and for a more pleasant use of Pocket at work.

For learning

Building this single page application with Vue was a great opportunity to learn and consolidate some knowledge, such as:

• Design web app in Figma before starting coding
• TDD development with Cypress: In the early phases of development I had Cypress opened the whole time to directly test the code every time I saved. It was a great to have tests in place from the beginning. For example, I decided to do a big refactor to Vuex and it was good to have the tests.
• OAuth authentication with Pocket: I used Netlify redirects as a proxy server to communicate with the Pocket API. Thankfully, with Netlify Dev I was able to run the "proxy server" locally.
• Using GitHub Actions for CI

For a more pleasant use of Pocket at work

At my workplace, we have corporate policies in place that restrict the installation of web extensions and the access to some websites (Twitter, Facebook, etc.). The problem is that I often save articles to Pocket from Twitter, but those articles get added under the shorten URL (e.g. Twitter: t.co), which redirects to the original URL. But at work the redirection is blocked. However Pocket also provides a resolved_url to the original article. However to obtain that URL, you need to copy it from the share menu, which is bit cumbersome. That's why I decided to rebuild Pocket to better suit my needs, meaning:

• Keeping only the functionalities I use on a daily basis: adding articles, reading added articles (open a new tab) marking articles as read,
• Open the resolved_url instead of given_url
• Minimalistic (no in-app reader, tags, etc.)
• Show the total number of saved articles
• Easy to add URLs (at work I can't use the web extension to quickly add new articles)
• Easy to reach "Mark as read"

Project setup

I am using Netlify Dev for development, with my Netlify account.

yarn install

Compiles and hot-reloads for development

# requires netlify dev to be globally installed
yarn dev

Compiles and minifies for production

yarn build

Run your end-to-end tests

# requires app to be running locally at localhost:8888
yarn test

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.