Check Your Imports!

I am working on a banking app. This app will allow for account creation, sign in, and logout actions. Some features will include customized greetings, multiple dashboards, animated graphs, images with dynamic data. For my tech stack, I am using TypeScript, Next.js, React, Tailwind, Node.js.
I am also running APIs to:

• Plaid for bank linking
• Sentry for software Monitoring (this app is SO cool)
• AppWrite as the database

I have really been enjoying this as a completely independent, team-size project. I am getting to put so many pieces together from my web dev journey. Not just leaning on “web designer/marketer” tech, but really building a working, cutting edge app that will certainly be used as a template for future projects for clients! I just learned a valuable lesson after 1 hour of inability to figure out why my button wasn’t showing up properly. After trying to use ChatGPT to fix my problems, I put on my real engineering hat and slowly worked my way through the clearly well-built button, conditional logic, and tailwind classNames. I worked my way back to the issue (when I should have started here). The imports!
Check your imports!! I quite literally had imported my PlaidLink object from an existing, but incorrect place and thus all the changes I was making were not showing up on the object I had imported. Nice.

Lessons Learned (addressed to me lol)

Please be an engineer

Follow the flow of your code. You need to make sure you understand the tech stack. Where does the operation start? Where does it end? Do the slow, rewarding work of developing an eye for properly working code and faulty code.

Keep It Simple

Programming, coding, and working with a network of connected technologies is naturally complex work. Still, be sure to check the simple things first (reset your server, reset your local host, check your imports lol)

Chat GPT

ChatGPT is dope. It legit answers questions way better than Google. However, Documentation and Engineering >>>>.