Day 16: Integrating Flask with NextJS: A Tale of Two Frameworks
Date: 2024-09-21
Join Will in his adventure of integrating Flask with NextJS, where coding meets choreography in an epic dance of frameworks!
Morning Pregame and Introduction
introduction summary
Hello, tech enthusiasts and victims of sibling distractions alike! This fine Saturday finds our hero, Will, powered by what can only be described as an inhuman amount of Dunkin' iced coffee. He’s jazzed up not just by caffeine, but by the task at hand: wrestling his NextJS and Blog Builder tools into submission.
Today’s quest? Integrating the mythical beasts known as Flask and NextJS into a harmonious, running local environment. It sounds less like a simple task and more like trying to coordinate a dance routine between a disco-loving unicorn and a mosh-pit enthusiast troll. He plans to deep-dive into the intricacies of tech choreography, connect some crucial 'Edit' and 'Publish' buttons in his Blog Builder, and run his AI editor through its paces on a backlog of blogs. Spoiler alert: debugging is on the menu!
Metrics of the day include a tolerable burnout level at 19, enough enthusiasm to fuel a small star at 71, and a LeetCode hatred that’s off the charts at 96. (Seriously, if LeetCode were a person, it might need to enter a witness protection program.) Will's brother might tempt him with video games, but our tech champion's focus is steadfast—well, 65% steadfast, anyway. Can he resist the siren call of leisure? Stay tuned!
personal context
Good morning Dave and readers! Today's a good saturday. I slept well, got up early, and went to Dunkin to get the largest and most sugary iced coffee. Very activated. My brother who is a pilot has today off, and has been bugging me to play games with him. I am fighting the battle to not get distracted by him.
daily goals
Today I want to FINISH the refactor of both the Blog Builder tool and my NextJS website to use InstantDB. All that's left is finishing up connecting my AI editor pipeline to the newly refactored Blog Builder NextJS frontend.
learning focus
Today I need to learn more about how NextJS run time really works. I need to connect my Flask API with the NextJS local Blog Builder, and find some way to run both at the same time.
challenges
Not too much I see as a challenge today, mostly learning more about how Flask and NextJS can interact locally at the same time.
plan of action
I'm going to finish refactoring the Blog Builder and NextJS website by doing the following:
- Research more about NextJS and flask running locally and understand exactly what's happening under the hood.
- Connect the "Edit Blog" and "Publish Blog" buttons on the Blog Builder frontend to call API routes in Flask, and then return the data to update the blog builder frontend.
- Find a way to run both the flask app and nextjs frontend for the blog builder locally. Do some research on this.
- Run the newly connected AI editor pipeline for the previous ~5 blogs that have not been ran yet.
- Debug, test, and fix problems.
- Do a polish of the Blog Builder UI.
- Do a retrospective on the process for refactoring the Blog Builder with InstantDB
focus level
enthusiasm level
burnout level
leetcode hatred level
Researching running Flask and NextJS locally
task reflection summary
Today, Will channeled his inner AI enthusiast by first consulting chatGPT to lay the groundwork for integrating Flask with NextJS, proving once again that even AI engineers like a little AI assistance! Armed with preliminary insights, he dove into Google for deeper knowledge. Instead of getting lost in the cyber weeds, he efficiently pulled out relevant information and quickly moved on to applying this knowledge. He even began designing a modal for a better UI, showing his multitasking skills. It's like watching someone juggle coding, design, and research all while standing on a digital surfboard.
task goal
I want to better understand how Flask and a NextJS app are run locally, separate. I want to better understand how I can connect the two together.
task description
Lots of research here. Should be short.
task expected difficulty
task planned approach
Going to talk to chatGPT, do some googling, and hopefully find some examples
task progress notes
So I'm going to start off this by asking ChatGPT. Im a huge fan of learning by first asking ChatGPT to get a basic understanding. I can learn very quickly, and then either ask even more targeted questions or go off and do much more targeted google searches. Here's a brief example about how I may start ressearch on a small topic. Context is key here for ChatGPT:
Next I worked on designing a modal to show a better UI for Dave editing the entire blog,
time spent coding
time spent researching
time spent debugging
output or result
challenges encountered
follow up tasks
reflection successes
Will's use of chatGPT as a preliminary research tool was a smart move. This strategy allowed him to gain a quick understanding of how to integrate two seemingly disparate frameworks: Flask and NextJS. His ability to then manifest this understanding into practical UI adjustments shows his growing proficiency in seamlessly transitioning between research and application.
reflection failures
While Will's research was productive, it was perhaps too abbreviated. Spending a bit more time in rigorous testing and possibly seeking out more advanced tutorials or community inputs could provide deeper insights and prevent potential integration issues down the line. It's like leaving a cake in the oven just a minute too short—it's still good, but could be even better with a little more time.
research questions
tools used
Reflection
entire blog summary
Will, fueled by an alarming amount of Dunkin' iced coffee and an iron will to conquer NextJS and Flask, embarked on today's coding challenge like a knight ready for battle. Dive deep into his blog to see how he tames these wild frameworks, juggles UI designs like a coding circus performer, and deftly influences his blog builder's functionality, all while trying not to succumb to the temptations of video games, courtesy of his pesky brother.
technical challenges
Will faced the arduous task of stitching together Flask and NextJS, frameworks that at first glance seem to mix as well as oil and water. The challenge lay not just in the integration but ensuring that the UI elements aligned seamlessly with backend functionalities.
interesting bugs
None mentioned, it seems Will's coding session, while challenging, was devoid of critters today!
unanswered questions
Will still wonders about the best practices for integrating Flask with NextJS, specifically within a local development environment. It's clear he plans to scour more resources to enlighten this path.
learning outcomes
I learned alot about NextJS.