Engineering Devlog #2: Moving to the Web & Dynamic Inputs

Objective / Goal

So this session today was about upgrading the project from a command-line Python script into a fully functional web application using Flask. This allows unfamiliar users easily enter participants names and emails via web interface.

Progress Made

• I created an index.html for the actual website. I just wrote all the css code inside the actual html code as the code wasn’t that long that it needed its own css file.
• I built a dynamic form with an ‘Add person’ button as well as a ‘Remove person’ button (just an X).
• Additionally, I removed the hardcoded .env credentials and replaced with the website asking for the user’s email and 16-digit App password (so we don’t have to use mine). These are all temporary variables meaning they immediately get cleared from memory after deploying.

Roadblocks Encountered & Resolutions

• There were quite a few bugs and errors, but I realised they were just silly mistakes like syntax errors and files nesting in the wrong places.
• For example, I had some TypeError bugs because my send_email function was missing arguments after the update, and a TemplateNotFound error because my HTML file wasn’t sitting inside the correct folder structure that Flask looks for.
• I fixed them by making sure the file paths matched what Flask needed and ensuring all arguments were passed correctly in my Python loops.

What’s next

• I am going to be adding a loading screen for when the audience clicks the submit button because the screen just stays kinda frozen and its hard to tell if its loading.
• Also I am going to find a workaround to not have to get people to put in their 16-digit App password just for a Secret Santa Email system. I am planning on switching to third party APIs like Resend or SendGrid.