ReverendCrush.com v. 1.0 (2024)
Technologies/Skills used: React v.18, SASS, HTML (JSX),
JavaScript, API Integration (BlueSky Social/AT Protocol), Git, Cursor (Visual Studio Code),
Paint.Net
The goal of specifically this "Version 1.0"
ReverendCrush.com is really just to serve to promote a (rather snarky) BlueSky Social account
for an old acquaintance and collaborator, along to serve as a "Linktree Alternative."
It actually began as a fork to an uncompleted version of what would have been this site, built
in React. That version, dubbed "MCT6|30" with a bar, was put on indefinite hiatus when
I was hired full time for a long-term contract position by Alamo Drafthouse. The version of my
portfolio that you're viewing now, redubbed MCT630 (sans bar), was developed with a much
more calmer theme in mind with Webflow since I myself don't have any actual need for a
JavaScript Framework just to showcase my past work (at this time, anyway), and it was
quicker to develop than MCT6|30 was coming along when I was working on that, even with the extra
time went into planning a layout for this version of my portfolio.
That being said,
with the need for implementing and heavily working with BlueSky Social's API (and
technically YouTube's, though nowhere as involved) as well as the need for user friendly
functionality for such a component, the remains of the MCT6|30 project actually served as a much
better solution than trying to inject API-related code into something like Webflow; there was
already a skeleton of an incredibly responsive single-page app with a lot of special effects as
well as packages that could easily be reapplied to this project's aesthetic theme.
Theoretically, I could have used Webflow to design some of the more static elements, but I
honestly felt like it would have been too much trouble to export Webflow-generated code and
reapply it from HTML to JSX (plus exporting the CSS to various SCSS files), and in this case
there was no need; 50% of the design was already there, plus I really didn't need Webflow.
I was given free reign to experiment with an Anti-Design philosophy, since nothing is being sold
or marketed other than a BlueSky account that already has somewhat of a countercultural slant to
begin with that (along with the lack of image assets available) making it a worthy candidate for
such an approach. I also saw it as a challenge to keep it readable and UX-friendly as possible.
As pointed out by this Built
In article on Anti-Design aesthetic, it comes with limitations such as reduced
accessibility and the tendency to be less user-friendly. Those issues just happen to be those
that I specialize in addressing, so I'd like to think that I overcame those challenges with
both the final design, it's functionality and the overall user experience, especially
considering that BlueSky Social's community has a large following of people with
disabilities. Hopefully, I managed to organize the chaos for everyone.
While MCT6|30's aesthetic would have been more about flickering neon lights and one
animated faux console prompt in the header, ReverendCrush.com is more loud and flashy towards the
direction of 80's CRT style monitors, retro video game/terminal fonts, multiple (non-animated)
faux-console prompts and glowing text with scanlines. The latter was a theme I was familiar with
after a similar project for Alamo Drafthouse (see the Video Vortex landing pages under "Unused
Alamo Bar Sites"), though nothing I custom coded for that project was re-used here. The
navigation menu, using the react-burger-menu package, was another a holdover left from MCT6|30 that
was kept for ReverendCrush.com since the effect still looked amazing on mobile and
desktop.
About 90% of the development on this project was for the BlueSky component seen
on the main page alone. It pulls the most current 100 of the author's posts (be it from them or
anyone they repost and/or anyone they quote-post) from BlueSky Social along with any media included
such as images, YouTube videos (which embed straight on the website), or cards to other websites,
and then paginates them in a fun, 80's CRT video game/computer style interface that is very
easy to use and, despite using pixelated fonts, easy to read across all devices. Unlike most social
media displays, this component doesn't display the number interactions such as likes, comments
and reposts. Rather, they're calculated into one "Banger Score" ("Banger"
being a term referring to a very funny or otherwise amazing post) that's displayed with each
post. This component also includes a leaderboard for the 25 posts out of the recent 100 with the
highest scores, displaying much like an old arcade video game to go along with the theme with some
extra styling based on the position.
During the midst of the project, I switched
code editors, going from Visual Studio to
Cursor, an
AI-powered fork of Visual Basic with GPT4 integrated as well as several other AI-powered bells and
whistles. While I'll admit that having AI baked into my code editor is extremely convenient and
greatly reduced the time spent on the rest of the project (specifically debugging, addressing errors and
some research), I feel the need to stress to anyone wanting to integrate AI into their dev environment,
especially junior developers or higher-ups looking to cut corners, that
AI will not build your
project for you. You absolutely still need to have a fairly good grasp of the languages
and/or framework you're working in, but also development principles. It's only going to be as
good as you are. That said, if utilized properly, it can actually be a really efficient tool not only to
help code, but to also become a better programmer.
I probably gained more React experience
from this little project than any "To-Do List" tutorial, and I'm really thankful to have
the opportunity to work on this one. I hope there's more for this project down the road, because
this project was a lot of fun without being a total pushover, and I really enjoy working in React. I
just wish more people would pay me to do it! The project is available on
my GitHub, but the code to
specifically the BlueSky functionality can be found in the Git repository under src/components.
It's set up to where it can be reused, if forked and implemented in a React project.
