Soy Sauce Society

Everyone loves food, at least I do! Having lived abroad and missed the food I grew up with drove me to create Soy Sauce Society. I wanted it to be fun and a place to share what I’d been cooking.

Soy Sauce Society was an East Asian recipe sharing site for foodies. Anyone could create an account and a profile, share recipes, and save favourites to a personal dashboard so they were easy to find again.

The site is no longer online, so I’ve captured screenshots of each page here. It was dynamic, built with Go and SQLite, but this post focuses on the HTML and CSS.

I wanted the site to have the feel of East Asian aesthetics, so I built the palette around two colours: a deep forest green and a golden yellow.

The dark green used for the headline, the navigation text and the “Sign up” button.

The gold is reserved for things I wanted people to click , Call to Action button such as the “Explore recipes” and “Create My Recipe” buttons.

The logo is the one place I broke the palette. “Soy Sauce” is set in bold red, with “Society” in a lighter weight beside a small line-drawn noodle bowl, so the name has a clear focal point and the red reads as a splash of chilli against the green.

What’s Soy Sauce Society all about?

Soy Sauce Society is your cozy corner of the internet for all things delicious, quirky, and East Asian-inspired. Whether you’re a ramen rebel, a dumpling devotee, or just here to sprinkle some umami on your day, you belong here!

Our secret recipe? A dash of fun, a splash of creativity, and a whole lot of love for food. Share your favorite recipes, discover new flavours, and connect with fellow food adventurers from around the world.

Rule #1: Eat well, share often!

From time-honored family recipes passed down through generations to bold fusion experiments that’ll make your taste buds dance, we celebrate every flavour journey. Join our community of passionate home cooks, adventurous eaters, and culture enthusiasts who believe that food is the universal language of love.

• 🥢 Chopstick Champions
• 🍜 Ramen Renegades
• 🍣 Sushi Squad
• 🥟 Dumpling Dynasty

When entering the site, you would see a homepage of Flavours of the Far East.

The homepage

Visitors land on the homepage under the headline “Flavours of the Far East”, with a gold “Explore recipes” button. Scrolling down, a dark green band invites people to share their own recipe, followed by a cream “How It Works” section that explains the site in three steps: browse, share, and connect.

Below that, the “Latest Recipes” section shows the newest uploads as a row of cards.

Each card has a photo, a small cuisine tag (Korean, Thai, Chinese), the recipe title, subtitle and the name of the author.

The page finishes with “Our Mission” on a golden yellow band with a short statement about celebrating East Asian food traditions.

The recipe cards

The recipe cards sit in a CSS grid. On small screens the cards stack in a single column, at tablet width (768px and up) they switch to three columns, and on desktop (1024px and up) to four, with a 1.5rem gap between them.

I used a mobile-first approach, starting with the single-column layout and adding columns with min-width media queries as the screen grows. Each column is defined with repeat() and minmax(0, 1fr), which splits the space into equal widths and stops long titles from stretching a column.

The four cards are the latest recipes pulled from the database, all posted from my own account to seed the site.

All recipes

Clicking “Explore recipes” on the homepage, or “All recipes” in the navigation, takes visitors to the full recipe collection. A pale grey header introduces the page, followed by a row of pill-shaped filter buttons for All Recipes, Chinese, Korean and Thai.

The active filter is highlighted with a cream fill and a golden outline, so visitors can see at a glance which category they’re viewing.

Below the filters, the same grid from the homepage lists every recipe as a card: four columns on desktop, with the last row left partly empty when the number of recipes doesn’t divide evenly.

Signing in / Signing up

Visitors can sign up or sign in with their Google account. On a first visit they create a short profile, where they can upload a profile picture. If they skip the photo upload, the site generates one for them.

Once signed in, the navigation changes to a “My account” button, and they’re ready to share a recipe.

Submitting a recipe

To keep things from feeling overwhelming, I split recipe submission into four steps.

The first page asks “What are you cooking?” and collects three things:

1. Recipe title
2. Short description
3. Cuisine type, chosen from a dropdown that includes Chinese, Japanese, Thai and Malaysian etc.

The page uses a split layout. On the left, a lattice pattern of golden circles and squares on dark green carries the East Asian theme, and on the right a clean white form keeps the focus on the content.

Each field has a label with an asterisk for required fields and a line of grey helper text, such as an example title.

The description box includes a live character counter (200 maximum, 10 minimum), so users know the limits before they hit an error.

The golden “Get started” button matches the call-to-action buttons on the homepage.

Second step: Give me more info

Users need to provide

• food image
• recipe’s difficulty level (Beginner, Intermediat or Pro)
• prep time
• cook time
• Amount of serve.

The information such as the recipe title, short description and cuisine type are filled in text boxes from the previous step.

Third step: What are secret ingredients?

This is where users can fill the

• lists of ingredients
• amounts
• units

Each of ingredient can be moved up or down to organise its orders if needed.

Final step: Spill the beans!

This is where the secret sauce lies. Users can describe steps of how to complete the dish.

Each step can be moved up and down to organise its orders.

Once all the forms are filled without any error, then it’s ready to be publihsed.

The published recipe page will look like this.

The recipe details such has prep time, cook time, serving size, difficulty level and cusine type are listed up top for high visibility.

The ingredients has toggle between metric and US measurements.

Users can also view their published or drafted recipes on the dashboard like this. Notice the side bar shows My recipes.

and Saved recipes. This tab will show all the saved recipes from other users’ recipes on the site.

For a public profile, all users can see a particular user’s published recipes like this.

As the site creator, I also added a blog session where I wrote about recipes.

Examples are

Pandan cakes!

Rice paper dumplings

Why not, Sriracha sauce

Sadly, Soy Sauce Society is no longer exist online but this post will preserve it in my memory.

Tech stack

• Tailwind CSS
• Golang
• Sqlite3