kumsomi / Travel-Tape

Travel Tape is a ReactJS-based Travel Streaming platform, which contains videos of different categories. It comes with features like sorting the videos, searching a video, adding them to a playlist, likes, and watch later sections.

Home Page:https://travel-tape.netlify.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Travel Tape

Travel Tape is a ReactJS based Travel Streaming platform. Here you'll find all the travel related videos divided into 6 different categories.

  • Road trips
  • Group trips
  • Solo travel
  • Adventure trips
  • Budget Travel
  • Luxury Travel

Travel Tape comes with features like sorting the videos, searching a particular video, adding them to a custom playlist, putting them under likes and watch later section.

List of Features

Home Page

  • Home Page is a landing page with a list of few categories, clicking on any one of those will take you to the video listing page of that particular category.

Video Listing page

  • Video Listing Page consists of all the travel related videos.
  • It has features like, search video by title, sort videos by date, filter videos with category.
  • Video Listing Page has "infinite scroll" to optimise th app.
  • Clicking on any of the video will take us to the Single Video Page.

Single Video page

  • Single Video Page has options to like, copy the link, add video to watch later and save it to the playlist.

Liked Videos

  • Liked videos page will show us all the videos we've liked.

Watch Later

  • Watchlater page will show us all the videos we've added to watch later.

Playlist page

  • Playlist page will show us all the custom playlist we've created, clicking on any playlist will show us all the videos in the playlist.
  • There's an option to delete a single video from the playlist or the entire playlist with just one click.

History page

  • History page will show us all the videos we've played using single video page.

Login

  • User cannot user profile, likes, watch later and playlists section until they are logged in.
  • Test credentials are also available at the login page.

User Details page

  • User details page will show the name, email id of the user
  • An option to logout.
  • Display the like, history, playlists and watchlater videos of the user.

Tech Stack

  • HTML/CSS with Bubble UI component library
  • React JS
  • Mock Backend

Live Link

https://travel-tape.netlify.app/

Demo

travel.tape.video.mp4

About

Travel Tape is a ReactJS-based Travel Streaming platform, which contains videos of different categories. It comes with features like sorting the videos, searching a video, adding them to a playlist, likes, and watch later sections.

https://travel-tape.netlify.app/


Languages

Language:JavaScript 88.2%Language:CSS 10.9%Language:HTML 0.8%