05. Build a RSS Feed with React and Node.js || Learn React Through Mini Projects

Want to know how to build your very own Feedly, processing RSS XML files and transforming it into JavaScript objects to be displayed with React?

Let’s go!

Repo:
Frontend: https://stackblitz.com/edit/react-qlq...
Backend Server: https://stackblitz.com/edit/react-qlq...

Learn React Playlist:
   • Learn React Through Mini Projects  

Next.js (TypeScript + App Router) and Tailwind CSS Playlist:
   • Learn Next.js + TailwindCSS In Components  

01. Build a stopwatch/count-up timer: (   • 01. Stopwatch/Count-Up Timer || Learn Reac...  )
02. Build a to do board: (   • 02. To Do Board || Learn React Through Min...  )
03. Build a task tracker: (   • 03. Build a Kanban-Style Task Tracker || L...  )


Timestamp:
00:00 - Start
00:32 - Set up frontend (React)
01:44 - Set up backend server (Node, Express, CORS)
04:10 - Backend RSS Parser
09:40 - Frontend retrieval of data
21:11 - The end

What is RSS?
https://rss.com/blog/how-do-rss-feeds...
RSS stands for Really Simple Syndication. It refers to files easily read by a computer called XML files that automatically update information.

This information is fetched by a user’s RSS feed reader that converts the files and the latest updates from websites into an easy to read format. An RSS feed takes the headlines, summaries, and update notices, and then links back to articles on your favorite website’s page.

This content is distributed in real time, so that the top results on the RSS feed are always the latest published content for a website.

An RSS feed allows you to create your own customized eZine of the most up-to-date content for the topics and websites you are interested in.

Node
https://developer.mozilla.org/en-US/d...

Node (or more formally Node.js) is an open-source, cross-platform runtime environment that allows developers to create all kinds of server-side tools and applications in JavaScript. The runtime is intended for use outside of a browser context (i.e. running directly on a computer or server OS). As such, the environment omits browser-specific JavaScript APIs and adds support for more traditional OS APIs including HTTP and file system libraries.

Express
https://developer.mozilla.org/en-US/d...

Express is the most popular Node web framework, and is the underlying library for a number of other popular Node web frameworks. It provides mechanisms to:

Write handlers for requests with different HTTP verbs at different URL paths (routes).
Integrate with "view" rendering engines in order to generate responses by inserting data into templates.
Set common web application settings like the port to use for connecting, and the location of templates that are used for rendering the response.
Add additional request processing "middleware" at any point within the request handling pipeline.

CORS
https://developer.mozilla.org/en-US/d...

Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources.

An example of a cross-origin request: the front-end JavaScript code served from https://domain-a.com uses XMLHttpRequest to make a request for https://domain-b.com/data.json.

Nodemon

Nodemon is a command-line tool that helps with the speedy development of Node.js applications. It monitors your project directory and automatically restarts your node application when it detects any changes. This means that you do not have to stop and restart your applications in order for your changes to take effect.

*Axios*
Promise based HTTP client for the browser and node.js

Why use Axios over fetch()?
https://blog.logrocket.com/axios-vs-f...