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.
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
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 ofgiven_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"
I am using Netlify Dev for development, with my Netlify account.
yarn install
# requires netlify dev to be globally installed
yarn dev
yarn build
# requires app to be running locally at localhost:8888
yarn test
yarn lint