ianc

ianc

Introducing Travel Massive — a community platform built with Phoenix LiveView

Hey folks,

We built a community platform for Travel Massive with Phoenix LiveView. This is my first project with Phoenix LiveView, and the first time I’ve programmed in Elixir.

Here’s a few notable features:

Tech details

  • Currently running LiveView 0.17.11
  • We use a combination of LiveView Components and Surface UI with Tailwind CSS
  • Alpinejs 3 for a few user interactions (e.g. upvote), and Tippy for popups
  • We’re hosted on Gigalixir and Cloudinary (images)
  • esbuild only.. no npm required :tada:

Special thanks

A big thanks to @mplatts and @nhoban who developed our initial MVP and got us to launch last year, and @daamsie who helped with a lot of UX and other features. Also a thanks to elixirforum as I found a lot of helpful answers here while learning Elixir :smiley:

Migrating from Drupal to Phoenix LiveView

I originally created the Travel Massive community in 2014 and built it with Drupal 7 (and open-sourced the project). Migrating a live community of ~50,000 members from Drupal to Phoenix LiveView was a unique challenge. To solve this, we built built a private REST endpoint in Drupal to provide structured data to our Elixir importer. This method also gave us the benefit of developing the platform with real membership data.

What’s next?

We launched in September 2021 and I’ve spent the past year adding features, fixing bugs, and growing and building our community. The project has slowly matured, but I’m still thinking about new features to build:

  • Community points to reward participation
  • Travel map (people can share places they are visiting)
  • Automated newsletters (we currently curate a weekly newsletter)

Hopefully this post can help others who are thinking about building community platforms with Phoenix LiveView, and can help showcase what can be done! :slight_smile:

Most Liked

ianc

ianc

It felt like being in the deep end at the beginning, because I was learning both Elixir and Phoenix. Two things really helped me get over the learning curve:

  1. A working project / codebase to dive into
  2. A mentor to review my code and help me learn Elixir (e.g. answer all my newbie questions!)

On point 1, @mplatts created Petal Framework which is worth checking out.

It’s difficult to compare 1:1 because the new platform is simpler by design (more pragmatic, less features). However I find myself writing simpler, shorter code in Elixir.

Never! There are often “aha!” moments when you think “how the heck was I writing that in X when I could have been over here in Elixir doing this way simpler / faster!”

ianc

ianc

Our old platform was a combinaton of Drupal (member profiles, chapters, events, search), Wordpress (blog), Slims (jobs board), and Discourse (forum). We unified everything we needed into a single platform with Phoenix LiveView.

Our server runs with < 500mb memory and we do about ~100k views a month.

We’re using topbar. I previously had a spinner in top left. I don’t think we need to point out (too much) to users that we’re waiting for the socket to connect, so I prefer to keep it subtle.

AstonJ

AstonJ

This is awesome - congrats :tada:

Is the new site offering more or less the same as the Drupal site? If so I’d be interested to know whether anything changed on your server/hosting requirements? Could you also share how many page views you are serving a month?

Have you also experimented using a spinner instead of a progress bar for page loads? Personally I am not that keep on progress bars if the header always stays the same. Since you’re a travel site you could use a rotating globe as your spinner :003: On one of my sites we use a running dog (it’s a dog related site):

loader

Where Next?

Popular in Discussions Top

Fl4m3Ph03n1x
Background A few days ago I was listening to The future of Elixir from Elixir Talks, with Dave Thomas (@pragdave ) and Brian Mitchell. I...
New
ricklove
I was just introduced to Elixir and Phoenix. I was told about the 2 million websocket test that was done 2 years ago. From my research, t...
New
AstonJ
I’ve just started the Phoenix part of the utterly brilliant online course by @pragdave. On generating the Phoenix app he uses the --no-ec...
New
AstonJ
Please see the new poll here: Which code editor or IDE do you use? (Poll) (2022 Edition) It’s been a while since we first asked this, I...
208 31142 143
New
jer
I’ve been using umbrellas for a while, and generally started off (on greenfield projects at least) by isolating subapps based on clearly ...
New
Qqwy
I would like to spark a discussion about the static access operator: .. For whom does not know: it is used in Elixir to access fields of...
New
wmnnd
The Go vs Elixir thread got me thinking: Would it be too hard to implement a simple mechanism for creating Go-style static app binaries f...
New
opsb
We’re considering our architecture from a viewpoint of scaling our traffic heavily over the next 6 months. Our current deployment is runn...
New
sergio
Kind of like when jquery came out, it was super necessary. Existing drag and drop libraries have a bunch of baggage to support old browse...
New
paulanthonywilson
I like Umbrella projects and pretty much always use them for personal Elixir stuff, especially Nerves things. But I don’t think this is ...
New

Other popular topics Top

sen
Hi All, I set a environment variables in dev.exs , like below code. when i start server, how can i set the ${enable} value? thanks. d...
New
sorentwo
Hello! tl;dr Announcing Oban, an Ecto based job processing library with a focus on reliability and historical observability. After spen...
985 42920 311
New
mcarvalho
What is the difference between System.get_env and Application.get_env? For example, what are best practices to use one versus another.
New
JeremM34
Hello, how can I check the Phoenix version ? Thanks !
New
jerry
Good day to you all. I have been struggling to get a query involving like and ilike to work. Can anyone assist me on this, please? pro...
New
chrismccord
This release brings a number of exciting features, including integration with the new Phoenix LiveDashboard and Phoenix LiveView. There h...
New
stefanchrobot
What’s the safe way to decode a JSON string into a struct? I want to avoid calling String.to_atom. Jason.decode can give me a map with st...
New
Qqwy
Original source of discussion: This topic on the Pragmatic Programmers’ Functional Web Development with Elixir, OTP, and Phoenix forum. ...
New
saif
Hello everyone, Long time lurker first time poster here. I’ve recently begun working on Elixir full-time again! :raised_hands: It’s been...
New
hariharasudhan94
Lets say I have map like this fetching from my database %{"_id" =&gt; #BSON.ObjectId&lt;58eb1a7a9ad169198c3dXXXX&gt;, "email" =&gt; ...
New

Latest on Elixir Forum

We're in Beta

About us Mission Statement