DEV Community

Cover image for Ocula - A weather app built on Vue 3
Andrew Courtice
Andrew Courtice

Posted on

Ocula - A weather app built on Vue 3

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!

Top comments (18)

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

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

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

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
 
2700036 profile image
Biryukov Sergey • 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/

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
 
fahtherbear profile image
Cody G

Really cool and love the feel! Good stuff!

Collapse
 
bawa_geek profile image
Lakh Bawa

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

Collapse
 
andrewcourtice profile image
Andrew Courtice

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
 
mohammedayman2018 profile image
Aymoon

Nice job ,

Some comments may only be visible to logged-in visitors. Sign in to view all comments.