My first pixel art app in Phoenix

Hi, I want to share my latest project that I made for fun with a friend. It is build with Phoenix framework and LiveView.

This is my first Elixir and Phoenix project. It was difficult but fun learning those technologies. I appreciate how LiveVIew eliminate several layers from traditional application stack and how easy is to do some things that require server data.

The app is hosted on West Coast US server now so depending where you are in the world you will have different quality experience.

I also want to say thanks to people on this forum who help me to resolve issue alone the way @andrewf @yurko @rogerweb

18 Likes

Nice one @kif! :023:

Would be cool if you could share where/how you’re using LiveView :smiley:

(Also might be worth adding some tool-tips so people don’t have to click on some of the buttons to find out what they do?)

Great suggestions about tool-tips!

I’m using LiveView for the main gallery, Fresh and Top tabs and main search bar in traditional way. I’m also using it to send some drawing update (using LV Hooks) on the image editor page however I also use localStorage to maintain drawing across page refresh.

Probably the most notable usage of LV is drawing play functionality (each drawing has a play button on the top that would play history of that drawing). I’m storing each Canvas as base64 encoded PNG string in Postgres array. Each gallery card is statefull LV component. When user press Play I start Elixir tick process that send messages to corresponding gallery card LV. This card update base64 image string on each tick. This way the frame data is streamed from the server and I don’t have to fetch the whole history.

This mb not very necessary in this case because full history for each image is very small but I still wanted to try this way.

3 Likes

Ah nice! I didn’t actually notice the play button, would definitely be worth adding this to the main view page imo :smiley:

Really cool!