I'm working on a student portal using React, and I'd like to display announcements or updates from my university's website — Sabaragamuwa University of Sri Lanka.
The idea is to pull news or notices automatically and show them inside the portal, but I noticed the site doesn’t have an API or RSS feed. Here's what I've tried or thought about:
Using an iframe to embed part of the homepage — but it doesn’t look great and isn’t responsive.
Writing a Node.js script to scrape data, though I’m not sure if it’s the best or safest option.
Hoping there might be some existing tools or workarounds.
What’s the best way to fetch and display updates from a site like this in a React app? Would love to hear your ideas or past experiences!
Answer
If the website doesn’t offer a public API or RSS feed (like in the case of Sabaragamuwa University), here are a few approaches you can try:
Server-side scraping: Use a tool like axios with cheerio or puppeteer on the backend to fetch and parse the content you want. Then serve that data to your React app through a custom API route.
Embed with iframe (if necessary): This can be a quick solution, but like you said, it's often not responsive or clean. Still, it works for quick demos.
Reach out to the web team: If you’re affiliated with the university, consider asking them to provide an RSS feed or API. Universities often respond positively to student-led tech improvements.
Workaround with a CMS: If this is just a project, you could manually input announcements into something like Firebase or a simple CMS so you have full control over the content shown.
Hope that helps! Let me know if you want help setting up a scraping function or backend route.