ytGallery Svelte Themes

Ytgallery

A youtube gallery web application for collecting valuable youtube resources videos while learning to code

yt


A youtube gallery web application for collecting valuable resources youtube videos while learning to code built with

svelte       nodejs       planetscale       tailwind


yt


star-repo

❯ Usage

The perfect app to keep track of valuable youtube resources while learning to code, if you have one add it to list 😃

I start learning the most beloved framework Sveltekit and that's what i'm using in the frontend

API

You can make a GET request to https://yt-gallery.vercel.app/api/ to get all videos

curl --request GET \
  --url 'https://idiom.ysnirix.live/api

Example response

{
    "status": 200,
    "error": false,
    "videos": [
        {
            "id": 19,
            "createdAt": "2022-10-08T20:04:40.407Z",
            "updatedAt": "2022-10-08T20:04:40.407Z",
            "videoUrl": "https://www.youtube.com/watch?v=rLRIB6AF2Dg",
            "thumbnailUrl": "https://i3.ytimg.com/vi/rLRIB6AF2Dg/sddefault.jpg"
        },
        {
            "id": 12,
            "createdAt": "2022-10-08T19:47:44.912Z",
            "updatedAt": "2022-10-08T19:47:44.912Z",
            "videoUrl": "https://www.youtube.com/watch?v=rv3Yq-B8qp4",
            "thumbnailUrl": "https://i3.ytimg.com/vi/rv3Yq-B8qp4/sddefault.jpg"
        },
        {
            "id": 11,
            "createdAt": "2022-10-08T19:46:26.293Z",
            "updatedAt": "2022-10-08T19:46:26.293Z",
            "videoUrl": "https://www.youtube.com/watch?v=rnOQHrYiiD8",
            "thumbnailUrl": "https://i3.ytimg.com/vi/rnOQHrYiiD8/sddefault.jpg"
        },
        {
            "id": 10,
            "createdAt": "2022-10-08T19:32:31.154Z",
            "updatedAt": "2022-10-08T19:32:31.154Z",
            "videoUrl": "https://www.youtube.com/watch?v=9OlLxkaeVvw",
            "thumbnailUrl": "https://i3.ytimg.com/vi/9OlLxkaeVvw/sddefault.jpg"
        }
    ]
}

Development

Once you've cloned the project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

  • rename .env.example to .env add replace DATABASE_URL with your Planetscale database
npm run dev
# or start and open the app in a new browser tab
npm run dev -- --open

Production

npm run build

You can preview the built client app with npm run preview,This should not be used to serve your app in production.


❯ About

Contributing

Pull requests and stars are always welcome. For bugs and features requests, please create an issue.

Author

Ysn4Irix


❯ License

Copyright © 2022-present, Ysn4Irix. Released under the MIT License.

Top categories

Loading Svelte Themes