📝Application Overview

Overview of how the app works

Tech Stack

The application has been built using the following technologies:

• React (as the frontend framework)

• Tailwind (for styling the frontend)

• Node.js with Express (for building the backend API)

• MongoDB Atlas (as the datastore)

• Cloudflare Images (as the CDN for serving images)

• Clerk (as the authentication service)

• OpenAI Platform SDK (for accessing GPT-3.5 & DALL-E 2 LLMs)

• Cloudflare Workers (for building scheduled workers)

Application Components

The application consists of 7 components.

These are illustrated in the diagram & table below (click to enlarge):

Diagrammatic overview of the application

Component	Role	Reads from	Writes to
Frontend	Graphical User Interface	Backend API, Clerk, Cloudflare Images	Backend API, Clerk
Backend API	Interface to frontend for processing submissions, managing recipes & enforcing sessions.	MongoDB Atlas, OpenAI Platform, Clerk (& Frontend)	MongoDB Atlas, OpenAI Platform, Cloudflare Images
MongoDB Atlas	Storing recipe data & submission processing data	Backend API, Cloudflare Workers	Backend API, Cloudflare Workers
OpenAI Platform	Analysing recipe submissions & providing metadata, ingredients, image & data on spam-like attributes.	Backend API	Backend API
"Chuck-NORRIS" Scheduled Worker on Cloudflare	"Chuck-NORRIS can..." Okay, sorry. This worker cleans temporary and hanging data, once a day (learn more).	MongoDB Atlas (via Atlas App Service)	MongoDB Atlas (via Atlas App Service), Cloudflare Images
Cloudflare Images	Storing and serving recipe images.	Backend API, Cloudflare Workers	Frontend
Clerk	Authentication, user management & session management.	Frontend	Backend API, Frontend