DEV Community

loading...
Cover image for Space Themed Site with Mini Game!

Space Themed Site with Mini Game!

shiftyp profile image Ryan Lynch (he/him) Updated on ・2 min read

What I built

Hi all! For this hackathon (and for myself) I've built a space themed site for my work as an engineering mentor and trainer, with a collaborative mini-game! 🚀

Category Submission:

This falls under the personal site category!

App Link

You can find the application here at https://rkahn.dev!

Screenshots

App Screen Capture

Description

This site showcases some aspects and reviews of my work, as well as some personal information and thoughts. It also contains an astronaut themed mini-game. Launch an astronaut, and everyone can see it for a time!

Link to Source Code

The static site is built from this repo, and the golang / docker backend from this repo!

Permissive License

The code is all released under an MIT license. Feel free to remix it for your own purposes. The imagery on the site is not included in the repository, and is either copyrighted by myself or under the proprietary image license included in the static repo.

Background

I've been in need of a personal site for some time, but I haven't been inspired to come up with a design. I came across these space graphics a while back, and I've been meaning to incorporate them into a personal project. My personal site turned into a perfect opportunity!

How I built it

The static site and the backend are both built and deployed on Digital Ocean Apps. The images are separately hosted on a Digital Ocean Spaces CDN. The images are premium content from freepik.com and flaticon.com. I've purchased a license to them, so please don't use them without permission of their respective owners.

I tried to keep the code approachable, so the majority of the Frontend is built using just HTML and CSS and compiled with Parcel. The astronaut minigame is built using Preact with hooks!

The backend is built with Golang, mainly because this is what the Digital Ocean Docker example started as, and it seemed like a good idea! It stores all the data in memory and doesn't utilize a database. Go ahead and take a look! (see what I did there)

I had wanted to add an analytics server that used the Apps Postgres database component...but I ran into various issues involving SSL and decided to throw my hands in the air and use Segment. 🤷‍♂️

Additional Resources/Info

I really enjoyed using Digital Ocean Apps, it made the simpler things (for me) straightforward. I ran into some issues as stated with using the database component, but overall I had a great experience, and look forward to keeping the site on DO Apps for the foreseeable future!

Discussion (8)

pic
Editor guide
Collapse
krishnakakade profile image
krishna kakade

great stufff ryan

Collapse
shiftyp profile image
Ryan Lynch (he/him) Author

Thanks so much! Great to hear!

Collapse
krishnakakade profile image
krishna kakade

i need a help with this if got this help then my entry is going into valid submission category


or else if someone added credit card to DigitalOcean how many applications i can host with help of 50$ credit.
Collapse
dynamicsquid profile image
Collapse
shiftyp profile image
Ryan Lynch (he/him) Author

Thanks! I'm glad you enjoyed it! Don't forget to launch a few astronauts!

Collapse
raddevus profile image
raddevus

This looks really great; very smooth and nice graphics. Did you end up deploying to DigitalOcean? Just curious. Interesting that this has a Go backend because my recent article about learning Go got some strong comments about how terrible Go is. I like the language for what it can do and this is a great example. I've also submitted my entry into the #doHackathon challenge. If you get a chance take a look and let me know what you think.

Collapse
hunterpp profile image
Hunter Peress

Congratulations, its a marvel to behold!

Collapse
shiftyp profile image
Ryan Lynch (he/him) Author

Thanks! It took some time to build, so I'm glad it has that effect!