Skip to content

Software Design

Jump to bottom
Jacob Kochatkov edited this page Jun 12, 2025 · 4 revisions

Sending Data from Client to Server

The Home Page has ingredients and settings variable states, which are being sent to the server, when the user submits their recipe prompt. settings variable gets derived to flatten the settings arrays to be simpler understood in the n8n workflow. After the client loads the usersettings from localstorage, useMemo hook makes sure that the settings object has certain values flatten from array of objects to array of label strings, for being correctly processed in the N8N workflow.

const modSettings = useMemo(() => {
    settings.cuisine = settings.cuisine.flatMap((name) => name.label);
    settings.diet = settings.diet.flatMap((name) => name.label);
    settings.notEating = settings.notEating.flatMap((name) => name.label);
    return settings;
}, [settings]);

Working with the returned N8N Data in the Client

When the N8N workflow gets executed successfully and the Server makes it's processing with the data, the Client receives the ready-to-render dishes data and immediately adds the JSON object to the array in localStorage. The localStorage is a simple implementation of storing personal data on the users machine, before the accounts getting implemented.

const existingRecipes = JSON.parse(localStorage.getItem('recipes'));
existingRecipes.unshift(...response.data);
localStorage.setItem("recipes", JSON.stringify(existingRecipes));

Sending Data from Server to N8N Workflow

After the User sends their prompt to the server, the prompt gets encrypted with the JWT secret key to be decrypted in the N8N workflow. This ensures that only the server can send eligible information for workflow to process. The API key is written in the header to have the post request authorized on the server.

You can generate the JWT secret key, with NodeJS, like this:

node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"

Source: This DEV post

This is the source code that would request N8N workflow to generate the recipes:

const token = jwt.sign(
    {prompt: ingredients, settings: settings}, 
    process.env.JWT_KEY, 
    {expiresIn: "5m",}
);
const response = await axios.post(webhookUrl, { token }, {headers: {apiKey: process.env.N8N_API_KEY}});

Returning Recipe Data to the Client from Server

N8N Workflow generates a JSON object that contains an array of dish objects with all information, and the server then proceeds to attach a 16 character randomly generated id to each dish object as well as the prompt the user input to generate the dishes. The package used to generate random short ids is nanoid.

response.data.prompt = ingredients;

response.data.dishes.map((item) => {
    item["id"] = nanoid(16);
});

Receiving User Preferences from Airtable database

Airtable database stores the Tables of user setting values and labels in all supported languages. There are tables for Cooking Time Options, Diet Options, and Intolerance Options. Here is an example of the table for Diet Options.

image

The server, during it's start-up stage, connects to read the table data with a read-only access API key and generates a basic json to pass onto the client that requests it through the server API request.

Clone this wiki locally