{"id":15745582,"url":"https://github.com/gkhan205/link-previewer","last_synced_at":"2025-04-30T04:50:24.836Z","repository":{"id":254794197,"uuid":"847427193","full_name":"gkhan205/link-previewer","owner":"gkhan205","description":"Web Scrapping app with NodeJS and ReactJS which generates Previews of the Link user input like in Social Media Apps","archived":false,"fork":false,"pushed_at":"2024-08-26T05:14:46.000Z","size":235,"stargazers_count":4,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-30T12:41:37.320Z","etag":null,"topics":["axios","cheerio","full-stack-web-development","fullstack-development","link-preview","nodejs","reactjs","web-scrapping"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gkhan205.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-25T19:40:04.000Z","updated_at":"2025-01-25T03:13:39.000Z","dependencies_parsed_at":"2024-08-26T06:36:44.645Z","dependency_job_id":"ce697382-9c64-421f-91f4-7d66ac780048","html_url":"https://github.com/gkhan205/link-previewer","commit_stats":null,"previous_names":["gkhan205/link-previewer"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gkhan205%2Flink-previewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gkhan205%2Flink-previewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gkhan205%2Flink-previewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gkhan205%2Flink-previewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gkhan205","download_url":"https://codeload.github.com/gkhan205/link-previewer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251644827,"owners_count":21620630,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["axios","cheerio","full-stack-web-development","fullstack-development","link-preview","nodejs","reactjs","web-scrapping"],"created_at":"2024-10-04T04:21:02.339Z","updated_at":"2025-04-30T04:50:24.804Z","avatar_url":"https://github.com/gkhan205.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"### README.md\n\n# Full-Stack Web Scraping: Link Preview Generator with Vite.js, React, and Node.js\n\n## Table of Contents\n\n- [Preview](#preview)\n- [Step By Step Tutorial](#tutorial)\n- [Features](#features)\n- [Prerequisites](#prerequisites)\n- [Project Structure](#project-structure)\n- [Installation](#installation)\n- [Run App](#running-the-application)\n- [Usage](#usage)\n- [Project Goals](#project-goals)\n- [Contact](#contact)\n\n## Preview\n\n![Project Preview](image.png)\n\nThis 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.\n\n## Tutorial\n\n[Click on Thumbnail to Watch on Youtube](https://youtu.be/m6T7Bi8OEvc)\n\n[\u003cimg alt=\"Watch the video\" height=\"315\" src=\"https://img.youtube.com/vi/m6T7Bi8OEvc/hqdefault.jpg\" width=\"560\"/\u003e](https://youtu.be/m6T7Bi8OEvc)\n\n## Features\n\n- **Vite.js + React**: Fast and modern frontend setup with TypeScript support.\n- **Node.js + Express**: Robust backend server for handling API requests.\n- **Cheerio**: Lightweight and fast web scraping with HTML parsing.\n- **Axios**: Fetch content from web pages efficiently.\n- **Link Preview**: Generate dynamic previews including title, description, and images from any URL.\n\n## Getting Started\n\n### Prerequisites\n\nEnsure you have the following installed:\n\n- [Node.js](https://nodejs.org/) (v14 or later)\n- [npm](https://www.npmjs.com/), [Yarn](https://yarnpkg.com/) or [pnpm](https://pnpm.io/)\n\n### Project Structure\n\n```bash\nlink-previewer\n├── .. vitejs code for reactjs          # Frontend: Vite.js + React\n├── server          # Backend: Node.js + Express\n└── README.md       # Project Documentation\n```\n\n### Installation\n\n1. **Clone the repository:**\n\n   ```bash\n   git clone https://github.com/gkhan205/link-previewer.git\n   cd link-previewer\n   ```\n\n2. **Install dependencies for both frontend and backend:**\n\n    - Frontend (Vite.js + React):\n\n      ```bash\n      npm install\n      ```\n\n    - Backend (Node.js + Express):\n\n      ```bash\n      cd server\n      npm install\n      ```\n\n### Running the Application\n\n1. **Start the Node.js backend server:**\n\n   ```bash\n   cd server\n   npm start\n   ```\n\n2. **Start the Vite.js React frontend:**\n\n   ```bash\n   cd ..\n   npm run dev\n   ```\n\n3. **Open your browser and navigate to:**\n\n   ```\n   http://localhost:5173\n   ```\n\n### Usage\n\n- Enter any URL into the input field, and the application will fetch the link preview, displaying the title, description, and an image if available.\n\n## Project Goals\n\nThis project is designed to:\n\n- Demonstrate how to set up a full-stack application using modern tools.\n- Show the process of web scraping with Node.js and Cheerio.\n- Provide an example of integrating a backend API with a React frontend.\n\n## Contact\n\nIf you have any questions or want to reach out, connect with me on [LinkedIn](https://www.linkedin.com/in/ghazi-khan) or [Twitter](https://twitter.com/ghazikhan205).\n\n---\n\nHappy coding! 🚀\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgkhan205%2Flink-previewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgkhan205%2Flink-previewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgkhan205%2Flink-previewer/lists"}