A social platform for sharing live music video performances.
Explore the docs »
View Demo
·
Report a Bug
·
Request Feature
Groovetube is a video sharing web application inspired by YouTube, built using Python / Flask and utilizing React.js/Redux architecture. Groovetube allows users to:
- Create an account / profile
- Log in / Log out
- Upload / share live music videos
- Watch videos
- View user profiles
- Follow / unfollow other users
- Search for videos
- View video pages and comment on videos
- Add a video to a user's collection
- Javascript
- React
- Redux
- Python
- Flask
- SQLAlchemy
- PostgreSQL
- CSS
The app was built using Python / Flask on the back end with a postgreSQL database. Back end structure is RESTful and all the data requests use AJAX and are fulfilled with a JSON API. Associations are used to prefetch data in order to minimize SQL queries to the database.
The front end is built completely in React / JavaScript and utilizes Redux for global state management. React's virtual DOM allows for very fast rerendering without requiring new pages to be sent from the server.
To get a local copy up and running follow these simple steps.
Installations
-
npm
npm install npm@latest -g
-
pipenv
pipenv install
-
Clone the repository
git clone https://github.com/gch910/groovetube.git
-
Install Pipenv dependencies
pipenv install --dev -r dev-requirements.txt && pipenv install -r requirements.txt -
Create a .env file based on the example with proper settings for your development environment
-
Setup your PostgreSQL user, password and database and make sure it matches your .env file
-
Get into your pipenv, migrate your database, seed your database, and run your flask app
pipenv shell
flask db upgrade
flask seed all
flask run
-
Install NPM packages - cd into react-app
npm install
-
While still in the react-app folder
npm start
The login page offers a simple but elegent display for entering user credentials. User authentication is handled in Flask using the flask_login package. The werkzeug.security package is used for password hashing. Passwords are not saved to the database, only password hashes. When users log in, the password they provide is rehashed and checked against the original encrypted password hash to verify credentials.
The Groovetube homepage features a responsive grid layout of the user's video collection if they are logged in, or a list of videos to browse if they are not. Each video thumbnail displays a static image which on hover will display a GIF of the video performance. The video collection updates as a user adds more to their collection and videos can be removed from the collection via the user's profile page at any time. The side navbar featured is present on all pages for easy navigation.
On navigation to the video page, if the specified video is not already present in the redux store, a fetch request will be made to the backend which will respond with queried results of relevent video information. Am YouTube iframe embed will be rendered for easy interaction with the player. Using YouTube to host these videos cuts down on database storage and allows users to upload as many videos as they like. A logged in user can interact with the video page by adding/un-adding the video to their collection, adding/deleting comments, following/unfollowing the posting user, and navigating the video player, with page updates happening instantly. All of the updated video data is saved to the postgreSQL database where it can be retreived later on.
At the top of the profile page, the user's profile image and username is displayed, with an option to upload/change the profile picture if they are logged in. By default a grid layout of the profile user's collected videos is rendered on initial navigation. On hover, if the logged in user matches the profile user, a button to remove an individual video is displayed, which displays a confirmation of removal once clicked. A navbar is also presented with options to view the user's uploads, followers and the users they are following. This navbar utilizes React state to only display information for the currently clicked link. Buttons to delete an uploaded video and unfollow users are only available if user auth has confirmed that this user is the owner of the profile. Additionally, a follow/unfollow button is available on the profile page if it does not belong to the logged in user.
When a user enters something into the searchbar, a fetch request is sent to the backend where the data intensive task of querying for matching results is handled. The backend responds with results for matching video titles, which is then rendered on the search results page with the appropriate interactive thumbnails.
Video results can be filtered based on the music genre to make it easier to browse desired results. A fetch request is made to the backend with the specified category ID, where a query is then made for all matching videos.
Clicking on the "following" nav-link on a user's profile page will display the users that they follow. If the logged in user matches the current profile, they are able to click the "unfollow" button which will delete that column in the database join table and immediately display the updated results.
See the open issues for a list of proposed features (and known issues).
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the GNU License. See LICENSE for more information.
Gabriel - [email protected]
Project Link: https://groovetube.herokuapp.com/
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent