Simple Phoenix LiveView App (Reactor)

I’m in the process of doing a series where I build a site for the new podcast I’ve recently started with Justin Vincent of Techzing.

It starts with LiveView version 0.4.0, but I do upgrade as the series goes on. It’s definitely easiest for you if you use the same versions I do and upgrade when I do!

You can follow the full YT playlist where I’ll add videos as I record them or look at the individual links to episodes as I add them to this thread.

9 Likes

In the first episode, I just create a new Phoenix Project, add LiveView and make a single example page that shows the most recent key pressed.

2 Likes

The second episode is all about planning out my DB schemas. I go over what I set up for Alchemist Camp itself, and how a simpler design will work for a podcast site that has fewer kinds of content and fewer social features.

If you just want to see the coding itself, you can skip this one.

2 Likes

Next, I upgrade to LiveView v0.5.1. In the case of this app, it’s trivial and only web.ex and mix.exs need to be changed.

1 Like

In this one, I setup the socket session info add a CSRF helper and then extract the live template from a ~L quoted string into its own .leex file.

1 Like

Using the results from the schema planning episode, I use Phoenix generators to scaffold out the schemas, contexts and other CRUD for the app.

2 Likes

This episode, adds some PubSub functions to the Accounts Context for user-related LiveViews and then creates a LiveView for the index page.

This episode converts the new users page and form into live views and shows LiveView and Phoenix form validations in action.

This episode builds the live views and templates for the show and edit pages, fixes a few bugs and finishes converting users from traditional CRUD to LiveView.

This episode handles upgrading LiveView from version 0.5.1 to 0.8.1, and getting both the main app and the throwaway /foo route working.

Episode 10 of the series is all about webpack, fonts, sass and styling the front-end. No LiveView in this one, but it’s useful if you ever want to add custom fonts and logos!

Episode 11 covers setting up markdown for writing and editing podcast show notes.

You mentioned earmark being kind of slow and also name dropped cmark.

Is there a reason you’re not using cmark in the project?

I ended up using it here. Mainly because for comments and other markdown areas of the site I wanted a markdown preview which means every time the user flips between writing and previewing, it hits the server to do the compilation.

cmark also handles safe html out of the box. But it does look like it’s not really maintained anymore, although it appears to work.

What Elixir cmark package are you using?

This one https://hexdocs.pm/cmark/readme.html or this one Markdownif - Fast and Secure Markdown NIFs built with Rustler and pulldown-cmark?

1 Like

I like Earmark because it’s being maintained and it’s all Elixir so it’s a bit quicker for me to see how it works. Also I don’t remember if cmark was missing GFM or something like that when I checked it out.

Ideally I’d just use a PEG to define my own Markdown to HTML compiler but it’s pretty low on my list of priorities.

1 Like

The first native C one, I had trouble getting the 2nd one to compile when I tried it a few months ago.

Yeah that is one problem with cmark. I think it’s just common markdown but also supports code fences.

2 Likes