my dream sky

mainpage-thumbnail
save-dreams
hover-dream

Inspiration

I've always wanted to code something fun, not very functional but something that makes me happy. And being guilty of daydreaming, i decided to code a small project that works as a dream journal. And as someone who is passionate about astrophysics, I thought, why not combine all of these interests together and that was how 'my dream sky' was born. Each dream turns into a beautiful star and all these stars combine together to form a constellation.

What it does

User enters (types) their dream in the box (form). User clicks on 'create star'. The dream turns into a star and appears below. Similarly, user can add as many dreams as they wish to and each time, the stars connect to each other forming a constellation-like pattern. User can hover on each star to re-read the dream and can delete a particular dream by clicking on trash can icon above the star. User can also click on 'save dreams' which will save all the dreams a text format as a (.txt) file.

How we built it

I first made some rough sketches on paper, then some non-working prototypes on Canva. I later created a folder and started coding in VS Code. As I'm most familiar with HTML, I began adding the basic elements and as it is a one-page website, it didn't take long to finish. Then, I worked on CSS for two days, adding fonts, and experimenting with colors. Then I created a JS file to animate the stars and form a constellation using x,y co-ordinate positions.

Challenges we ran into

The stars going beyond the screen area - solved by maintaining a definite area and not go beyond the screen.
The lines would not connect each star to another - so I used relative positions to make sure they stay connected and it works most of time. (Need to work on it more)

Accomplishments that we're proud of

This is my first ever project with Java script, I had only used HTML and CSS till now. Unlike previous projects, I decided to make something not necessarily very useful, but rather fun and interactive. This is the closest I've ever made to a mini-game and I feel so proud of myself!! Also, a lot of times I do not end up finishing my project and end up not submitting but this is the first hackathon I am part of and I actually am submitting, it feels so unreal! I got to learn more JS in the last week than I had from the past year. I want to continue improving this and make even more fun/cute projects.

What we learned

Time management - At first, 1 week feels like a lot. But as minutes turn into hours, and hours into days, suddenly it feels so overwhelming. Being consistent with 'my dream sky' helped me a lot to be able to finish this. Some days I spent 3 hours in a row, others just 30 minutes. But I was able to finish it because I never stopped.
Design - I consider myself a novice designer and trying to make the initial designs for 'my dream sky' was very hard. I couldn't figure out color schemes and tried multiple fonts but didn't like it. After a lot of trying, not liking, and replacing, I ended up finding my 'dream' layout (no pun intended :)). I'm actually much more confident using Canva now for my prototypes.
No idea is ever useless - My first thought was, 'Wait, this isn't really useful. Why would somebody even need a sky that acts as dream journal? I then asked my friends what they thought of it. They told it was actually useful for logging dreams and seemed fun to see the dreams as stars. Not every idea has to be the next big revolution. Sometimes it simply needs to make life a little fun for someone. 🤍

What's next for Dream Sky

Add an option to link a spotify playlist
Include a 'dream slideshow' where users can interact with the stars as they transition from one dream to another with the playlist playing music in the background.
Reframe the system in a way that dreams can now be organized with topics - such as school, anime, etc. They branch out as separate constellations.
Optimize mobile layout (improve responsiveness)