Project name: ViewVerse

💎 Description

"ViewVerse" is a video platform similar to YouTube, built with Next.js v15, React v19, TypeScript and Tailwind.

It provides a modern, responsive interface for browsing, watching, and engaging with video content, showcasing a scalable and feature-rich web application.

The focus of the online-course was on frontend development — the backend came pre-built.

🧩 Tech Stack

Framework

State & Data

UI & Animations

Forms & UX

Utilities

Styling

Infrastructure

---

Start

First, install and run the development server:

powershell -c "irm bun.sh/install.ps1|iex"
bun dev

🗃 Dependencies

bun add sass
bun add -D @trivago/prettier-plugin-sort-imports prettier
bun add lucide-react
bun add clsx
bun add path-to-regexp
bun add axios
bun add @tanstack/react-query
bun add dayjs
bun add tailwind-merge
bun add framer-motion
bun add react-hook-form
bun add js-cookie
bun add -D @types/js-cookie
bun add react-google-recaptcha
bun add -D @types/react-google-recaptcha
bun add react-hot-toast
bun add @reduxjs/toolkit react-redux
bun add jose
bun add html-react-parser
bun add react-hotkeys-hook
bun add rc-slider
bun add rc-tooltip
bun add linkify-html
bun add next-sitemap

# bundle analyzer
npm install --save-dev @next/bundle-analyzer
npm install --save-dev cross-env

---

📋 TODO:

• переместить НЕ ПОДТВЕРЖДЕНО в оповещения, а также отображать сообщение в userSettings

  Design:

• button colors

• @media:

  • video player styles
  • images
  • grid

• media query:sideBar на мобилах изначально скрыт, при открытии - поверх контента

• ? replace Skeleton on Dynamic pages to or review style code (cols)

• UI block's heading/loader

  • heading
  • SkeletonLoader: - [x] static count - [ ] count depends on @media

  New/Server functions:

• ? found videos with user's comment

• ? password reset option

• [!] change domain for production

• SERVER: у "новых" пользователей нет channelId и не могут заливать видео

• SERVER: имя файла банера/аватара на сервере должно совпадать с пользователем/каналом

• SERVER: имя файла привью на сервере должно совпадать с именем файла видео Нужно сообщение пользователю

• SERVER: после обработки, удалить файл видео из общей папки загрузки

• SERVER: после удаления видео из БД, файлы остаются на сервере (видео во всех папках + привью)

• SERVER: картинки (аватар,банер,превью), которые не используются/заменяются остаются на сервере!!!

✅ Done

• root layout
• UI menu/nav/sidebar
• metadata
• UI video card
• fonts (b.a VideoCard title)
• Home page (ISR):
  • trending videos
  • explore(recommended) videos
• Search
• сократить название канала, если слишком длинное
• Page 404
• game videos
• VideoCard animations
• UI field, button
• UI login/registration form
• Integrate recaptcha
• log out button
• user's avatar (channel avatar || default)
• email confirmation
• axios interceptors
• test tokens
• Middleware / verify token
• FIX! redirect after logout(special on pages with auth)
• Profile settings
  • UI form
  • functions: update text fields, upload avatar/header
• channel page:
  • subscribe button
  • banner
  • section my subscriptions
• [FIXME] SUBSCRIPTIONS/STUDIO linkS do not see/remember isShowedSidebar
• videoPage:
  • similar videos block
  • collapse description of video
  • styling
  • comments:
    • display comments
    • form to add comment
    • actions: edit/delete !only own comments
  • player:
    • current time
    • make progress bar clickable
    • video may not have quality options
    • volume button
    • implement theater mode
    • style @media: when side bar is open/collapsed in theater mode
    • [FIXME] not valid video duration on first loading
    • [FIXME] btn pause does not changes to play at the end of video
• sort/group videos on SubscriptionsPage
• btn delete video from liked list
• btn delete video from history list
• FIXME logout on ChannelPage, History, Liked videos, Subscriptions, Playlists (should redirect to home/auth)
• playlists:
  • btn add to playList
  • modal form, messages
  • playlist page
  • delete/toggle video from list
  • rename playlist
  • delete playlist
• Subscribe btn should be disabled if channel owner
• views updating (on refresh/play?)
• history updating (on play?)
• disable like and views updating for video owner
• message if video not found
• page with a list of user's videos
• pagination
• delete video functional
• обработать описание видео (теги и перенос строк)
• ? crop images (thumbnail)
• metadata, SEO
• skeleton for player
• вспомогательный текст загрузки картинок и видео (формат,размер,вес). Аватар, баннер,
• после редактирования профиля, нужно сообщение об успехе
• доработать загрузку плеера на VideoPlayer
• TODO default banner
• безопасная обработка тегов в комментах
• если видео неподходящего разрешения/формата, оно загружается на сервер и фейково "обрабатывается". привью есть, но видео на сервере только в первоначальной папке. Сообщение пользователю о неподходящем разрешении.
• разделить settings на пользовательские и для канала
• после регистрации перенаправлять на userSettings
• если пользователь не подтвердил регистрацию, скрывать студию

---

[!NOTE] To use rc-slider and rc-tooltip as native input see lesson 40 / branch inputSlider