DEV Community

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

Ocula - A weather app built on Vue 3

Andrew Courtice on September 24, 2020

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 wri...
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 ,