Tech Lead at Taktile.
Formerly Firebase, Google
Public
Edited
Mar 23, 2024
2 forks
155 stars
firebaseConfig = ({
apiKey: "AIzaSyD882c8YEgeYpNkX01fhpUDfioWl_ETQyQ",
authDomain: "endpointservice.firebaseapp.com",
databaseURL: "https://endpointservice.firebaseio.com",
projectId: "endpointservice",
storageBucket: "endpointservice.appspot.com",
messagingSenderId: "1986724398",
appId: "1:1986724398:web:9b8bc33895b45dd2e095bf",
uiConfig: {
// https://github.com/firebase/firebaseui-web#configuration
signInOptions: ["google.com", "facebook.com", "phone", "anonymous"]
}
})
viewof exampleUI = viewof user // Yes, its 1 line of code...
uidExample = `Your uid is ${user.uid}`
// See import {firebase, DocView, DocsView, listen} from @tomlarkworthy/firebase
db = firebase.firestore()
msgs = listen(
db.collection("apps").doc("saas").collection("msgs").limit(5).orderBy("time", "desc")
)
msgsAsString = JSON.stringify(msgs.map(entry => entry.msg).reverse(), null, 2)
viewof ui = {
async function sendMsg(evt) {
if (evt.keyCode === 13) {
await db
.collection("apps")
.doc("saas")
.collection("msgs")
.add({
time: firebase.firebase_.firestore.FieldValue.serverTimestamp(),
msg: evt.target.value
});
}
}
return reconcile(
this,
html`
${msgs.map(entry => html`<p>${entry.msg}</p>`).reverse()}
<input class="text" onkeydown=${sendMsg}></input> <-- enter text`
);
}
buy = html`<center>
<button class="button is-primary" onclick=${() => {
stripe.redirectToCheckout({
lineItems: [{
price: 'price_1He4G9HGNosi6Ft0RInpHMHu', // ID of your price
quantity: 1,
}],
mode: 'payment',
successUrl: 'https://observablehq.com/@tomlarkworthy/stripe?success',
cancelUrl: 'https://observablehq.com/@tomlarkworthy/saas-tutorial#buy',
});
}}>
☕ Buy Tom a coffee...
</button>
</center>`
buyCredit = {
function buy(price) {
stripe.redirectToCheckout({
lineItems: [{ price: price, quantity: 1}],
mode: 'payment',
successUrl: `https://observablehq.com/@tomlarkworthy/minecraft-servers`,
cancelUrl: `https://observablehq.com/@tomlarkworthy/saas-tutorial#buyCredit`,
clientReferenceId: user.uid,
customerEmail: user.email,
})
}
return html`
<div class="field has-addons has-addons-centered">
<p class="control">
<span class="select">
<select id="product_choice">
<option value="price_1HeSBJHGNosi6Ft0qX1mdn61">€5</option>
<option value="price_1HeSBJHGNosi6Ft0Dr3APW9w">€10</option>
<option value="price_1HeSBJHGNosi6Ft0KGlUEjwz">€20</option>
<option value="price_1HeSBJHGNosi6Ft0z0fiZAnq">€50</option>
</select>
</span>
</p>
<p class="control">
<button class="button is-primary"
onclick=${() => buy(document.getElementById("product_choice").value)}>
Buy more credit
</button>
</p>
</div>
`
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
