With my latest discovery of Phoenix LiveView and a fresh mind from Pragmatic Studio’s Phoenix LiveView tutorial, I challenged myself to create a fully functional chat application.

And in addition to that, I’ve added an authentication layer using POW Auth and install TailwindCSS.

This project is a great boilerplate if you’re planning to build your own chat application or you’re just starting to learn LiveView just like me.

Features Included:

- Authentication using POW Auth
- Integrate TailwindCSS Framework
- Realtime Messaging (LiveView, PubSub)
- Unread messages counter (automatically reads all messages when the conversation was open)
- Latest message preview (beside unread messages counter)
- Search conversation feature
- Messages grouped by date sent

Repository: https://github.com/alvnrapada/liveview_chat_app

Happy Coding!!!

Have you ever found yourself in a position where you can find anything about something you really need? Just happen to encounter this problem doing my task for a company I’m working with and I can’t find proper documentation about it. So here it is, hope I'm the last one who had troubles trying and finding the right way to do this.

Migration

Let's start with the migration, say you want to create a movie table with two fields (title and genre) and you don't want to create entries with duplicate values of those fields.

create table(:movies) do add(:genre, :string)…

We all love to cheat right? chill 😅, I mean using cheats to make our code simpler yet cooler.

Here are some elixir cheats that I hope can help you code more effectively. I’ll continuously update this blog on my website (Elixir: Cheatsheet) every time I get to learn new techniques in elixir, I will also appreciate it if you have some corrections or other cheats that I can add here. Thanks!

1. Nil Catcher

UndefinedFunctionError
function nil.value/0 is undefined

Have you experienced this error? especially when trying to get a value 3 structs down to the main variable?ex: @music.singer.name, …

Spent almost 2 days figuring out a proper way to use CKEditor5 image uploader. I’ve tried ckFinder, SimpleUploader, etc. but none of them worked maybe because none of the documentations made any sense to me 😂. Luckily I found a StackOverflow conversation and somehow got what I needed working with just some minor tweaks.

My Goal

Every time a user copy and paste, drag and drop, or upload an image into my text editor, It will trigger an API that saves the image into an S3 bucket and returns the image S3 URL, then embeds…

Prerequisite:

1. HTTPoison: http client for elixir
2. A Slack App to Integrate with elixir.

Creating Slack app

Go to Your apps home page and click Create New App .

So I’ve been finding the easiest way to integrate toaster in my phoenix app, and now I think I found one.

Prerequisite:

1. React JS inside your phoenix/elixir app: react_phoenix
2. A toaster you want to integrate: Cogo Toast — my toaster

Once you’re done setting up react-phoenix, we can now create JS and render it to our Html pages. But let us first set up our toaster.

On your Controller Method make sure to add a put_flash in your conn pipeline

conn
|> put_flash(:success, "Successfully shortened links") <- or :error

Now create a toast.html.eex and paste this code, in my case…

First, you need a 16GB or above USB because Mojave is over 6GB and Catalina is over 8GB. we’re gonna need to partition your USB into 2(for both OS).

USB Partition

1. Plugin your USB drive
2. Go to Disk Utility

All of us have dreams but not a lot of us have plans and the courage to get there.

Some people want to grow and be successful in the field they’ve chosen but are not willing to take risks or grab any opportunity to make it happen.

Are they not ready? Or they are simply afraid of the responsibilities that come with it.

Or maybe, they are just contented of what they know and what they can do at the moment together with their responsibilities and not quite ready to STEP UP?

I know, I was like that before (or…