[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","67a6fb3e2a18819194962eb7d3e756c6","versionInt","title","Learn Fireproof","type","code/react","content","import React, { useState } from \"react\";\nimport { useFireproof } from \"use-fireproof\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { CodeBlock, atomOneLight } from \"react-code-blocks\";\n\nexport default function App() {\n const { database, useLiveQuery } = useFireproof(\"fireproof-tutorial\");\n const [step, setStep] = useState(1);\n const [input, setInput] = useState(\"\");\n const [savedDoc, setSavedDoc] = useState(null);\n const [queryDocs, setQueryDocs] = useState([]);\n\n const handleSaveDocument = async () => {\n const ok = await database.put({ text: input });\n setSavedDoc(await database.get(ok.id));\n setInput(\"\")\n };\n\n const handleRunQuery = async () => {\n const result = await database.query(\"text\", { limit: 5 });\n setQueryDocs(result.rows.map(r => r.doc));\n };\n\n return (\n

Fireproof Tutorial

\n {step === 1 && (\n \n \n Step 1: Saving and Reading Documents\n \n \n

Enter some text to save a document with a random ID.

\n setInput(e.target.value)}\n className=\"w-full p-2 border rounded mb-4 text-gray-900\"\n placeholder=\"Enter text\"\n />\n \n {savedDoc &&

Saved: {savedDoc.text} (ID: {savedDoc._id})

}\n

\n \n

\n \n \n \n )}\n {step === 2 && (\n \n \n Step 2: Query with Live Query\n \n \n

Querying documents in real-time.

\n \n

{doc.text}

No results yet. Click 'Run Query' to fetch data.

\n \n

\n \n \n \n )}\n {step === 3 && (\n \n \n Step 3: Build a new app\n \n \n

Click \"Edit with ChatGPT\" at the top of the page to modify this app.

Navigate to https://use-fireproof.com/llms-full.txt and copy the content. Then, paste it into the model to continue. Learn more about llms.txt at https://llmstxt.org/.

You can modify this app to create:

Collaborative Note-Taking App
Task Management Tool
Chat Application
Inventory Management System
Personal Diary
Recipe Organizer
Event Scheduler
Bookmark Manager
Expense Tracker
Idea Board

Get started with:

\n \n \n \n )}\n

\n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","7146822645881681608","traceTime",1781449463746]