loading...
Cover image for Ocula - A weather app built on Vue 3

Ocula - A weather app built on Vue 3

andrewcourtice profile image Andrew Courtice ・1 min read

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.

Alt Text

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!

Discussion

pic
Editor guide
Collapse
rcoundon profile image
Ross Coundon

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)
Collapse
andrewcourtice profile image
Andrew Courtice Author

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

Collapse
rcoundon profile image
Ross Coundon

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

Collapse
daviddalbusco profile image
David Dal Busco

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.

Collapse
andrewcourtice profile image
Andrew Courtice Author

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!

Collapse
daviddalbusco profile image
David Dal Busco

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.

Collapse
kedar9 profile image
Kedar

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?

Collapse
andrewcourtice profile image
Andrew Courtice Author

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.

Collapse
2700036 profile image
Biryukov Sergey

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/

Collapse
lahorijawan1 profile image
Lahori Jawan

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.

Collapse
thomasbnt profile image
Thomas Bnt

Oh cool ! Added to favorites websites 🙌🏼

Collapse
bawa_geek profile image
Lakhveer Bawa

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

Collapse
andrewcourtice profile image
Andrew Courtice Author

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 :)

Collapse
edin profile image
Edin

Looks really good 👍

Collapse
cdw1p profile image
Cahyo Dwi Putro

Amazing, love it!

Collapse
fahtherbear profile image
Cody G

Really cool and love the feel! Good stuff!

Collapse
mohammedayman2018 profile image
Aymoon

Nice job ,