https://github.com/auyxs/youtube-clone

YouTube clone built with SvelteKit
https://github.com/auyxs/youtube-clone

clone-website dummyjson frontend javascript localstorage svelte sveltekit youtube

Last synced: about 2 months ago
JSON representation

YouTube clone built with SvelteKit

• Host: GitHub
• URL: https://github.com/auyxs/youtube-clone
• Owner: Auyxs
• License: mit
• Created: 2024-12-21T22:34:57.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-01-24T17:24:21.000Z (over 1 year ago)
• Last Synced: 2025-02-26T22:18:02.068Z (over 1 year ago)
• Topics: clone-website, dummyjson, frontend, javascript, localstorage, svelte, sveltekit, youtube
• Language: Svelte
• Homepage:
• Size: 26.1 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# YouTube-Clone

![License](https://img.shields.io/badge/license-MIT-blue.svg) ![npm version](https://img.shields.io/npm/v/svelte.svg)

This is a simplified **YouTube clone** built with **SvelteKit**, **JavaScript**, and **Bootstrap**. It replicates key YouTube functionalities such as:

- 🎥 Video playback

- 📌 User subscriptions

- 👍 Likes

- 💬 Comments

- 🔑 Login

- 📋 Playlists

The app operates **without a backend database**, relying on **local storage** to save user data like subscriptions, liked videos, and comments. User profiles are dynamically fetched from the **DummyJSON** API, allowing users to log in with any credentials retrieved from `DummyJSON/users`.

Additionally, mock data used throughout the app is generated using **Mockaroo**, ensuring a realistic and diverse dataset for testing and functionality.

### 🎥 Video Playback 

In this project, the videos are embedded using **YouTube's iframe embed links**. The videos are **manually selected** from YouTube and then **shuffled** using **Mockaroo** to simulate a dynamic video experience. The application does not host videos but fetches them from YouTube, providing a smooth and real-world-like video playback experience.

## Installation

```bash

npm install

npm run dev

```

## Sceenshots

![Image Alt Text](assets/screenshots/home1.png)

![Image Alt Text](assets/screenshots/home2.png)

![Image Alt Text](assets/screenshots/video.png)

![Image Alt Text](assets/screenshots/comment.png)

![Image Alt Text](assets/screenshots/playlist1.png)

![Image Alt Text](assets/screenshots/playlist2.png)