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.
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
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.
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.
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:
I am listing down all my observations and suggestions. I hope it helps:
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.
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
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)
We’ve rebuilt the site with more of a focus on knocking out a beautiful collection management app first and foremost.
It’s using the latest Phoenix Liveview, and feels really snappy. I really enjoy the new core_components.ex file and the deploy story was made trivial with the Phoenix docker generator.
Collection filtering in real-time with Liveview was really simple and feels better than a pure SPA solution. Ecto dynamic kicked my ass some, but in the end I got it working.
Not bad, I am more of a masochist when it comes to hosting, at least for small scale projects. I usually just buy a VM and deploy everything with a docker-compose, helps to keep my grey hairs on the head .
.
