Weather App
Practising front and backend integration.
Objective
My goal with this project was to learn how to set up a local server with Node.js, build a simple backend using Express, and deepen my understanding of JavaScript fundamentals such as DOM manipulation and handling API responses.
Set up
Front end
HTML, CSS and vanilla JS
Backend
HTML, CSS and vanilla JS
Deployment
I used Render to simplify the deployment process allowing me to deploy a traditional Node.js server without the need to separate my front end and back end deployments.
Challenges
The weather API I used only works with coordinates, so I created a custom API endpoint that converts a user’s inputted location into latitude and longitude (using a geocoding API). I then set up another endpoint to fetch the weather information for those coordinates and dynamically update the DOM with the results.
The interaction between the user interface, my server, and external APIs made the project feel like a true full-stack application, giving me experience with both frontend and backend development.
Learnings
Frontend and Backend Communication
I gained hands-on experience with what happens behind the scenes when the frontend makes HTTP requests to the backend. I also learned how the backend can serve as a middle layer by calling external APIs and sending cleaned-up JSON responses back to the frontend.
DOM manipulation with API data
By parsing JSON and dynamically updating the UI with vanilla JavaScript, I strengthened my confidence in working with asynchronous code and event-driven updates—skills that allow me to build interactive and responsive user experiences.
Full-Stack Perspective
My biggest takeaway was understanding the complete flow: from capturing user input on the frontend, to the server’s role in the backend, to using Express as middleware for API calls, and finally updating the frontend through DOM manipulation. This gave me a clear picture of how all the pieces of a full-stack application work together.
✅ Outcome
This project helped me strengthen my full-stack skills while building something tangible that solves a real problem: making weather data accessible to users through a clean, dynamic interface. It improved my ability to structure applications with clear separation of concerns and gave me practical experience in integrating third-party APIs.
