You have a collection of youtube videos you just need to put in a gallery. Hall of Fame Vidz is the solution. It is an app to create a Hall of Fame for a collection of youtube videos. You can log in create halls, edit them, and look at other folks' halls.

October 5, 2021

How this project came about

I was on a quest for more knowledge in working with python/django. I really wanted to see how to incorporate other API's into my project. Then another area I wanted to explore a bit more was ajax. I played with it a bit before but still did not have a solid grasp on it. This project was just an idea that incorporated those aspects. It is an app for holding your most esteemed youtube videos in a Hall of Fame for various categories.

About the app

This was a solo project I built following along a course. I built it on python/django. For authentication of users, I used the django auth modules. They were used to make sure you could log in and out, and only you could edit your halls and not other users' halls. Other users' halls would only be view only. The youtube API was used for getting the title of a video, and for searching for youtube videos directly from the app. One cool piece of functionality is when you search for a video it displays results right away without having to press enter. So you start typing and when you pause it does a quick search and displays the results automatically. That was done with ajax.

Cool experience with this project

The youtube search functionality on this project was a neat new trick I learned. I wanted the search to show suggestions or results almost as soon as you type. To do that I incorporated ajax. I would send the search text as ajax to the back-end which would do a search query through the youtube data API. It would then send the results of the API call back to the front-end. The front-end would display the results as cards for each video with an add video to hall button under each card. To keep from maxing out my quota of API query calls to the youtube data API, I set a delay timer on the search text. This way it only does an API call only after the delay since the last typed character reaches a certain set delay time.

After a bit of working with the app I eventually still hit the max quota for API calls. That would give me errors than on the front end and would not load the page at all. Now I understand in a perfect universe I shouldn't be hitting the limit if this was actually to be used heavily in the real world but we are in the real world so I wanted to make sure I'm taking care of errors and edge cases correctly. I took care of that on the backend with the forms error handling for when it gets that particular error.

Honestly, the functionality is pretty simple but to put it all together felt like a behemoth of a task.