Intro:

After a year of programming classes and an internship later, I've finally delved deep and finished my very first full-stack project! (quickwatch.info)

This project has been extremely fun, packed filled with a bunch of highs and lows. It took me 60+ hours and countless nights of staying up until 4 A.M to get everything together and working. It's really taught me so much about programming from sharpening my front-end skills to diving into backend and server-hosting. Additionally, it's opened my eyes to what the possibilities are with coding and how I can use tech to impact the world. Despite how small this project is, I know that this is only the beginning!

Function:

I initially got an idea to make a YouTube video summarizer through TikTok. I wanted a way to allow students to fetch quick information about a video. Primarily, this could be useful for students who need to finish a part of an assignment quickly or need information from multiple videos to accumulate multiple ideas together.

In short, my website allows users to copy and paste YouTube URLs and out comes a digestible summary that can be read extremely quickly.

Process:

I'd like to thank Syah for being an extremely helpful mentor by giving me guidance and moral support throughout the entire process. If it weren't for him, this project would've taken me double the time!

I started my design in Figma which contained more earthy toned colors. I decided to use React and Typescript as my front-tend tech stack. However, as I was coding up the website, I realized that I wasn't really feeling the whole earthy-vibe, so I decided to go with more a purple-to-red gradient as the main eye-catcher (partly inspired by RVI)

I probably enjoyed the front-end portion of the project the most, just because I utilized TailwindCSS to its fullest extent and having to go through multiple drafts really helped me see my progress. Not only this, but I also figured out more efficient ways of creating user-friendly websites such as taking inspiration from other really cool websites. One of my favorite parts was implementing the wavey SVG image and seeing what I could do to make it work. Overall, I'm satisfied with the overall look of the website!

Now, with the back-end, it was a completely different story. Deciding on what back-end service I wanted to use took probably an hour alone of research, but I ultimately decided on Flask. This is where I made my Python scripts to utilize the YoutubeTranscript API and the OpenAI API to run my entire website. The biggest challenge of my project was definitely figuring out which server host to use. Initially, I used Firebase to run all of my code for the internet to use but it didn't work at all. Then, I realized that my code was still running on my local host, so I had to figure out a way on how to change my code. That's when I found out that I should've just hosted my backend and my frontend separately. I used Vercel as my front-end host and Heroku as my back-end host. From there, it was just many hours of coding and debugging and coding again. Overall, it was a painful but extremely worth experience.

After I figured out that, I searched for a domain, bought it, did some research on how I could use it, and boom. Of course, I did some small fixes here and there, but my project was essentially finished.

Conclusion:

I'm glad I spent as much time as I did on this project. The biggest takeaway from this project is that the next time I make a website, I'm going to be exponentially more prepared than I was first starting this website. If you're ever bored, check out my website and try it out for yourself! I'm open to any feedback and suggestions for the future. This whole process is definitely going to encourage me to continue my web development adventure and we'll see where I go from here. 🚀