Sleepytime Youtube

F 46 completed
Web App
web_app / typescript · small
57
Files
5,094
LOC
3
Frameworks
5
Languages

Pipeline State

completed
Run ID
#358021
Phase
done
Progress
1%
Started
Finished
2026-04-13 01:31:02
LLM tokens
0

Pipeline Metadata

Stage
Skipped
Decision
skip_scaffold_dup
Novelty
48.80
Framework unique
Isolation
Last stage change
2026-04-16 18:15:42
Deduplication group #48227
Member of a group with 2 similar repo(s) — canonical #2082 view group →
Top concepts (2)
Project DescriptionWeb Frontend
Citation: Repobility (2026). State of AI-Generated Code. https://repobility.com/research/

AI Prompt

Create a pure client-side web application using Next.js and TypeScript that allows users to play a YouTube playlist one video at a time. The main functionality should involve a user pasting a YouTube playlist URL containing a `?list=` parameter. The app needs to extract the `playlistId` and then use the YouTube Data API v3 to fetch and display a list of video titles and thumbnails from the playlist. I want the UI to be responsive and use Tailwind CSS for styling, and it should manage the state of the playlist items using TanStack React Query.
typescript next.js react youtube web-app tailwindcss client-side api
Generated by gemma4:latest

Catalog Information

A client‑side web app that lets users play a YouTube playlist one video at a time.

Description

This web application allows users to paste a YouTube playlist URL and view the playlist’s videos in a clean, dark‑mode interface. It fetches playlist data from the YouTube Data API v3 using a public API key and displays thumbnails, titles, and a sequential play queue. The app is built with Next.js, React, and Tailwind CSS, and it relies on client‑side data fetching via TanStack React Query. It targets casual users and content creators who want a lightweight, distraction‑free way to browse and play playlists without leaving the page. The design is responsive and works on both desktop and mobile browsers.

الوصف

يتيح هذا التطبيق للمستخدمين إدخال رابط قائمة تشغيل من يوتيوب وعرض مقاطع الفيديو في واجهة بسيطة مع وضعٍ داكن دائم. يتم جلب بيانات القائمة من واجهة برمجة تطبيقات يوتيوب Data API v3 باستخدام مفتاح API عام، ثم يتم عرض الصور المصغرة والعناوين في قائمة مرتبة. يعتمد التطبيق على Next.js وReact مع Tailwind CSS لتوفير تجربة سريعة وسلسة على المتصفح. يهدف إلى تسهيل تصفح وتشغيل قوائم التشغيل للمستخدمين العاديين ومنشئي المحتوى الذين يحتاجون إلى أداة خفيفة لا تتطلب تسجيل الدخول أو تثبيت إضافات. يضمن التصميم الاستجابة للهواتف المحمولة وأجهزة سطح المكتب، مع إمكانية التحكم في التشغيل من خلال واجهة المستخدم البسيطة. كما يتيح التطبيق إمكانية إضافة ميزات مستقبلية مثل حفظ القوائم أو مشاركة الروابط عبر نماذج React Hook Form. يركز على توفير تجربة مستخدم خالية من الإعلانات أو الإزعاج، مع الحفاظ على أمان المفتاح عبر قيود المرجع والAPI.

Novelty

5/10

Tags

youtube-playlist-playback client‑side-streaming video-queue-management dark‑mode-interface responsive-ui api-data-fetching playlist-navigation

Technologies

next-auth nextjs radix-ui react tailwind

Claude Models

claude-haiku-4.5 claude-opus-4.6 claude-opus-4.5

Quality Score

F
46.4/100
Structure
50
Code Quality
45
Documentation
36
Testing
0
Practices
73
Security
90
Dependencies
60

Strengths

  • Code linting configured (biome)
  • Good security practices \u2014 no major issues detected

Weaknesses

  • No LICENSE file \u2014 legal ambiguity for contributors
  • No tests found \u2014 high risk of regressions
  • No CI/CD configuration \u2014 manual testing and deployment
  • 5 files with critical complexity need refactoring
  • Potential hardcoded secrets in 1 files
  • 558 duplicate lines detected \u2014 consider DRY refactoring

Recommendations

  • Add a test suite \u2014 start with critical path integration tests
  • Set up CI/CD (GitHub Actions recommended) to automate testing and deployment
  • Add a LICENSE file (MIT recommended for open source)
  • Move hardcoded secrets to environment variables or a secrets manager

Security & Health

16.6h
Tech Debt (D)
A
OWASP (100%)
FAIL
Quality Gate
A
Risk (20)
Want this analysis on your repo? https://repobility.com/scan/
Unknown
License
1.9%
Duplication
Full Security Report AI Fix Prompts SARIF SBOM

Languages

typescript
89.0%
css
4.8%
json
3.9%
markdown
1.5%
javascript
0.7%

Frameworks

React Next.js Turbopack

Concepts (2)

Source: Repobility analyzer (https://repobility.com)
CategoryNameDescriptionConfidence
Generated by Repobility's multi-pass static-analysis pipeline (https://repobility.com)
auto_descriptionProject DescriptionPlay a YouTube playlist one video at a time. Pure client-side Next.js app deployed on Vercel.80%
auto_categoryWeb Frontendweb-frontend70%

Quality Timeline

1 quality score recorded.

View File Metrics

Embed Badge

Add to your README:

![Quality](https://repos.aljefra.com/badge/82156.svg)
Quality BadgeSecurity Badge
Export Quality CSVDownload SBOMExport Findings CSV