Andrew Courtice

Posted on Sep 24, 2020

Ocula - A weather app built on Vue 3

#vue #javascript #webdev #typescript

Hi Everybody

I wanted to share with you a project that I have been working on over the past few weeks: Ocula.

Ocula is a free PWA weather app written using the latest version of Vue. It is designed to look and feel native on mobile devices while also offering a nice desktop experience.

Some of the features include:

No location restrictions - available worldwide
Daily forecast for up to 7 days
Hourly forecast data for up to 24 hours
Trend charts for hourly temp, rainfall and wind
Interactive weather maps with 6 different map types (radar, precipitation, temp, cloud, wind, pressure)
Frame-by-frame playback for radar images to visualise incoming rain
Dark/Light Themes. Default theme changes based on current time of day
Options to reorder or hide forecast sections, set your preferred map type, units and more
Open-source, privacy friendly, and best of all - free

The app is currently in an alpha phase but I'm hoping to get some early feedback from the community to address some glaring bugs/UX issues.

Head over to app.ocula.io to check out the app and let me know what you think. The source is also available here.

Thanks!

Top comments (18)

David Dal Busco • Sep 24 '20

Well done Andrew, the app is really smooth and I like the design 🚀

Regarding UX it was really straight forward, never lost track and the on-boarding process was clear.

Only point I did not get are the numbers in the daily forecast but, I am not that into weather forecast so it is probably just because I don't know these.

Congratulations and super cool that you open sourced it, starred ⭐

P.S.: I mean these numbers, just in case.

Andrew Courtice • Sep 25 '20

Hi David, thanks for the feedback - I really appreciate it.

That's a really good point to raise. Those numbers indicate the daily low and high temperature. I really struggled with this part of the design because on larger screens I can just put a min or max label next to it but on mobile there's very little room to play with here.

If you have suggestions on how to make these numbers easier to understand I would really appreciate it.

Thanks again for your support and feedback!

David Dal Busco • Sep 25 '20

Oh I see. Don't know if it would works with any units but adding ° would make it more clearer to me and maybe "7° 14°" doesn't need much spaces?

While testing again I something else. In "Settings", when I change the "Units" the app ask me again if I am agree to share my location. Not sure how it is related.

Hope that helps a bit.

Kedar • Sep 24 '20

Such an amazing app. I am myself planning to make a weather PWA for sometime now and this is motivating. Its such a neat app. I loved how Hourly Forecast graphs smoothly transition between the three categories.
How long did it take for you to build this?

Andrew Courtice • Sep 25 '20

Hi Kedar, thanks for your feedback. That's great - you should do it! It's taken me about 2 months so far. It's taking me a little longer to get anything done because I only work on it about 4-6 hours a week given that I work full-time and have various other commitments. I'm hoping to work on it more regularly in the coming weeks.

Ross Coundon • Sep 25 '20

Unfortunately, for me, I can't get it to properly load. Using Chrome I see the following console error

TypeError: e.map is not a function
    at VM88 maps-d4ec439c7e2b41806362.js:1
    at mt.n [as effect] (VM59 vendor-bb72ae072534eaa314f2.js:2)
    at mt.get value [as value] (VM59 vendor-bb72ae072534eaa314f2.js:2)
    at VM88 maps-d4ec439c7e2b41806362.js:1
    at mt.n [as effect] (VM59 vendor-bb72ae072534eaa314f2.js:2)
    at mt.get value [as value] (VM59 vendor-bb72ae072534eaa314f2.js:2)
    at vt (VM59 vendor-bb72ae072534eaa314f2.js:2)
    at Object.get (VM59 vendor-bb72ae072534eaa314f2.js:2)
    at Object.get (VM59 vendor-bb72ae072534eaa314f2.js:2)
    at Proxy.<anonymous> (VM88 maps-d4ec439c7e2b41806362.js:1)
    at ne (VM59 vendor-bb72ae072534eaa314f2.js:2)
    at VM59 vendor-bb72ae072534eaa314f2.js:2
    at n (VM59 vendor-bb72ae072534eaa314f2.js:2)
    at s (VM59 vendor-bb72ae072534eaa314f2.js:2)
    at I (VM59 vendor-bb72ae072534eaa314f2.js:2)
    at R (VM59 vendor-bb72ae072534eaa314f2.js:2)
    at U (VM59 vendor-bb72ae072534eaa314f2.js:2)
    at O (VM59 vendor-bb72ae072534eaa314f2.js:2)
    at VM59 vendor-bb72ae072534eaa314f2.js:2
    at n (VM59 vendor-bb72ae072534eaa314f2.js:2)
    at wt (VM59 vendor-bb72ae072534eaa314f2.js:2)
    at Wt (VM59 vendor-bb72ae072534eaa314f2.js:2)

Andrew Courtice • Sep 25 '20

Hi Ross, thanks for letting me know. I'll have a look into it.

Ross Coundon • Sep 26 '20

No worries. Possibly related but it asks for permission to use my location and when granted it doesn't seem to actually manage to determine a forecast

Biryukov Sergey • Sep 24 '20 • Edited

Suuuuper! Here is my weather application, but on React, I wonder, can I apply for the Junior position with this
skills level? So far, for some reason, there have been only refusals :(
sinoptik.netlify.app/

Lahori Jawan • Sep 26 '20

Refusal doesn't mean you don't have potential it simply means to keep improving & trying. Mean while you can build a chat app with 1-to-1 chat box like facebook chat. Another is notes taking app with some cool transitions etc.

Thomas Bnt • Sep 25 '20

Oh cool ! Added to favorites websites 🙌🏼

Cody G • Sep 24 '20

Really cool and love the feel! Good stuff!

Lakh Bawa • Sep 24 '20

Great job, can you share what CSS libraries or framework you used for UI design

Andrew Courtice • Sep 25 '20

Hi Lakhveer, thank you for your kind words. I'm probably a little old-fashioned in this sense but I don't use any CSS frameworks - I write everything myself :)