My new Liveview indie project: Gamedrop – Videogame collection management, price alerts, and prices

My brother and I built this over the last 28 days using Elixir and Phoenix Liveview.

Since day 1 our goal has been to launch as quickly as possible and get something useful out to gamers like us. We want to make it very easy to manage your game collection, your price alerts, and find good videogame deals from brick and mortar stores. We’re going to expand soon to other physical stores and ultimately add in digital storefronts as well.

Think Pinterest for videogames.


We got so much for free with Liveview here are some learnings:

Leverage the generators to create a sample “best practice” schema and learn how to best use liveview. mix phx.gen.context --live was very useful to me so I could finally understand how the modals work.

We got reactivity for free out of the box. List all price alerts on the game page on mount. When you add a price alert, it navigates back to the game page and reruns mount and diffs the dom with only the missing pieces. For free! We get super slick UX without doing anything fancy. Liveview is magic.

Organize your live_sessions properly to avoid as much full page reloads as possible! Our site feels SPA because we share a live_session for the whole thing. For free!


As we scale out the project and build new stuff I’ll share what I learn. It’s just my brother and I but by using Liveview, we managed to build a really fast, easy to deploy, nice feeling website. I don’t think we could have built the same project in any other tech stack and kept our velocity and “security” in how things flow within the backend.

11 Likes

Looks good @Sergio!

You should definitely consider adding browse by platform… and then sort by: biggest saving, release date, price etc. You could even include pricing history like camelcamelcamel does. Good luck :023:

2 Likes

That’s a great idea, more powerful filtering on the home page!

1 Like

Looks simple and clean!

Is it possible to look at code?

Greetings

2 Likes

As a sidenote, if you want a great database of games, IGDB offers a free api you can get data from, used it in one of my projects and it works like a charm.

2 Likes

Looks like my brother forgot to add the IGDB logo we had in our old homepage. IGDB has been wonderful for us and really useful for sure!

I’m going to work on user avatar image uploads over the weekend, and I’m going to use the Liveview upload primitives. I’ll share how that goes, hopefully it’s very smooth I definitely don’t want to use Dropzone or similar.

This list feature was really fun to build with Liveview and js hooks. It’s fun to build features again because it’s so intuitive to use liveview.

How do you track the prices? I always wondered how price tracking websites work. Is it some kind of crawlers you’re running every X amount of time?

1 Like

I love your project.

I see the same games repeated multiple times. I understand that games get launched in multiple platform and in multiple variations, like Collector Edition, Deluxe Edition, etc, however it would be prudent to show their icons instead, under the cover image of games.

Something like this, when playstation is selected:

1 Like

Agreed! We want to group up these deals on the home page by parent game, we have the primitives I just need to write the SQL :cold_sweat:

1 Like

I am listing down all my observations and suggestions. I hope it helps:

  1. Image sizes are wrong and in old gen format. i.e. Instead of receiving image in 144 x 191, and in webp or some other format, the browser received 810x1080 format.
  2. Image upload urls are guessable, i.e.
    I just had to increment the last number from 3 https://images.igdb.com/igdb/image/upload/t_1080p/co1mx3.jpg
    to 4, and I got a working url!! https://images.igdb.com/igdb/image/upload/t_1080p/co1mx4.jpg


Suggestions:

  1. Use Minio or object storage for image storage.
  2. Use Imgproxy, to hash image urls, and dynamically resize images on request. (It is better than having to create different aspect ratio images in advance and storing them, but YMMV)
  3. Use Compressjs, to compress images before upload, or use ImageOptim locally.

P.S. Take my advice with a grain of salt, since I haven’t launched anything yet. :sweat_smile: