Building Real-World app using Elm and Elixir Phoenix

schedule Dec 13th 02:00 - 02:45 PM place Senate people 5 Interested
  • Build an app more advanced than TODO app.
  • using ELM 0.19 and Elixir Phoenix for APIs.
  • Will be slides with code.
    i.e step by step what code/functions/methods need to write.
    Incremental sequence.
  • Login, Register user, upload file (will try to cover maximum)


Outline/Structure of the Demonstration

One day my friend Ram said lets build something with Phoenix as backend. I said ok, lets use Elixir and React. He suggested using ELM for frontend, and journey started.

So, I started with ELM but many of blogs and tutorials were for ELM 0.17 and 0.18. I came across the excellent Real World App example by Richard Feldman

The example is a clone of medium blog and covers alot of things needed for getting started with. (Login, Profile page, display list of posts, paginated list, follow unfollow user, session and more). But when I started navigating through the code, I found it difficult to understand on where to begin with and what will be incremental steps for the code. Other videos I have seen cover only the functionalities on the same page. So I felt a need of another talk.

This talk will be fast forward one. To cover as much as possible in 40 minutes.
So, instead of writing every line by line, will give a quick explain on a block of code and remaining similar blocks will be copy pasted. Similarly, for UI and CSS will use minimal Flexbox snippets, but as copy paste.
The ELM syntax is much like Haskell and in order to understand, will give a quick overview at the beginning.


create an app using ELM v0.19 and Phoenix(above v1.3).

  • An app more advanced than TODO app
  • Will be slides with code.
    i.e step by step what code/functions/methods need to write.
    Incremental sequence.
  • Not cover basics on why; but how to.
  • Frontend app is separate from backend app.
  • More of ELM, less of phoenix. So other language people can also find this useful.

Learning Outcome

At the end, one should have a better understanding about how to build web app using ELM. Route, Page, Dynamic page(profile with username or author-name slug), pagination.

Target Audience


Prerequisites for Attendees

expect Audience to know some basics of ELM or redux.

schedule Submitted 1 year ago

Public Feedback

comment Suggest improvements to the Speaker
  • Naresh Jain
    By Naresh Jain  ~  1 year ago
    reply Reply

    Hi Sandesh,

    Thanks for the proposal. Can you please share a video from any of your past presentations? This will help the program committee understand your presentation style.

    • Sandesh Soni
      By Sandesh Soni  ~  1 year ago
      reply Reply

      Hi Naresh

      I haven't presented before. This will be my first time.

      To give  a better idea

      I will mention 4-5 page web app we build.
      page - (home, login, profile, new arcticle, filter articles by tag)

      step by step ... i.e first we define `type Msg` for every Page. Also `type Model`. Then the JSON decoder and encoder.
      The page change, etc. A very minimal css (using flexbox) for layout. If time permits, will present `follow other user` button.
      Right now I think no backend code is possible.... all static json data.

      To fit in 40minutes, it should be a bit fast speed presentation.