YouQueue front end server design:

Shown here is the basic website form model behind YouQueue. The server side (127.0.0.1:5000/admin) collects client data and compiles on a basic HTML form using python with Flask to translate. The client (127.0.0.1:5000/form) here is shown twice in order to demonstrate that multiple users may access the server at once. The ":5000" shown in the server and client URLs represents the server port being used. 

YouQueue server:
YouQueue1.JPG

Once songs are gathered from client submissions the YouTube API is used to gather appropriate song titles and song lengths. This data is then displayed on the administrator server side using HTML. Flask is used to transfer user data and in cases such as timers JavaScript is used to handle data transferred via Flask.

Our server:
YouQueue3.png

Basic server model for a single device server using a port. Although not between two devices like a traditional server the model used for YouQueue allows us to transfer data much like a traditional server.

Using an API:
YouQueue4.png

In order to make our server data usable for the context we care about (YouTube music) we must filter our user submissions through an API for YouTube music which will process submissions into usable song titles and gather other data such as song length, explicitly, and artist name.  

Creating a front end using Flask:
YouQueue5.png

Servers and data collection and processing is relatively easy to do with Python. However, to make the front end of YouQueue we needed to find a way to translate Python data into an HTML front end. Flask makes this conversion easier by allowing us to transfer large amount of data in the form of dictionaries such as song titles, lengths, artist and more.