space-pulse
- 2 Devlogs
- 4 Total hours
im gonna fetch all nasa's data mwahaha...
Ship #1
Pending review
Space Pulse is my HTML/CSS/JS dashboard with links, notes, NASA’s Astronomy Picture of the Day, and a Hyperion arcade game. I have redesigned the default dashboard theme and layout, removed some default widgets, and added light/dark theme toggles. NASA’s APOD picture is imported with a server-side API route to keep their API key private. The Hyperion arcade game is made into a draggable/resizable window with controls described on first use for WASD and arrow keys and uses browser storage/postMessage API to save scores, high score, last played date, and playtime and communicate with the dashboard. The most challenging parts of this project were enabling communication between iframe and the dashboard, saving data in the browser, avoiding double-counting the playtime, and preventing multiple game instances from being opened at the same time, and making sure that NASA’s API key is not leaked anywhere when deploying the dashboard. Finally, I have learned that nice code is not enough, and one has to care about data persistence, security, and debuggability.
23m 54s logged
deployment successfully completed and the orbit browser is on live please check and use it and customize accordingly any suggestions/modifications are accepted
3h 26m 36s logged
Space Pulse 1st & Final Devlog
Space Pulse is my personal browser dashboard made with HTML, CSS, and JS. All the cool links I have on my bookmarks, my notes, the awesome NASA APOD, and my mini-game are all mashed into one neat dashboard.
On the first commit, it was too busy and generic, so I changed some stuff up. In the second iteration, I made it my way: minimalistic, no quick-checks, and only what I need on a daily basis. Added light/dark mode, persistent notes and links, and made it responsive.
I added NASA APOD API as a cool feature and made it a server-side request so nobody can steal my NASA token. The big thing I added was the Hyperion Space Defender game. I gave it a nice Play Game screen, made it have instructions for the WASD keys and arrow keys to move, the window is draggable and resizable, and even a first-time tutorial that gets saved with localStorage.
In order to hook the game up to the dashboard, I used postMessage() to get the score, the high score, the number of sessions, the last time the game was played, and the total playtime. The hard parts about this project were getting the iframe game to communicate with the parent window, keeping the stats persistent, not letting the game count playtime if it was closed accidentally, securing the NASA API request, and figuring out what features are needed and what’s not.
This was a big project for me because I learned the importance of state, persistence, APIs, security, debugging, responsiveness, and some neat little UX features in a website. Space Pulse is the final product of all the lessons I’ve learned while making it.
