Overview
I built Namakdoon, a recipe management web application designed to turn spoken cooking instructions into complete, published recipes. The application provides an admin panel where an administrator speaks the recipe steps, and artificial intelligence structures that voice input into a detailed recipe with required ingredients and images before publishing it directly to the website.
The project consists of a front end hosted as static pages on GitHub Pages and a backend powered by n8n to handle the workflow logic and AI-driven conversion. I built and structured the entire application over the course of one week.
The Problem
The goal of this project was to establish an intuitive method for documenting and publishing culinary recipes without requiring manual text entry. The project required an admin interface capable of accepting voice input, an automated workflow to structure those spoken details into complete ingredient lists and step-by-step instructions, and a mechanism to display the finished recipes on the website alongside attached images.
My Approach
I structured the application by dividing the architecture into a dedicated admin interface, an automated backend workflow, and a public static front end. My responsibilities included:
- Designing and building the front-end interface and the dedicated admin panel.
- Configuring the backend workflow using n8n to coordinate voice processing and content preparation.
- Connecting artificial intelligence to transform voice input into structured recipes with ingredients.
- Setting up static page hosting using GitHub Pages to serve the recipe content.
By separating the content creation workflow from static presentation, the architecture keeps content delivery straightforward while using workflow automation for data transformation.
The Solution
The end-to-end recipe creation and publishing flow operates through the following steps:
- Voice input capture: The administrator records or provides voice instructions for a recipe directly within the admin panel.
- AI recipe generation: The voice recording is processed by artificial intelligence, which converts the spoken words into a complete recipe structure containing all necessary food ingredients and instructions.
- Media attachment: Images and photos are added to accompany the generated recipe.
- Content publication: The finalized recipe and images are published to the recipe section of the website for visitors to access.
Technical Stack
The selected tools allowed me to combine static web hosting with flexible backend automation and voice processing.
- GitHub Pages: I used it to host the static pages that display the published recipes.
- n8n: It served as the backend system to coordinate the application workflow and processing steps.
- Artificial Intelligence: It converted raw voice inputs into complete cooking recipes with ingredients.
- Voice: It provided the primary input method for submitting cooking instructions through the admin panel.
Results & Impact
The finished project delivers a functional web application that simplifies recipe creation from start to finish. Key results include:
- Delivered an admin panel that allows voice-based recipe creation.
- Implemented automated conversion of spoken cooking instructions into structured ingredient lists and directions.
- Enabled image attachments alongside generated recipes.
- Established automated publishing to static pages on GitHub Pages.
- Created a lightweight architecture combining a static front end with an n8n backend.
Key Takeaways
- Voice-first content input: Using voice as the primary input mechanism creates an accessible method for capturing detailed cooking instructions.
- Workflow-driven backend: Utilizing n8n for backend logic coordinates processing tasks between administrative inputs and final publishing.
- Static publishing: Hosting front-end recipe pages on GitHub Pages keeps content delivery lightweight and direct.
- Structured generation: AI structuring bridges the gap between unstructured spoken audio and formatted culinary recipes.