This simple app changed everything for me. Up to this point, I felt comfortable writing some code, but it felt forced. I wasn't sure what to use or when to use it, other than very simple animations or events. I still felt intimidated by APIs, hadn't used promises, and was terrified of callbacks. Over the past year I'd read countless times that one day this would all 'click' for me, but what did that mean? Would I know when this happens? It turned out that the answer was yes, and I'd find that answer just a few lines into this app.
As I began this project, I was following a tutorial. I figured I'd just follow along and hopefully catch on to a few main aspects of the coding, then move on to my next project. For some reason, as I typed out the first few lines of code alongside the tutorial, everything suddenly clicked. After fetching one API and displaying its contents in the console, I closed the tutorial, deleted that code, started over, and would then build the entire app from scratch. Some of the code was redundant, some was a bit messy, but it was mine. And I hadn't felt this excited in years.
My plan was to make this a minimal app. I wanted it to display the weather, perhaps on a grey background, and that would be it. But as I understood more about what I was coding, all I wanted to do was add more custom features. At this point, I decided to download Figma to get a grasp on creating mockups. I started learning the pen tool, created custom shapes for the whole app, and then translated that mockup into code. Once I had the layout coded, I knew I wanted to add additional features like a forecast, custom changing weather icons, and an advanced weather box. My website looked identical to my mockups, and I couldn't wait to begin the programming.
I was finally using many of the things I had learned but hadn't used in practice. Destructuring arrays and objects, looping through arrays, working with dates, times, and coordinates, and so much more. I really had to problem solve to create all of the features I wanted. This would result in periods of brainstorming before doing any actual coding, and introduced me to flowcharts that I would use to plan out new features. Breaking the problems down this way made complicated features much easier to write out, and saved me from a lot of wasted time as opposed to my strictly trial and error approach I had been using up to this point.
After a good amount of testing and debugging, my app was done. I decided to learn about PWAs and turned this app into one which I installed on my work computer as my new weather app. It was just a simple weather app, but I was so proud of what I had created. I couldn't wait for my next project, but I was now also well aware that I needed to begin learning a framework alongside my vanilla JS studies. I wanted to cut down on the redundant, repeated code and create code that would be reusable. I dove into Vue and Svelte and immediately understood the value they could bring to large scale projects.
The biggest challenge I encountered with this project was finally needing to debug. I would 'finish' a feature and it'd look great...for a few hours. Whether it was a miscalculation with the time conversion function I had written, or something in the API I hadn't accounted for, I found myself debugging often. And I loved it! I had so much fun creating this app, and I was excited any time I had the chance to re-write or simplify my code as it lead to me further understanding how all the moving parts interacted with (and sometimes broke) each other. This not only strengthened my ability to write new code, but also helped me to code cautiously so as to work in harmony with all of the other features within the app.
The other main challenge I faced was creating a pleasant UX on mobile devices. Auto-scrolling, keyboard pop-ups blocking elements, etc. all gave me the opportunity to brainstorm some new features to aid in a pleasant mobile experience. One example would be the page auto-scrolling when entering a city in the search bar. The keyboard would force the page to scroll down, which was fine, but it left the user at the bottom of the page after entering the search. Because of this, the user would then have to scroll back up to see the main weather display. I addressed this by adding a simple back-to-top function to the search icon. The result was a nice and smooth scroll that avoided hiding any information on the page. Tackling these problems to improve the UX felt great, and I was excited to see what other UX issues I could improve on.
The biggest takeaway from this project was that I can do this. A lot of my fears and insecurities were squashed the second I cleared the tutorial code and began writing it out myself. I realized that I do understand how fetching APIs works, I can write my own functions that go beyond surface level, and that I am able to locate bugs and fix them myself. This boost in confidence led me to jump right into Node.js, Express.js, and MongoDB, which I'm learning now.
One other takeaway was that planning is key. From using Figma to create a mockup for the layout to using flowcharts to plan the code out, I found the whole process to be much more manageable with this approach. Figma and flowcharts are now a part of each one of my new projects, and I find myself creating and learning much more efficiently while debugging far less often. These lessons carried over to my portfolio site, which I initially had no direction with. After planning my code out, I was able to add several elements that I couldn't quite wrap my head around before. After using Figma to create the mobile layout first, I found myself compromising a lot less with the design while adding more features, not taking them away.