DEV Community

Cover image for Introducing SunPuff :: FUN ON IPFS
Nathan Renfroe
Nathan Renfroe

Posted on • Edited on

Introducing SunPuff :: FUN ON IPFS

This is a submission for the The Pinata Challenge

What I Built

This challenge came at just the right time for me. When I saw The Pinata Challenge, the idea immediately came to me for a simple app that would allow users to drag and drop files and get an IPFS cid that they could share with friends. I stayed up till almost midnight Oct 4, working on the prototype for my file sharing app, that turned into and image and meme sharing app. Some where between then and the next morning I got the idea to create a little game of connect 4, with game progress that could be saved and loaded over IPFS.
And the connect 4 game board gave me the idea for and art board.

So yeah, that. And the perfect name, SUNPUFF. This app is all about sending puffs of brightness, and is fun for friends and family! One of the things that I loved to bring to this app was my years of design and developing experience. The color palette, and font CAPITALIZATION where all very intentional, I hope I am not the only one that thinks the sunpuff design is beautiful.


Demo

SUNPUFF can be accessed on gitlab pages, or you can try it on codepen below.

yellow

SUNPUFF IMAGES - SHARE IMAGES AND MEMES WITH FRIENDS!

Fun Memes to try viewing
(These images have been uploaded and optimized with pinata api)

  • bafkreifri3eb2cgelcz4oepz25uu4ndg7vuvizp5o7ezlou3mmgtyhajhm
  • bafkreieyrheqtu6nx2p2zoymkfdcr4n4zylbufdbusxqjmll2fyyu2zg2q

pink

SUNPUFF CONNECT FOUR - PLAY CONNECT 4 WITH FRIENDS!

Find someone to play with!

orange

SUNPUFF ART - CREATE AND SHARE ART WITH FRIENDS!

Made with SUNPUFF ART

  • QmSE8DC2C1g4dBPgKcAbnG485cb8iNHPP4ywjjqkpK8eXj - tree
  • QmeyKdoqnirXcaxiCS6P27NVjZbMxt1WZ54CgiRcA1UMQx - face?

My Code

I want to give a full disclosure all of the JavaScript to make my app work was generated by MICROSOFT COPILOT. (also some of the css)
If I was skilled at writing javascript this project would have been much easier, instead I spent hours sending prompts to copilot to fix things that should have been a given. This is my favorite way to develop new apps, I get to have fun testing them, copilot does all the behind-the-scenes work to make everything work.

My code can be found in the SUNPUFF repo on gitlab. HTML, CSS, and JS for web app can be found in the "PUFFAPP" folder, docs on my dev journey and how I used ai can be found in the "DOCS" folder


More Details

Each sunpuff app uses pinata api to save and load data on ipfs.

A thought on accessibility, I thought it would be cool to develop some kind of telegram or discord bot for this to enable faster and easier sharing. Right now there is just the website and users have to share ipfs cid's in their favorite messaging app.

Top comments (0)