fait frette

si t'aimes pas la meteo de ta ville, on te donne une liste de ville avec un climat qui te convient!

Comment 1

Inspiration

In Montreal, we often experience various types of weather; from extreme heat waves all the way to glacial frost storms. The recent and unexpected lower than ever temperatures are proof of that. What if there was an app that let you choose your preffered weather situation, compared to anywhere in Canada, and in turn give you suggestions of cities all across the country in which you would reside best? It's cold here! I want to be anywhere else but here!

What it does

The user inputs which city in Canada they reside as well as when they want to leave their in the next 7 days. They can then input their ideal temperature, wind and humidity to be lower or higher than those of the city they are in. Our applications then searches the free weather api for weather conditions specified by the user, in that time frame, and returns a map visualization along with a number of cities that match those desires.

How we built it

We made the initial design in Photoshop, making sure we implemented an user friendly and interactive website. With the help of React and many javascript libraries, we then built the project and coded the frontend. some of the tools we used include: -tsparticles for the background -material UI for many interactive parts (lists, texts...) We custom crafted (our own svgs and scripts) an interactive and animated map of Canada and all of its provinces.

Challenges we ran into

Our biggest challenge was implementing our custom map. We decided to create our own interactive map from scratch, by importing custom SVGs of provinces. It was difficult placing map markers at the right places on our map, as we had to translate coordinates, from google maps, in latitude and longtitude into coordinates in our app. For this, not only did we have to translate position into coordinates, but also come up with our own formula to translate real-life coordinates into on-screen pixel coordinates. There were a lot of other challenges, such as finding the right databases, laying out the elements of our page (which would often conflict), and designing our UI, amongst many others.

Accomplishments that we're proud of

As it was our biggest challenge, we are of course very proud of our interactive map. I think we can be proud of the functionality in general, as some of us in our team only have a few weeks of frontend development experience. We felt that the division of labor was quite efficient, which definitely helped with completing the project in time.

What we learned

We firstly learned quite a lot about creating an interactive map in our app, as none of us had ever done something like this. It was an interesting experience, although frustrating at times when things didn't work as intended. We also gained quite a lot of javascript and React js development experience in general, and making a full project like this boosted our abilities quite a bit.

What's next for fait frette

We could definitely improve the appearance of the UI to look more modern and appealing. We could also display more weather information on the cities that come up, as at the moment it only displays their name, coordinates and population.

Built With

Share this project:

Updates