Making quote cards as easy as pasting a link
Built an image editor service that makes it easy to share a nice looking text quote card from any website. It leverages the "copy link to highlight" feature released in all chromium browsers in 2021.
How it works:
- Highlight any text on a page
- Right click and select copy link to highlight
- Paste the link your clipboard in the text box
The app will crawl the page to confirm the text was highlighted there. It will grab an image from the page and the full text and make it into a card.
Try Demo Example #1Card Creator:https://highlights.page/FUMk/template
Try Demo Example #2 Card Creator: https://highlights.page/5ZZQq/template
Frontend
- Vue/Nuxt
- Bulma CSS
- KonvaJS image editor
Backend
- Express for API endpoints
- PostgreSQL for DB (hosted on AWS RDS)
- APILayer Scraper API Starter Plan (crawl the source and confirm the highlighted text is on the page)
- Images saved on Azure Blob storage and distributed through AWS CloudFront CDN.
Full size: https://www.awesomescreenshot.com/image/33768589?key=e2b492b3e9b5310ebd297fb89ea6d9d8
Full page screenshot: https://www.awesomescreenshot.com/image/33769407?key=bba639ed10870b37287bd68c7f17191f
