I built this project from scratch. I am not following any tutorial and I was on my own. I practiced a lot with codecademy and freecodecamp. I simply started building on my computer first because I had no idea we can build using a Vite setup as well. But this was a great learning process. The APIs used in this app are:
- LocationIQ (for reverse geocoding)
- WeatherAPI
- JavaScript Leaflet library
- Geolocation web api (for coordinates)
1- Picturing Elements With methods like getBoundingClientRect(), it was helpful to picture the elements and how they work with the viewport. It is still difficult to remember when to use which method and property built-in the browsers. Such as the offset properties, I was struggling with picturing what offsetWidth or offsetHeight really do.
2- Translate properties I have used them a lot and on many occasions during this project. The toughest was to create the parallax effect. I did not just want to learn to add very little javascript to add responsiveness, I was going online to find really good websites and trying to mimic their animations.
3- HTML structure The projects that I worked with so far while learning javascript use very fixed HTML structure. But the parallax effect that I wanted to create actually led to a structure where I had to add the navbar not at the very top, but after all of the divs. It was very new to me.
4- Hiding API keys I found out that we need to hide the API keys because they are visible in the browser's developer tools. I had to go through many trials and errors to learn about this one. I learned about writing .env files locally but that does not help. Then I read about Amazon lambda functions but that never happened for me. Laster on I found out netlify's serverless functions. So far, it was the fastest and the easiest solution out there. I only know to look in the developer's tab for the api keys. And I was able to hide them with netlify. Hopefully, that is a step in the right direction.
4- Modulo Operator Wrapper This is my first itme leaning about modulo operator as a wrapper to switch from one array to next! I also got some supplement lessons to learn about creating circular arrays with modulo operator. I learned about it after making a mistake of iterating through one day's hours and instead of jumping to the next day, re-iterating over it again. Modulo operator saved the day for me.
📒 Personal Notes:
💥 Building a project is different than learning about code in small nuggets. Building projects has a different thinking pattern.
💥 It is importnat to break things to learn to build them correctly for different users.
💥 This project highlighted the gaps in my learning and how much I still need to practice and spend time on understanding JavaScript
I want to learn about using storage and building applications with user profiles. So Users can personalize the app, as well as connect it with thier socials.
If you have any suggestions or want to share knowledge about React hooks, feel free to reach out!
🌟 GitHub: uroobaCodes 🌟 Email: [email protected]