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:

40 Likes

Is the new platform open source as well?

3 Likes

BTW looks like I had signed up to Travel Massive in 2016 and was just able to sign in and find my old profile, well done on the migration!

2 Likes

Amazing work! :+1:

Just out of the curiosity, did you roll your own comments system on the website or just use a third party tool ?

2 Likes

There’s a phx-click on the upvote button. There’s at least some server side code for it.

4 Likes

Hey, I’m one of the contributors. Yep, the comment system is custom-built using live view.

2 Likes

No plans for now, unless someone in the Elixir community changes my mind :grinning:

1 Like

Open source everything probably does not make a lot of senses. However, if you think there are some parts that can benefit the community as a whole you can break them out as libraries.

2 Likes

Looks like a fun project to work on! I have a similar background in that I’m coming from a PHP and I have a few questions:

  1. How was the learning curve going from PHP to Elixir?
  2. Did you see a significant reduction of code moving to Elixir?
  3. Were there any major issues during the development phase that you thought “this is way easier in PHP”
3 Likes

:slightly_smiling_face:

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

5 Likes

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!”

8 Likes

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.

7 Likes

This is really awesome, it’s nice to have a reference LiveView app for a community platform.
The posts are all DB/Ecto based?
Are you using a framework for the markdown CMS pages or rendering those with Elixir also?

I would love to see this OpenSource, looks like a lot of work went into it.

2 Likes

I’m one of the contributors on this project - I built the CMS that is used to create various pages. All of it is custom Elixir code. It allows either entering straight HTML or Markdown (using Earmark). I also created a basic “blocks” system that allows reusing one CMS page inside another one. All the content is stored in the database.

It’s quite a flexible lightweight system that seems to be filling the need nicely.

Elixir was a first for me as well on this project it was a breath of fresh air :slight_smile:

4 Likes

Yes, everything is stored in DB (Postgres) and queried with Ecto.

1 Like

Any cool stats on how much server power you needed before and after the migration? I’m assuming phoenix scales better.

Check out my earlier reply to @AstonJ about what we replaced (Drupal, Wordpress, Discourse) and what we need now.

I’ll add that while it’s nice to need less server resources, what motivated me to move to Elixir LiveView was the SPA architecture that allowed us to build in one language/framework with a small team. We also built an early prototype in Vue + GraphQL but realised there was more technical overhead (more seperate parts), and more complexity to solve search-engine indexing (~50% of our traffic is organic).

3 Likes

@ianc Wow! This is just incredible. Congrats on that.
How long took the project? Looks like at leas 1,5 to 2 years?

Maybe another question about the UI library.
Have you been happy with surface or did you more often fall back to self build LiveView components?

I mean - was Surface a huge benefit in the project for you?

My problem is, that I often get stuck in the UI-building part. Elixir is easy, but creating new building blocks and components for my projects every time seem to be like inventing the wheel every time new…
But I am a bit afraid of libraries, as they might restrict me…

cheers :slight_smile:

5 Likes

I was wondering that too. Announcement on the website is a bit confusing:

IMPORTANT ANNOUNCEMENT (25 August 2022): Massive Platform is no longer being maintained. We started the project in 2014 and built some amazing communities with it, creating hundreds of thousands of real-world, in-person connections at events all over the world. In 2021 we rebuilt Travel Massive with a new, modern web framework and chose Phoenix LiveView. Thanks to everyone who supported Massive Platform over the years. ~ Ian (founder, Travel Massive & Massive Platform).

But since that announcement was on the same day as this forum topic, I assume that the PHP project is discontinued, but the company continues with a proprietary project based on the new Elixir revamp, and with no source available (thus far).