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.
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
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
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!
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.
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 On one of my sites we use a running dog (it’s a dog related site):
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:
A working project / codebase to dive into
A mentor to review my code and help me learn Elixir (e.g. answer all my newbie questions!)
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!”
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.
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.
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
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).
@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…
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).
On one of my sites we use a running dog (it’s a dog related site):
