YouTubeMate

YouTube Mate is an app allow users to create and share YouTube watchlists
Explore the docs

Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Features
4. Roadmap
5. Contributing
6. License
7. Contact
8. Acknowledgments

About The Project

YouTubeMate is a full stack project will allow users to create & edit watch lists of YouTube channels. You can also watch videos of your favourite channels.

(back to top)

Built With

(back to top)

Getting Started

To get a local copy up and running follow these simple steps.

Prerequisites

Install a package manager e.g npm, yarn, pnpm, bun etc.

Installation

1. Download or clone my repository

   git clone https://github.com/SedatUygur/YouTube-Mate.git

2. Then, install the project dependencies:

   npm install

3. You can follow the contribution guidelines to proceed

Features

• Add Logo

• Page Transitions

• Add Icon Library

  • Put Icons on all Action Buttons

• List Create / Edit Page

  • detect changes in form
  • Prevent navigation if unsaved changes
  • Disable update / save button if no changes

• List permissions / auth

  • Private lists can only be viewed by the creator

• List Page

  • Access list via slug
  • Share list / copy URL to clipboard
  • Previous / Next Buttons
  • Infinite scroll / pagination / lazy loading
  • On video end, play next video
    • Loop back to beginning if we reach the end
  • List Sort / Filters
    • Views
    • Newest / Oldest
    • Likes
    • Random / Feeling Lucky
    • Toggle
      • Shorts
      • Videos
      • Live-streams
    • Duration
      • Min
      • Max
    • Toggle Channels in List
    • Show 1 video from each channel at a time...
  • Channel cache refresh button
  • Show last updated time / cache time for each channel

• Landing Page / Features

• Limits

  • Max number of lists per user
  • Max number of channels per list

• Users can favorite a list

• Show favorited lists on user dashboard

• Fork an existing list

• Public user profile page

  • Show public lists

• User Preferences

  • Volume
  • Video Speed
  • Autoplay

• Message Queue

  • Seperate Service that receives requests for Cacheing
    • Calls YT API, updates cache
  • SvelteKit app -> put messages into the queue requesting caching

• Message Queues

  • Explore:
    • Redis
      • pub / sub
      • flags

• Analytics Service

• Error Reporting

• Terms of Service

• GDPR

• Privacy Policy

• Firefox tab navigation

• Redirect to homepage on logout

See the open issues for a full list of proposed features (and known issues).

(back to top)

Roadmap

• List create UX
  • Only show channel avatar
    • Small remove button
    • Tooltip with channel name
  • Desktop styles - 2 column
    • Channel adder is on the right
• YouTube Embed API
  • parse timestamps in description, link changes timestamp in video
• Home Page List
  • List actions
    • View
    • Edit
• Fix scroll position on page change
• Video view page
  • expandable description box
  • Render description with markdown
• Containerize tests
• More integration tests
  • Run tests / containers while dev containers are still running
  • Seed DB with unique users for each type of test
  • TODO: make a watch specific config
    • Watch for only test updates
  • Tests:
    • Search for YT channels
    • Add YT channel to List
    • Create List
    • View List
      • View individual List
    • Coverage Reports
      • Generate outside container (volume)
    • Navigating Lists
    • Edit List
    • Make sure $LL is being run in tests...
      • Svelte stores highlighted red??
    • .env.test does not exist on CI server...
    • Remove test ids in Prod build
    • Update contributing guide...
      • Running tests in watch mode...
      • Debugging tests in watch mode...
      • Exporting data to be seeded for tests
• Update readme with tech stack
• Deploy
  • Database
    • Free Tier
      • Serverless / Edge Function Support...
        • Connection Pooling
      • Fly.io
      • Railway
      • Supabase
      • Render
      • ElephantSQL
    • Paid
      • Heroku
      • AWS RDS
  • App - Vercel
• Testing todos:
  • Fix tests on CI
    • Docker / prisma test setup
  • Configure e2e tests
  • Seed DB
    • Generate user token during test (do not do oauth flow during test...)
  • Anything else that comes up...
• Create page form styles
  • Channel card styles
• Update the List page styles
• Update DB schema
  • Last updated
  • More metadata
    • Include Channel Image
    • Include Channel handle
    • Number of subscribers
    • Verified badges
• More robust YT API Response
• Lazy load embedded video and thumbnails
• Cache YT API Response
  • Get ALL videos of each channel
  • Get ALL video info of each video
    • View Count
    • Length / Duration
    • Like Count
• Fix YT Video order (latest by default...)
• List Page Styles
  • Fix video titles
• Single Video Page
• Wireframe create list page
• Create list page
  • Set title
  • Set Description
• Eslint / Airbnb / Prettier Setup...
• Setup i18n
  • Research options
  • Install / setup
  • Use dictionaries on landing page

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contributing

You can follow the contribution guidelines(CONTRIBUTION.md) to contribute. We have issue templates for bug and feature requests.

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Top contributors:

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

Sedat Uygur - @sedat-can-uygur - sedat.uygur@outlook.com

Project Link: https://github.com/SedatUygur/YouTube-Mate

(back to top)

Acknowledgments

• SvelteKit
• Auth.js
• Postgres
• Prisma
• Redis
• node-redis
• Svelte
• tailwind
• Skeleton UI
• typesafe-i18n
• zod
• @googleapis/youtube
• luxon
• eslint
• prettier
• lint-staged
• husky
• Playwright
• Istanbul
• Docker
• Github Actions

(back to top)