https://github.com/inna-b10/links

The "Links" project scrapes specified YouTube channels for the latest video title, ID, and thumbnail (without using the YouTube API). It also retrieves dynamic data such as links and the About description from an API. Data is fetched at build time with revalidation to ensure it stays up-to-date.
https://github.com/inna-b10/links

axios clsx html-react-parser next project react-dom react-query sass tailwind

Last synced: 15 days ago
JSON representation

The "Links" project scrapes specified YouTube channels for the latest video title, ID, and thumbnail (without using the YouTube API). It also retrieves dynamic data such as links and the About description from an API. Data is fetched at build time with revalidation to ensure it stays up-to-date.

• Host: GitHub
• URL: https://github.com/inna-b10/links
• Owner: Inna-B10
• Created: 2024-09-08T21:13:22.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-12-30T13:09:11.000Z (over 1 year ago)
• Last Synced: 2025-06-30T23:02:06.397Z (10 months ago)
• Topics: axios, clsx, html-react-parser, next, project, react-dom, react-query, sass, tailwind
• Language: JavaScript
• Homepage: https://project-links-innab10.netlify.app/
• Size: 469 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Project name: Links

### 💎 Description

[](preview.png)

- This project fetches and displays data from **YouTube** channels (**latest video title**, **ID**, and **thumbnail**) by scraping HTML content (without using the YouTube API).

- It also retrieves and shows **dynamic data** (links and "About" description) from an **API**. The data is fetched at build time, and revalidation ensures it stays up-to-date.

- The app provides a clean, responsive interface using `Next.js` and `Tailwind CSS`, deployed on **Netlify** for easy access.

### 🧩 Tech Stack

![Next.js](https://img.shields.io/badge/Next.js_14.2.8-424242?logo=nextdotjs)

![React](https://img.shields.io/badge/React_18-424242?logo=react&logoColor=61DAFB)

![axios](https://img.shields.io/badge/axios_1.7.7-424242)

![@tanstack/react-query](https://img.shields.io/badge/%40tanstack%2Freact--query_5.55.4-424242?logo=reactquery)

![tailwindcss](https://img.shields.io/badge/tailwindcss_3.4.1-424242?logo=tailwindcss&logoColor=06B6D4)

![react-dom](https://img.shields.io/badge/react--dom_18-424242?logo=react&logoColor=61DAFB)

![html-react-parser](https://img.shields.io/badge/html--react--parser_5.1.15-424242)

![gh-pages](https://img.shields.io/badge/gh--pages_6.1.1-424242?logo=github&logoColor=white)

![clsx](https://img.shields.io/badge/clsx_2.1.1-424242)

![sass](https://img.shields.io/badge/sass_1.78.0-424242?logo=sass&logoColor=CC6699)

![postcss](https://img.shields.io/badge/postcss_8-424242)

🗃 Dependencies


```bash

# Dependencies

npm install @tanstack/react-query

npm install axios

npm install clsx        # conditionally className

npm install html-react-parser

npm install next

npm install react

npm install react-dom

npm install sass

# Dev Dependencies

npm install --save-dev eslint

npm install --save-dev eslint-config-next

npm install --save-dev gh-pages

npm install --save-dev postcss

npm install --save-dev tailwindcss

```

### 🚀 [View demo](https://project-links-innab10.netlify.app/)