This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing
What I Built
Brazil's soft power isn't samba or football. It's our food. We create things from scratch. We change other cuisines, making them a completely new thing. The only cardinal rule for Brazilian recipes is that they must be made with love. Brazilian food is comfort food.
That's what I have been learning for the past few years. Cooking is like coding: you don't need to follow strict rules to make it good. And sharing is loving.
Also, I have worked remotely since 2019, but even before that, by sheer luck, I have met several people from outside Brazil: tourists, work colleagues, students. All said the same thing: Brazilian food is the best. And the perfect small talk topic for meetings.
I have seen grown adults salivate while remembering that full plate of feijoada they had while in São Paulo. I have seen people get sad by not finding brigadeiro in their local stores and grocery stores. And don't even let me start at coxinha.
While thinking about which page I could create that could mix those two concepts, I brainstormed several ideas, but one landed: a fake and funny support group for those who miss Brazilian food.
Thus, Feijoada Anonymous was born.
Feijoada Anonymous is a support circle for people outside Brazil suffering from acute saudade for feijoada, the black bean and pork stew that eats an entire Saturday and most of Sunday. The site treats homesickness as a diagnosed condition and gives it what every condition deserves: a fellowship, a meeting schedule, and a diagnosis form.
The whole landing page has five sections, all played with total bureaucratic sincerity:
A self-diagnosis pamphlet, with 12 real checkboxes wired to a sticky severity meter that climbs from "asymptomatic (suspicious)" up to a stage that just tells you to book the flight to Brazil.
A corkboard of confessions from circle members, pinned and stamped with statement numbers, and they tremble slightly when you hover over them.
Classified case files documenting kitchen incidents, each with an expectation photo next to a reality photo and a disaster rating measured in sad beans.
A meeting finder built on a stylized bean map, where every marker is a chapter with a lunch meeting and a dinner meeting.
A contact form where Brazilians can sponsor a homesick tourist and receive a Certificate of Care, sealed with farofa.
The visual system is called Azulejo Modernista. Brazil covers buildings in glazed tile panels, so the entire page is one continuous tile wall: cream glaze ground, a faint grout grid drawn in repeating gradients, cobalt and sun and leaf and terra geometry, and a 3px ink grout border on every single component.
All the bureaucratic copy is set in Courier Prime, because paperwork should look like paperwork.
Demo
Feijoada Anonymous landing page
Journey
To create the first draft, I used OpenDesign, with Kimi K3 as BYOK. Then, I updated what I could (copy, some images, fixed navigation and mobile) to deliver the final content. All "reality" image failures were created using Gemini. The "expectation" images are real and free to use.
I tried to make something simple, so no framework, no package manager, no build step, no backend. Three files, and the JavaScript one is 420 lines inside a single IIFE with nothing imported. Keep It Simple.
Since Jess's post in April (and my follow-up), I have been working to make every project accessible to everyone. And that turned out to be the fun part.
The checklist is 12 actual <input type="checkbox"> elements. No divs cosplaying as form controls. The map markers are real buttons with aria-pressed, so keyboard users get the same chapter cards mouse users get. The severity meter writes its state into a role="status" element, which means the running count and the diagnosis stage get announced as you tick boxes instead of silently animating for people who can see it. Contrast ratios live in the CSS token comments, right next to the hex values, because that is the only place I ever remember to look at them.
The meeting finder gave me the one real product decision in the whole thing. First, I wanted the page to load a real map as part of the joke, but... it's a joke page. No one wants to give their location for a joke. So there's a Google Maps embed behind it, keyless, and it only loads after you click "Use my location" or type a city. No iframe on page load. No third-party request until you ask for one.
The form validation was where I had the most fun and rewrote the most. Every helper message stays in character. Type a country and it answers "You don't have to be Brazilian to care. But it helps." Type Brazil, and it answers, "Of course it is. We knew it. Bless you." Leave a field empty, and it doesn't scold you. It says it understands, then quietly insists. Because writing error states doesn't need to be so serious.
The hard part was the tone. Bureaucratic sincerity only works if nothing winks at the camera, so every time I wrote a line that was trying too hard to be funny, I cut it. Also, I tried to be cautious about the whole "support group" idea, respecting the real struggle that several people face.
So, if you're outside Brazil right now and you've got that "saudade" feeling over a plate of feijoada: the meetings are daily, and attendance is mandatory for the soul.
What's the food from home that ruined every substitute for you?
Top comments (0)