Code Monkey home page Code Monkey logo

vistream-react-version's Introduction


VIStream
VIStream

vistream licence vistream forks vistream stars vistream issues vistream pull-requests vistream total lines of code


A Video Streaming Platform for all types of Computer, PlayStation and X-Box Games and Streamers

Live Website · Report Bug · Request Feature


Table of Contents
  1. About The Project
  2. Key Features
  3. Built With
  4. Folder Structure
  5. Contributing
  6. Acknowledgements
  7. License

🎙 About The Project

VIStream is a video library for all kind of videos related to video games. One can view videos from video listing page, explore page. One can also like videos, create playlists, add/remove videos from playlists, delete playlists, view their watch history, clear all watch history, and create new account.


🎖 Key Features

  • Auth Management
    • Login
    • Signup
    • Logout
  • Like Management
    • Like Video
    • Unlike Video
    • View all liked videos
    • Clear all liked videos
  • Playlist Managment
    • create playlists,
    • add/remove videos from playlists,
    • delete playlists
    • View all playlists
    • View single playlist
    • Clear Playlist
  • History Management
    • View watch history
    • Clear watch history
    • Remove single video from history
    • Remove all videos from history
  • Watchlater Management
    • Add Videos to Watchlater
    • Remove Videos from Watchlater
    • Remove all videos from Watchlater
  • Filter Management
    • Sort by Views
    • Sort by Likes
    • Sort by Oldest First
    • Sort by Newest First
    • Category filters
  • Search Video
  • User Profile Page
  • Trending Videos
  • Single Video Page
  • Loaders and Alerts
  • 404 Page
  • Completely Responsive
  • Input Validation on Login and Signup

⚙️ Built With

  • React
  • React Router
  • React Context API
  • Mockbee - for mock backend
  • VISPA-UI
  • ICONIFY

🗂 Folder Structure

- /public
- /src
   - /backend
   - /components
   - /constants
   - /context
   - /hooks
   - /redux
   - /screens
   - /services
   - /utilities
   - App.js
   - App.module.css
   - index.css
   - index.js
   - server.js
- package-lock.json
- package.json
- README.md
- yarn.lock

📤 Contributing

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 here. Don't forget to give the project a star! Thanks again!

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

🙏 Acknowledgements

Special Thanks to some amazing people who helped reviewing VIStream.

Pranshu Dobhal Amar Narute Kartikeya Choudhary Atul Pant
Raksha Pawar Ankur Chunekar Kevin Solomon Mohammed
Jay Gadhiya Rahul Rawat Aazam

📑 License

MIT License - Copyright (c) 2022 Vishal Patil

vishalpatil.me  ·  GitHub @VishalPatil18  ·  LinkedIn @vishalrameshpatil  ·  Twitter @VishalPatil1810

vistream-react-version's People

Contributors

vishalpatil18 avatar

Stargazers

avatar avatar

Watchers

avatar

vistream-react-version's Issues

BUG: Settings tab state not updating when navigated from user tab at the top on Greeting card

Describe the bug
When a user navigates from other pages to settings/clicks on the user, the active state is still on the old tab

To Reproduce
Steps to reproduce the behavior:

  1. Go to anypage
  2. Click on username at the top in the greeting card
  3. The page changes to settings but the state of the tab in the drawer is not updated.

Expected behavior
The state of the active tab should change be set to settings in the drawer.

Screenshots

Device

  • Mobile
  • Desktop/Laptop

Browser

  • Chrome
  • Safari
  • Firefox
  • Edge

FEAT: Add Like Management

Is your feature request related to a problem? Please describe.
Like management is to manage the videos liked by any user.

Describe the solution you'd like
Build the Like management which would fetch the Liked videos from the backend and also the user could like new videos which would be given to the server using post request and using the delete request to remove the video from liked.

Describe alternatives you've considered
Make use of context and reducer to achieve the following. Only when the user is logged in one could access and add/remove LIked videos from the liked videos.

FEAT: Add Playlist Management

Is your feature request related to a problem? Please describe.
A playlist is what a user can create and add all kinds of videos in that together. They can add videos to playlist, remove videos and even delete the whole playlist.

Describe the solution you'd like
Create a playlist management system using context and reducer.

FEAT: Add Home Page

Is your feature request related to a problem? Please describe.
The home page is the landing page. It is the first page that the user sees when the site loads.

Describe the solution you'd like
Build the home page having various sections like trending videos, videos with categories, featured videos, and drawer. Make various components to achieve the same.

FEAT: Add Auth provider and services

Is your feature request related to a problem? Please describe.
Add auth provider and services like login, logout, and signup.

Describe the solution you'd like
Build auth provider using useContext and useReducer.

BUG: Like state persisting for all users

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

  1. Login with a user
  2. Add a few videos to like
  3. Logout and then login again with another user
  4. The previously liked videos from previous users are also there.

Expected behavior
Each user should have separate liked list.

Screenshots

Device

  • Mobile
  • Desktop/Laptop

Browser

  • Chrome
  • Safari
  • Firefox
  • Edge
  • Other

FEAT: Add Single Video Page

Is your feature request related to a problem? Please describe.
A single video page is where the user could see the video and find all details about the video

Describe the solution you'd like
Build a single video page that would be dynamic based on its id and route would be done with useParams

Additional context
Using useParams to achieve the dynamic behavior for displaying any video based on its youtubeID

BUG: On clicking on any private route tab in Logout state user should get login modal.

Describe the bug
When a user accesses private routes in log out, you display an alert but you can open the login modal for him after that as you are doing in Create Playlist button.

To Reproduce
Steps to reproduce the behavior:

  1. Logout
  2. Try accessing any private route like liked, playlist, etc.
  3. The user gets an alert

Expected behavior
A login modal should open

Reference Video
https://www.awesomescreenshot.com/video/8075478?key=64bce7bfdb5414b1b8f67ce77e92bd73

Device

  • Mobile
  • Desktop/Laptop

Browser

  • Chrome
  • Safari
  • Firefox
  • Edge

FEAT: Add History Page

Is your feature request related to a problem? Please describe.
A history page is where the user can see all the history of videos that they have watched.

Describe the solution you'd like
Create a history provider and dispatch to use the history which is fetched by network call from the backend and then displaying the data on the history page. One can also delete a single video from history or clear the whole history at once.

Additional context
Use useContext and useReducer to maintain and update the history state when user watches any video

FEAT: Add Watchlater Management

Is your feature request related to a problem? Please describe.
Watch later is a list of videos that the user can save for watching videos later or for future reference.

Describe the solution you'd like
Build a watch later management system through which a user could add a video to watch later, remove a video from watch later and clear the whole watch later.

Additional context
Use context and reducer to build the Watch later Management

FEAT: Change Greeting card background color

Is your feature request related to a problem? Please describe.
The current color does not match the background color's tone. Also feels a little jarring to the eyes.

Describe the solution you'd like
I would suggest using #EB1462. I tried it in the dev tools, and the color matches the body background color's tone.

FEAT: Save to playlist button on small card position

Is your feature request related to a problem? Please describe.
Save to playlist button on small card should be positioned well.

Describe the solution you'd like
Update the position of save to playlist button in the menu on small video card

FEAT: Add Loaders and Alerts

Is your feature request related to a problem? Please describe.
Loaders are used when there's some network call and the site is performing an operation that makes the user inactive. Alerts are used to show alert messages to users whenever some action happens or there's a warning or an error.

Describe the solution you'd like
Build a loader and alerts of 4 types which would be info, danger, success, warning.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.