Inspiration
Our inspiration stemmed from a shared fascination with the beauty of space and the incredible images captured by the James Webb Space Telescope (JWST). For many of us, this was our first hackathon, and we wanted to step outside our comfort zones and create something that combined our love for space, multimedia art, and storytelling. With three of us majoring in MIS (Management Information Systems) and having little to no coding experience, and one team member currently interning at NASA, we found this project to be a unique opportunity to collaborate and learn while exploring the universe in a creative way.
What it does
WonderPickle is a multimedia platform that brings the breathtaking imagery of the JWST to life through interactive visuals and music. Users can explore stunning space photos, learn the stories behind them, and immerse themselves in a synchronized audio-visual experience that combines celestial sights with curated music that enhances the mood and wonder of each image.
How we built it
We built WonderPickle using a powerful stack of modern web technologies:
- Next.js: For its robust framework capabilities, allowing us to create a dynamic and responsive platform with seamless routing and server-side rendering.
- TailwindCSS: To rapidly design and style our user interface with a focus on clean and consistent visuals.
- Three.js: To bring interactive 3D visualizations of space to life, making the exploration of JWST imagery more engaging and immersive.
- Gemini: For efficiently fetching and managing JWST images and metadata, ensuring our platform was fueled with accurate and awe-inspiring content.
Challenges we ran into
- First-Time Hackathon Nerves: For three of us, this was our first hackathon, and the fast-paced environment was initially overwhelming.
- Limited Coding Experience: Three of us are MIS majors with minimal programming backgrounds, so learning on the fly and implementing new concepts was a steep learning curve.
- Time Management: Balancing the technical implementation with creative design while staying within the 24-hour time limit was challenging.
- Integration Issues: Synchronizing 3D visuals with music and ensuring smooth performance on all devices required significant troubleshooting.
Accomplishments that we're proud of
- Creating a working prototype that beautifully displays JWST imagery, complete with interactive features and music synchronization.
- Learning new technologies like Three.js and Tone.js in a short time frame and applying them effectively.
- Collaborating as a diverse team with varying skill sets to bring a shared vision to life.
- Pushing ourselves beyond our comfort zones and completing a project in a field most of us had little prior experience in.
What we learned
- Teamwork: The importance of effective communication and dividing tasks based on each member’s strengths.
- Coding Fundamentals: For our MIS majors, this project was an excellent crash course in coding and development workflows.
- Creative Problem-Solving: How to think outside the box when tackling technical challenges with limited resources.
- Multimedia Integration: The intricacies of combining visual and auditory media into a seamless user experience.
What's next for WonderPickle
We’re excited to expand WonderPickle by:
- Adding more interactive features, like a VR mode for a more immersive experience.
- Including a wider library of JWST images with deeper storytelling elements.
- Enhancing the music library with more personalized soundtracks based on user preferences.
- Collaborating with educators to use WonderPickle as an engaging tool for teaching astronomy and space exploration.
This hackathon project was just the beginning of our journey to explore the cosmos through art, technology, and collaboration! 🚀
Built With
- gemini
- nextjs
- tailwindcss
- three.js
- typescript

Log in or sign up for Devpost to join the conversation.