Collagery - A collage gallery builder

Denny Ferrassoli — Mon, 13 May 2024 05:17:06 +0000

This is a submission for the Netlify Dynamic Site Challenge: Visual Feast.

What I Built

Collagery is a dynamic "collage" / "gallery" builder. Add images to your collagery, specifying the layout and quality of images.

I unfortunately had very limited time for this submission, so I rushed through a lot, but I really wanted to participate. I hope you enjoy playing with it as much as I did building it.

One neat use-case was that you can add the same picture with different quality to get a side-by-side comparison of the images.

Demo

DEMO: https://collagery.netlify.app/submission
Source: https://github.com/dennyferra/netlify-gallery (pardon the mess)
Originally sourced from https://nextjs-platform-starter.netlify.app/

Select your image and configure your settings

Build your collagery

Platform Primitives

This submission uses the Netlify Image CDN to transform and deliver images quickly and efficiently to enhance the user experience. It also takes advantage of a basic caching utilizing the Cache-Control header configured with public, max-age=604800, must-revalidate.

The Netlify Image CDN was very easy to get started with and if I had more time I would like to have provided users with more customization of the transforms. The API makes it very easy to use in a dynamic context and would save me a ton of time versus trying to setup my own back-end image transformations and CDN. Cheers to Netlify!

EGG: Ethereum Guessing Game

Denny Ferrassoli — Thu, 24 May 2018 22:41:53 +0000

What I built

🥚 EGG: The Ethereum Guessing Game! Can you see the future? Then you'll win mad internet fame by playing EGG. Guess what you think the price of Ethereum will be before the round ends and whoever guesses closest wins the round!

Now for the marketing version:

An innovative real-time e-sports guessing game that leverages the Ethereum decentralized platform empowering players to deliver best-of-breed analysis of future market trades! (ICO coming soon)

Demo Link

https://etherguess.herokuapp.com/

Link to Code

I split up the back/frontend so there are 2 repos:

Backend: https://github.com/dennyferra/PusherContest
Frontend: https://github.com/dennyferra/PusherContestFront

How I built it 🤓

I started out not really knowing what I wanted to build but I knew what stack I wanted to use: Node/Express, React/MobX. I built a few MobX projects prior to this and I was interested in trying out some features of MobX that I hadn't used before. I was very limited with time so the code is quite unorganized, slapped together with duct tape and marshmallows, and likely has bugs (no tests), but I might revisit it at a later time and clean things up.

I used Bulma CSS Framework for the first time. Started out with a template and overall it was pretty easy to work with. I also used some animations from Animate.css.

I stumbled on CodeSandbox and ended up writing the frontend entirely using their online editor. It's a really nice editor, feels like VS Code, and they have support for various frameworks like React, Angular, Vue, and Preact.

Interestingly enough the easiest part of this project was using Pusher. I had a presence channel and public channel set up in no time at all. Their documentation made it pretty easy to get set up. My only issue was the auto-reloading of CodeSandbox - it ended up keeping channels open so I inadvertently hit the 100 concurrent users limit. After I realized what was going on I changed a setting in CodeSandbox to fully reload on changes and then my problems were gone.

Hosted the site on Heroku so the Dyno will time out when no users are on the site, but that's unlikely since I'm pretty sure this game will be the next Facebook 🔥 Have fun, thanks!

DEV Community: Denny Ferrassoli