I wanted to create a simple web application working with Rust and WebAssembly for the first time, and I had never created a weather web application before, so I decided to make Weathery.

What it does

Weathery is a weather web application created with Rust, Node.js, and WebAssembly. Just type in the city name (Example: "Toronto" or "London, CA") in the search bar and press the "Get Weather" button on the screen or press the Enter key on your keyboard to get the current weather information for that city. Weathery will display the weather in both Celsius and Fahrenheit.

How I built it

I built the static frontend with HTML 5, CSS, JavaScript, and Bootstrap. I also used the particles.js library to create a cool particle effect on the screen as well. For the backend, I mainly used Node.js to handle all the weather query requests and processing, and I used Rust to create a function to convert between Celsius and Fahrenheit, which I compiled into WebAssembly and then to JavaScript for the Node.js services to use. I implemented the OpenWeatherMap API to get the weather information, and I used Docker with the Second State Virtual Machine (SSVM) engine to easily compile the Rust code to JavaScript. For version control, I used Git from the command line and GitHub.

Challenges I ran into

The biggest challenge I had was installing Docker to run the Node.js backend and SSVM engine for the application. I was not able to install the latest version of Docker Desktop for Windows due to it requiring the latest version of Windows 10 updates, so I had to install Docker Toolbox instead, setting up port forwarding in Oracle VM VirtualBox to run the web application on localhost.

Accomplishments that I'm proud of

I am proud of working with Rust and WebAssembly, both of which are new and exciting technologies that are starting to be used seriously due to their major gains in performance for web applications.

What I learned

I learned how to implement Rust and WebAssembly with Node.js and how to compile and run the code with the Second State WebAssembly engine and Docker.

What's next for Weathery

I want to display more weather information in Weathery, with options such as a 7-day and hourly forecast.

Share this project: