Alpost

Alpost is a website builder for American Legion Posts. I designed and built this project from scratch. Clients can sign in with Google to get access to the CMS that manages their website. Clients can create news articles, post events, manage their members and applicants, view and respond to messages from visitors, and much more.

Technologies

• React / Next.js
• TypeScript
• Tailwind CSS
• tRPC
• Prisma
• Stripe

View Site

Purpose and Goal

After returning home from a deployment, I wanted to start freelancing. I came across a local business directory for the town I grew up in and began reaching out to various businesses.

I checked out the local American Legion site, and the website was outdated. I scrolled to the footer to find any hints regarding the service they were using. Someone had created a template that many other American Legions were using.

I tested the demo and was astonished by how unintuitive the user experience was. I knew I could build something better. Something that looked modern and was easy to use.

American Legion membership has been on a plunge. Between the years 2017 and 2021, membership declined by almost 200,000. Maybe a newer website will attract a younger audience and reverse this trend.

I spent months learning and building out small demos to confirm that I could build something better.

Problems and Thought Process

My first idea was that I could create a template and duplicate the codebase for every Legion that wanted a new website. I realized that this approach would not be sustainable. I would have to clone the template, change the writing, set up a CMS, deploy the codebase to a hosting provider, purchase a domain, configure the DNS, etc. If I wanted to add a new feature or fix a bug, I would have to go in and manually change every codebase.

Plan B

I wanted a way to automate these tasks and have a single codebase to update. Unfortunately, I had no idea how to do this. I queried Google for days trying to find the phrase that would help me in my quest. Then one day, I opened my podcast player and saw a podcast labeled “Potluck - Multi Tenant Apps, JS Sprinkles, Kids Coding, Server Error Handling” by Syntax. “Multi Tenant Apps” was the answer.

I began working on a repo to practice basic multi-tenant architecture and hosted it on a digital ocean droplet. I installed Caddy server to manage SSL certs and handle wildcard domains. I was using CSR, which would result in poor performance and SEO. Trying to set up SSR was going to be a nightmare.

Plan C

Thank goodness for Vercel’s Platform Starter Kit. Using Next.js for this app would provide significantly better performance and SEO, which is crucial for the kind of website I was making. The only problem was I have never used Prisma, PlanetScale, or NextAuth.js, and the codebase was honestly intimidating.

Rather than cloning the repository to conform it to my needs and just relying on the magic to make it work, I wanted to figure out the magic that made it work. I went through every file to figure out what everything was responsible for and took the code I needed to use in my project.

Lessons Learned

Plan A rarely works. I did learn quite a bit about Next.js middleware which is the critical piece of code that lets this app work. With middleware, I can rewrite the URL based on the domain to route to a specific prebuilt template.

I stumbled upon the t3 stack and used it to create the admin dashboard and CMS. I’ve never had a more satisfying developer experience as it added type safety between my server logic and front end.

According to the US Department of Veterans Affairs, about 130,428 US veterans are legally blind, and around one million have low vision. I incorporated a light and dark theme to accommodate users with low vision and light sensitivity and checked for proper color contrast. I utilized HeadlessUI to create keyboard-accessible navigation menus.

Working on ALPost has taught me a lot, including multitenancy. I have plans to use this concept in future projects.