St. Louis Forever Website

An overview of my recently completed site for The Fraternity of the Crown of Thorns in Saint Louis Missouri

Posted: 3/27/2024

My latest project is now live at stlouisforever.com.

A friend who helped start it in 2020 asked me a few months ago if I could update some info on the old site. I thought I could do a little better than updating some outdated text and that it would be a fun challenge to make an aesthetically pleasing promotional site with some extra features on the side.

I had been looking for an opportunity to try out Next.js's new app router, learn more about server side react, get some experience with some new AWS tools, and use Mui's new JoyUI system. So I mixed it all together to make this site.

The project can be divided into two sections:

• St. Louis Forever Pages
• Fraternity Pages

St. Louis Forever Pages

These pages are publicly accessible here, so I won't spend much time on them. It'll suffice to mention the only bit of logic in these pages is in the next-rosary banner. It determines the date of the next rosary and, depending on the time of year, the time (either 3pm or 6:30pm).

Another thing that may not be immediately obvious is that the location chip links to the exact location of the statue in either Google or Apple Maps based on the user's choice. I thought this neatly takes care of the main goal of the site, i.e. answering when and where the next rosary is happening for easy and effective shareability.

If you're on mobile, the rosary section will have an additional button that provides swipeable cards containing each prayer of the rosary as prayed at the statue.

Fraternity Pages

The directory is only accessable to friends of friends, so I'll add some screen shots here of what that looks like. I've used the dev environment which is full of WWE wrestlers to avoid publishing names of actual users from production.

One noteworthy thing is the authentication that I've tongue-in-cheek referred to as two friend authentication or 2fa. Basically any user that signs up via the AWS cognito auth flow can then create a profile but cannot see or do anything else.

Once the profile is created, an email is sent out to already approved members requesting that they approve. They can then follow a direct link to the newly created profile. Once two approvals are received the new member is notified via email and is given full read and write access to the file repository and directory.

Home

The homepage features the stained glass image of St. Louis carrying the Crown of Thorns into Paris ( from Tours Cathedral, ca. 1240s) with links to the directory, about page, and file repository underneath.

DIRECTORY

PEOPLE

The first tab in the directory lists people. The signed in user will have a edit icon available on their profile in the people list and on their profile page too. When pressed, the user is provided a form for updating their picture, info, and an option for deleting their account.

BUSINESSES

The business view is largely the same with the addition of a points of contact field and a people picker component in the business form. The original lister of the business and any point of contact can make changes to the business page.

GROUPS

Again the groups view is largely similar to the other two with the difference being that any user can join or leave a group. Unlike the businesses where the original lister has to add points of contact who can then add people, groups can be joined or left by users. The main idea was to allow users to associate themselves with specific groups from which they'd like to receive communication. These groups can then be used to send specific emails by group to just those people that want to receive them. There is also an additional field in the groups view for a groupchat link for those who prefer more real time communication as opposed to email.

BILBLIOTHECA

The Bilbliotheca allows approved members to upload documents (txt, word, excel, pdf, etc.) for other members. It's a convenient place to store shared documents.

Simple Mailing List

The application’s most recent feature allows members to send emails to associated mailing lists. It’s very simple—select a list, add a subject and some content, click review, then send. It makes sending newsletters really simple and any authenticated fraternity member can use it when they need to—no sass subscription fees or additional accounts to manage… it’s just baked in to the application and very cheap thanks to serverless functions and simple email service.