Hi guys, how have you been ?
Today I want to show you an app that I created for forem platforms (like dev.to), it’s called Summaryze Forem, it’s an app that will read your post, get all anchors links and create a summary on markdown!
Created a prototype on figma and started working on this.
It’s very easy to use. Just open the app, copy your post url (draft or public post) and paste on url field, after that, just click "Generate" button:
I wanted to create a full stack application with react for this project, I began some tests with express and express-react-views but without success. I thought, “Why not Nextjs ?"
I started creating the web scraper, using Cheerio to manipulate the fetched page and Node-fetch to make the page request and pass the page body to cheerio.
After inspecting a post with Chrome Dev Tools, I see that every anchor link has an "anchor" class so it’s very easy to scrape. After getting all elements, I see that the text with the name of the link is in the parent element, I create two arrays, one to add the link and another for the title.
I make an iteration on all elements and for each, I push the values. Lastly, I create a final array and make a map to format it all using template string.
A special thanks to Thais 💛 for help me write this post!
That’s all! I hope you like it and use it!
Check here the project on github:
Here you can see the figma prototype.
Frameworks and Libs
- Node Fetch
- React Tabs
- React Toastify
- React Icons
How to use it
Check here a quick guide.
Clone the project:
git clone https://github.com/tuliocll/summaryze-forem.git
Navigate to project folder and install dependencies:
cd summaryze-forem yarn #or npm install
Run the project on dev mode:
yarn dev #or npm run dev