A stream viewing and Chat Analytics webapp for Youtube.
You can find a live demo of this app here
- Flask -- Python Microservices Framework.
- Familiarity -- 2 years experience
- Vue.JS -- Javascript Framework
- Familiarity -- None
- Bulma -- CSS Framework
- Familiarity -- None
python
v3pip
- NodeJS
npm
- PostgreSQL
- A registered Google API Application, see here
$ git clone [email protected]:Amperture/amp-stream-viewer.git
$ cd amp-stream-viewer
Environment Variables can be placed in a file named .flaskenv
in the project root directory for development.
FLASK_APP=sv.py`
BACKEND_URL # Typically `http://localhost:5000`
FRONTEND_URL # Typically `http://localhsot:8080`
FLASK_SECRET_KEY # Randomly generated ASCII String
DATABASE_URL # `postgresql+psycopg2://<user>:<pass>@<IP>/<database>`
FLASK_DEBUG #1/0
- Google App Credentials
GOOGLE_OAUTH_CLIENT_ID
GOOGLE_OAUTH_CLIENT_SECRET
GOOGLE_OAUTH_REDIRECT_URI
GOOGLE_OAUTH_AUTH_URI
GOOGLE_OAUTH_TOKEN_URI
GOOGLE_USER_INFO
$ python3 -m venv venv # Create Virtual Environment
$ source venv/bin/activate
(venv) $ pip install -r requirements.txt
# At this point you'll want to make sure you have your PostgreSQL server is up
# and running and you have your DATABASE_URL environment variable is populated.
(venv) $ flask db init
(venv) $ flask db migrate
(venv) $ flask db upgrade
(venv) $ flask run # Run Development Server
$ npm i # Install Dependencies
$ npm run dev # Run Development Server
# Navigate in your browser of choice to the url provided.
This project was taken on as a challenge test project found here to better understand front-end development and the Google API libraries, especially the Youtube Data and Youtube Live Streaming APIs. A few key decisions were made in the design to facilitate functionality.
PostgreSQL was chosen for its support of ON_CONFLICT
parameters for
inserts into upserts in the SQLAlchemy
library.
This was done especially for the case of adding a ChatterLog
who had
changed their displayed username or avatar.`
Theoretically the chat from youtube could simply be embedded into the viewing webpage, but since chat must be logged locally to the backend server, it becomes ideal that all chat be routed through the backend server regardless.
This would create a scenario where chat can only be logged if someone is
actively watching a stream while using the app, but given the Kevin
user
persona, that assumption was reasonable.
An alternative method, given more resources could be to log all streams at time of search using multithreaded process in the backend server.
The landing page of the app when the user is logged in will show a default list of streams to the user. This list follows the following algorithm:
- If the user has never executed a search manually, search using an empty string.
- Otherwise, repeat the last search the user performed.
This assumption was made on the discovery that using an empty string in the Youtube Search API will return what looks to be curated suggestions directly from Youtube. This was tested with three users initially and seems to be the case.