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
 

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)
 

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

 

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

 

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?

 

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.

 

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.

 

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!

 

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.

 

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/

 

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.

 

Oh cool ! Added to favorites websites 🙌🏼

 

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

 

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

 

Looks really good 👍

 
 

Really cool and love the feel! Good stuff!