README.md

Full-Stack Web Scraping: Link Preview Generator with Vite.js, React, and Node.js

Table of Contents

• Preview
• Step By Step Tutorial
• Features
• Prerequisites
• Project Structure
• Installation
• Run App
• Usage
• Project Goals
• Contact

Preview

This project demonstrates how to create a full-stack application using Vite.js, React, and Node.js to generate link previews through web scraping. The backend utilizes Express.js, Axios, and Cheerio to fetch and parse HTML from URLs, while the frontend is built with React and TypeScript.

Tutorial

Click on Thumbnail to Watch on Youtube

Features

• Vite.js + React: Fast and modern frontend setup with TypeScript support.
• Node.js + Express: Robust backend server for handling API requests.
• Cheerio: Lightweight and fast web scraping with HTML parsing.
• Axios: Fetch content from web pages efficiently.
• Link Preview: Generate dynamic previews including title, description, and images from any URL.

Getting Started

Prerequisites

Ensure you have the following installed:

• Node.js (v14 or later)
• npm, Yarn or pnpm

Project Structure

link-previewer
├── .. vitejs code for reactjs          # Frontend: Vite.js + React
├── server          # Backend: Node.js + Express
└── README.md       # Project Documentation

Installation

1. Clone the repository:

   git clone https://github.com/gkhan205/link-previewer.git
   cd link-previewer

2. Install dependencies for both frontend and backend:

   • Frontend (Vite.js + React):

     npm install

   • Backend (Node.js + Express):

     cd server
     npm install

Running the Application

1. Start the Node.js backend server:

   cd server
   npm start

2. Start the Vite.js React frontend:

   cd ..
   npm run dev

3. Open your browser and navigate to:

   http://localhost:5173
   

Usage

• Enter any URL into the input field, and the application will fetch the link preview, displaying the title, description, and an image if available.

Project Goals

This project is designed to:

• Demonstrate how to set up a full-stack application using modern tools.
• Show the process of web scraping with Node.js and Cheerio.
• Provide an example of integrating a backend API with a React frontend.

Contact

If you have any questions or want to reach out, connect with me on LinkedIn or Twitter.

---

Happy coding! 🚀