firebase-recipe.json

[
  {
    "type": "markdown",
    "content": "# Firebase App Generator\n Before starting, watch [the tutorial](https://www.loom.com/share/99140b06774847bbb3f10474160a6e08)\n## Checklist\n - Setup Firebase Project\n - Setup Firebase Web App\n - Setup Firestore Database\n - Setup Authentication\n - Allow your .webdraw.app domain"
  },
  {
    "id": "firebase-config",
    "type": "prompt",
    "title": "Paste your Firebase Config Here",
    "placeholder": "e.g: const firebaseConfig = {...}"
  },
  {
    "type": "prompt",
    "id": "initial-intent",
    "title": "What do you want to build?",
    "placeholder": "e.g: I want to create an app where users can submit places\nwhere you can Dance forró around the world and, if approved\nby the admin, it'll be shown in a big list present in the app's\nhome filtered by city. Places can be reviewed too."
  },
  {
    "type": "prompt",
    "id": "app-entities",
    "title": "Firestore Data Entities",
    "purpose": "Based on this app description: $(initial-intent), generate the Firestore data entities structure for this application.\n                        Start always with something simples. Use subcollections when necessary. And arrays for simple relations.\n                        "
  },
  {
    "type": "prompt",
    "id": "rules",
    "title": "Firestore Rules (copy and deploy)",
    "purpose": "<Task>You're a CRUD firebase app creator with chain of thought and the current task is to return the Firestore Rules for the app</Task> <Context> <AppEntitiesDescription>$(app-entities)</AppEntitiesDescription>. The intent is for the user copy the content and paste there. <Rule>In order for the app to start work, allow the user to hardcoded the admin email to access everything.</Rule></Rule></Context>"
  },
  {
    "type": "prompt",
    "id": "page-list",
    "title": "Page List",
    "purpose": "<Task>You're a CRUD firebase app creator with chain of thought and the current task is to generate the page list for the app.<Task><Context> <AppDescription>$(app-entities)</AppDescription></Task><Stack>The app will be hosted in an traditional filesystem server using .html files. The logic will use inline VueJS and will be placed inside each file. The firebaseConfig.js will be a separate file so we don't need to repeat each page. Example: - firebase.config.js - Firebase config file where the config will be exported and other files will import relative from there.\n- index.html - Home Page for the app with a topbar with login link.\n- login.html - Login Page with Firebase Authorizaton and Google Sign-in Button. The app will use HTML-based navigation and VueJS for interactivity.</Stack><LoginPage>When talking about the login page, mention that it only has login with Google</LoginPage></Context>"
  },
  {
    "title": "Pages to create",
    "type": "generate-files",
    "filePromptTemplate": "<Task>You're a CRUD firebase app creator and the current task is to create the file $(file-name) for the app and return its content in a valid JSON { fileName: string, fileContent: string }.</Task> <Context><InitialIntent>$(initial-intent)</InitialIntent> <FirebaseInfo><FirebaseConfig>$(firebase-config). </FirebaseConfig><FirebaseImportInstructions>import { initializeApp } from \"https://www.gstatic.com/firebasejs/11.0.2/firebase-app.js\";  import { getAnalytics } from \"https://www.gstatic.com/firebasejs/11.0.2/firebase-analytics.js\";</FirebaseImportInstructions><DataEntities>$(app-entities).</DataEntities></FirebaseInfo> <AppPageList>$(page-list).</AppPageList> <StackInfo>Use HTML, TailwindCSS and VueJs (with inline javascript).</StackInfo> This will be JSON.parsed, so return a valid value. DO NOT return any intro text, just the valid json. <Rule1>Import the firebase config for the firebase config file, don't copy it to each file</Rule1><Rule2>Don't create mock data.</Rule2></Context>",
    "purpose": "Based on $(page-list), return prompts to create each page. Every prompt should include the Firebase Config: $(firebase-config).\n                        Also instructions to use HTML, TailwindCSS and Jquery."
  }
]