Building a Serverless Recipe Generator : AWS Project

Introduction

This project walks through creating a serverless recipe generator application using AWS Amplify and Amazon Bedrock. Users can input ingredients and receive AI-generated recipes via a simple web interface. By combining Generative AI with a serverless architecture, this application offers a scalable and interactive experience.

Tech Stack

• 
  AWS Amplify: Provides full-stack hosting and deployment services for the application.


• 
  Amazon Bedrock: Utilized as an AI model to generate recipes based on user input.


• 
  AWS AppSync: Manages real-time API connections between the frontend and backend.


• 
  AWS Cognito: Provides secure user authentication.


• 
  AWS Lambda: Handles serverless backend functionality for processing requests.


• 
  Node.js, npm, Git, GitHub: Essential tools for frontend dependencies and version control.

Prerequisites

• AWS Account: Permissions for Amplify, Cognito, Bedrock, and Lambda.


• AWS CLI and Amplify CLI: For resource management.


• Node.js & npm: For running React app.


• GitHub: Enables Amplify’s continuous deployment.

Use Case

Problem: Searching for suitable recipes based on available ingredients can be time-consuming, and manually sifting through results often yields non-personalized options.

Solution: This serverless recipe generator offers a real-time AI-powered solution, allowing users to input ingredients and receive tailored recipes instantly. The use of Amazon Bedrock makes it possible to generate diverse, personalized recipes on demand, saving users time and enhancing their cooking experience.

Real-World Relevance: This type of application has potential in e-commerce, cooking platforms, and smart home solutions. By integrating Generative AI and serverless architecture, we demonstrate a scalable, real-time solution for creating personalized recipes or content.

Architecture Diagram

1. In the terminal window, open the local link to view the application.

.

   git init

   git add .

   git commit -m "first commit"

   git remote add origin [email protected]:<your-username>/ai-recipe-generator.git

   git branch -M main

   git push -u origin main

Replace the [email protected]:<your-username>/ai-recipe-generator.git with your own GitHub SSH URL.

Step 4: Deploy Your App with AWS Amplify

1. Sign in to the AWS Management Console and open the AWS Amplify console at

   
   
   

   The image on the right shows an example of the customized verification email.

   
   
   
   
   
   

   Step 2: Set up Amazon Bedrock Model Access

   
   
   
   
   
   1. Sign in to the AWS Management Console and open the Amazon Bedrock console at
      
      
      
      
      
      

      
      
      
      Step 2: Deploy Cloud Resources
      

      
      
      
      
      
      1. Open a new terminal window, navigate to your app's project folder (ai-recipe-generator), and run the following command to deploy cloud resources into an isolated development space:
         
      
      
      
      
      
      
      

      CODE Kopieren

         npx ampx sandbox
      
      

      
      
      
      
      
      
      
      

      This command sets up a sandbox environment where you can quickly iterate on your changes.

      
      
      
      
      

      The deployment process is now complete, and you can begin interacting with your serverless backend.

      
      
      
      
      
      
      
      

      
      
      
      Step 2: Style the App UI
      

      
      
      

      Next, we’ll style the frontend to create a clean, modern interface. We'll focus on centering the layout and styling the form where users will input their ingredients.

      
      
      
      
      
      1. Open ai-recipe-generator/src/index.css, and update it with the following code to set global styles and center the UI:
         
      
      
      
      
      
      
      

      CODE Kopieren

         :root {
      
           font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
      
           line-height: 1.5;
      
           font-weight: 400;
      
           color: rgba(255, 255, 255, 0.87);
      
           max-width: 1280px;
      
           margin: 0 auto;
      
           padding: 2rem;
      
         }
      
      
      
         .card {
      
           padding: 2em;
      
         }
      
      
      
         .box:nth-child(3n + 1) {
      
           grid-column: 1;
      
         }
      
         .box:nth-child(3n + 2) {
      
           grid-column: 2;
      
         }
      
         .box:nth-child(3n + 3) {
      
           grid-column: 3;
      
         }
      
      

      
      
      
      
      
      
      
      

      This CSS will help ensure that the app's layout is centered, the font is legible, and the UI components have a clean, consistent style.

      
      
      
      
      
      
      
      

      
      
      
      Step 3: Implement the UI
      

      
      
      

      Now, let’s build the main React component for the app. We’ll integrate the AWS Amplify Authentication components for user sign-up, sign-in, and password recovery.

      
      
      
      
      
      1. Open ai-recipe-generator/src/main.tsx and update it with the following code. This will use the Amplify Authenticator component to wrap your app and provide a complete authentication flow:
         
      
      
      
      
      
      
      

      CODE Kopieren

         import React from "react";
      
         import ReactDOM from "react-dom/client";
      
         import App from "./App.jsx";
      
         import "./index.css";
      
         import { Authenticator } from "@aws-amplify/ui-react";
      
      
      
         ReactDOM.createRoot(document.getElementById("root")!).render(
      
           <React.StrictMode>
      
             <Authenticator>
      
               <App />
      
             </Authenticator>
      
           </React.StrictMode>
      
         );
      
      

      
      
      
      
      
      
      
      

      The Authenticator component will handle user authentication, including sign-up, sign-in, and MFA (Multi-Factor Authentication).

      
      
      
      
      
      
      
      

      
      
      
      Step 4: Run and Test the App
      

      
      
      
      
      
      1. Open a new terminal window and navigate to your project’s root directory (ai-recipe-generator), then run:
         
      
      
      
      
      
      
      

      CODE Kopieren

         npm run dev
      
      

      
      
      
      
      
      
      
      
      
      
      1. Visit the local host URL to open the app in your browser and test it.
      
      
      
      
      
      
      
      

      
      
      
      Step 5: Deploy the App
      

      
      
      

      Once you’ve confirmed that the app is working as expected locally, it’s time to deploy it to AWS Amplify.

      
      
      
      
      
      1. In the terminal, commit your changes:
         
      
      
      
      
      
      
      

      CODE Kopieren

         git add .
      
         git commit -m 'connect to bedrock'
      
         git push origin main
      
      

      
      
      
      
      
      
      
      
      
      
      1. Go to the AWS Amplify console, and your app should automatically build and deploy.
      
      
      
      
      

      After deployment, you can access your live app at the provided Amplify URL.

      
      
      
      
      

      
      

      Shubham Murti — Aspiring Cloud Security Engineer | Weekly Cloud Learning !!

      
      

      
      
      

      Let’s connect: , Github

      Vollständiger Original-Bericht

      Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.

      ↗ Original-Artikel auf dev.to lesen