Giter Club home page Giter Club logo

video-hub's Introduction

Video Hub

Video Hub is a platform where users can share their favorite YouTube videos, allowing others to discover, upvote, downvote, and engage with the content. Whether you're looking for trending videos, exploring diverse topics, or simply wanting to share entertaining content, Video Hub is the go-to place.

User Stories

  • As a user, I want to be able to view a list of all YouTube videos posted on the site
  • As a user, I want to be able to post videos that I like from YouTube to my website.
  • As a user, I want to be able to delete videos from the website that I no longer like.
  • As a user, I want to be able to watch the videos embedded in the website.
  • As a user, I want to be able to "Up Vote" a video if I like it.
  • As a user, I want to be able to "Down Vote" a video if I dislike.

Key Features

  • Add Videos Users can contribute to the Video Hub by adding links to their favorite YouTube videos.

  • Vote System The platform incorporates an Up Vote and Down Vote system, enabling users to express their preferences and influence the visibility of videos.

  • Sort and Search Videos can be sorted in both ascending and descending order, making it easy to discover trending content. Additionally, users can search for specific videos based on keywords.

  • Delete Videos Contributors have the ability to manage submissions and remove videos when needed.

Technologies Used

  • React: Front-end framework for building the user interface.
  • Express: Back-end framework for handling server-side logic and API requests.
  • PostgreSQL: Database for storing video information and user data.
  • Material-UI (MUI): React UI framework for designing consistent and aesthetically pleasing user interfaces.

How to Use the Application

  • Add a Video: Navigate to the "Add Video" section. Paste the YouTube link and provide a brief description. Click "ADD" to share the video with the community.

  • Vote on Videos: Browse through the video list and use the Up Vote and Down Vote buttons to express your preferences.

  • Sort and Search: Utilize the sorting toggle button to view videos in ascending or descending order. Enter keywords in the search bar to find specific videos.

  • Delete videos: Remove videos that are no longer relevant or desired.

Prerequisites to Setting Up the Project

  • Node.js v18 and npm
  • Git

Getting Started

  • Follow these steps to set up and run the Video Hub project locally:

    1. Clone this repository to your computer.
      git clone https://github.com/farzaneh-haghani/Full-Stack-Project-Assessment.git
    1. Create a new database named "video_hub" in the postgreSQL shell. Ensure you have PostgreSQL installed on your machine.
        CREATE DATABASE video_hub;
    1. Create table and Import Sample Data.
          psql video_hub
          \include server/videos.sql
    1. Create a .env file in the server of the project:
      URL_DB=postgresql://localhost:5432/video_hub
    1. Navigate to the project directory:
      cd Full-Stack-Project-Assessment
    1. Open two new terminal window and install Dependencies
        cd client
        npm install
        npm start
        cd server
        npm install
        npm run dev
    1. Open your browser and visit http://localhost:3000 in your browser to view the app and access the Video Hub.

Happy video sharing!

video-hub's People

Contributors

farzaneh-haghani avatar

Watchers

 avatar

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.