DEV Community

Trevor Browning
Trevor Browning

Posted on

The Bug Was One Character Long: Lessons From My First Full Stack App

The Initial Climb

Recently, as part of the upcoming freeCodeCamp Hackathon, my assigned team decided on the stack it would use:

Vue
Express
Typescript

At that point, I had only ever worked with basic HTML/CSS/JS. I had just recently learned how to set up Firebase, using it for a Discord group project for a kanban-style board. Dev Dashboard

At first, when looking up documentation and tutorials, I felt overwhelmed with how to properly handle Express, what went into securing an API, and how to properly run it. It took me a few hours of just going over everything from installation to usage.

After a bit though, it started to click. Once I found out what goes into setting up a backend, it started to make a lot of sense.

I worked on it for a few hours over the next few days, learning as I wrote new code — from hashing passwords to using .env to store environment variables.

Everything was going smoothly up to that point. I had the basic structure completed. I then had the new task of learning Vue.

Like I previously mentioned, I had only had experience with HTML, so switching to a component-based language like Vue was a new challenge, but like with the backend, it started to click. I had a working login flow, a secure API, and a frontend that could talk to it. I had built a full-stack application, albeit very basic, from scratch. Flushed with success, I decided to add one last "simple" feature before calling it a night. It should have been just a quick change. Instead, it made me want to start over.


The Descent Into Config Hell

At that moment, I was working on setting up the project routes and getting everything connected.

It should have worked perfectly fine, but something was wrong.

Error.

Only a simple error, the import was a bit off. No big deal, I fixed it.

I tried testing the server and frontend. Errors everywhere.

It made no sense. Everything was working great. It had been live 10 minutes prior with no issues whatsoever. The error messages were no help. I was getting a wall of red text about things like Cannot find module or No overload matches this call..., pointing to lines of code that hadn't been touched since the last successful run. It felt like I was going insane.

I tried using Google, no luck. I tried using ChatGPT to help me understand the error messages. All that did was run me in circles and suggest breaking 90% of my project by uninstalling dependencies and rebuilding the project with new imports.

After about 3 hours, nothing worked.

I was at a standstill with this project I just wanted to complete — the project I had a soft deadline for before the Hackathon started at the beginning of next week.

I decided to try one more fix.

I recreated the entire project from the bottom.

Unfortunately, after another handful of hours, I received the exact same error message.

I scanned every file, every folder. Everything looked correct (to me).

On my last bit of patience before giving up, I decided to look at my previous Git commits, just to prove to myself that it had been working.

I was scrolling through the file list, comparing it to my current project, not expecting to find anything. And then I saw it. A detail so small, so insignificant, that I had scanned past it a hundred (if not more) times.

A single character that had brought my entire project to a grinding halt.

In my project folder, the file was named ts.config.json.

I was exhausted, irritated, but making that one fix to correct it to tsconfig.json changed all of that. I felt the stress leave immediately. I was more annoyed that I had missed it so many times.

npm start | npm run dev — the server and frontend go live. No errors in sight. It was such a relieving moment.


The Payoff

I’m not an experienced developer. I’m still very much at the beginning stages, but it was such a satisfying moment once I fixed that simple mistake. I was so close to completely scrapping the project and working on something more my level. Thankfully, I kept persisting. I kept trying to find the root cause of why it was happening.

It only took another 6 hours or so to completely finish the first version of the project. I’ve never felt so proud to complete a project of this scale to date. I felt… accomplished. It’s only a simple full-stack that isn’t going to change the world, but I created it, I fixed it — it’s mine. I have this newfound confidence which will only help me grow as a developer.

Always stay persistent. Keep looking for that typo.

It will be worth it.

GitHub Repo

Live Demo

Top comments (0)