Hack to the Future is an interactive educational browser experience that guides you through the perspectives of programmers throughout the decades of coding. From the 60s to now, experience and learn about early languages as you actually type them out! We hope you learn something new and spark an interest in the vast history of computer science.
👾 Play the game NOW at http://www.hacktothefuture.co
All of us are well into our computer science academic careers at this point in our lives, and over the years we have developed a great appreciation of the history of programming. At first when we heard the theme (Perspective), we had a tough time thinking of a project idea. One thing we had all agreed on though, was that we didn’t want to focus purely on generative AI, as we had all had participated in plenty of hackathons prior, and we were all pretty “AI-ed out”. We decided we wanted to work on a project using a technology we had never used before but looked really cool, ThreeJS, and thought an interactive journey through the decades was a perfect love letter to the study of computer science.
- 3D models of several iconic computers throughout history
- Educational walkthroughs through old and new computer languages
- Actually type on a PDP-1 and an Apple Macintosh!
- An introspective ending on where the discipline is heading…
🎥 View our video walkthrough here!
Hack to the Future was developed using Next.js to handle server-side rendering and image optimization alongside React for building our user interface. For 3D graphics, we integrated Three.js through React Three Fiber, allowing for 3D rendering within React components. The visual styling was managed through Tailwind CSS, using Lucide-react for icons, Framer Motion for animations, and Use-sound for audio integration. The application was deployed through Heroku's platform with a GoDaddy-provided domain. Git and GitHub was used for version control during development.
As none of us had any ThreeJS experience prior, and only half of us had any frontend experience at all, we took this as an opportunity to learn! ThreeJS is a very impressive technology, and if we took away nothing else, we know we want to continue to learn about it and use it in future projects. We really put ourselves out of our comfort zone this time, and it resulted in our most productive and educational hackathon yet.
This is more of a proof of concept - but we think it has the potential to become a full fledged video game or interactive museum piece. We would like to include more models and more languages. Also, we think it would be really cool to have a more advanced code interpreter in each of the languages presented so that you could write real code in BASIC or FORTRAN and have real outputs!
We acknowledge the assets used in this project in our attributions file.