Header Footer Web Scraper

Overview Built a React app that shows parts of other websites.

Made a script using Puppeteer in Node.js to grab the header and footer from websites, including their styles, and save them as files.

Then, our React app uses this info to display these parts just like on the original site.

Scraping with scrape.js and Puppeteer Grabbed the top and bottom parts of a website, including how they look. Used Puppeteer to browse the web and do the job. Two files with the content and styles.

React Components Content Components: Show the header and footer. Style Components: Make sure they look right.

Fetching Data at Runtime vs. Direct Import Direct Import: The app knows about the files from the start but it’s rigid. Fetching at Runtime: Grabs files on the go, more flexible.

Public Directory A place to put files so the app can use them while running. Using useState and useEffect in React useState: Keeps track of data, like the grabbed content. useEffect: Does stuff when the app starts, like grabbing data. App.js Where everything comes together, showing the header and footer like the original.

Built With

• javascript
• react