Roman Abendroth & Nils Röhrig | Loql
Software Engineer
Software Engineer
A short introduction to both Firebase and SvelteKit.
is a framework for rapidly developing robust, performant web applications using Svelte.
const express = require('express')
const app = express()
// GET method route
app.get('/', (req, res) => {
res.send('GET request to the homepage')
})
// POST method route
app.post('/', (req, res) => {
res.send('POST request to the homepage')
})
How it works in Frameworks like Express, Laravel or Spring Boot.
const express = require('express')
const app = express()
// GET method route
app.get('/', (req, res) => {
res.send('GET request to the homepage')
})
// POST method route
app.post('/', (req, res) => {
res.send('POST request to the homepage')
})
How it works in Frameworks like Express, Laravel or Spring Boot.
How it works in Frameworks like SvelteKit, Next.js or Nuxt.
Loads data on the client and on the server. Returns data available within the data
prop.
Loads data and processes forms on the server. Returns data available within data
and form
.
The actual path to a specific route, rooted at the routes
folder in a SvelteKit code base.
The pages markup, styles and behavior. It may receive a data
or a form
prop.
<script>
// The data displayed or used on the page
export let data;
</script>
<h1>Records</h1>
<ul>
<!-- Iterating data from `data` prop -->
{#each data.records as record (record.id)}
<li><a href="/{record.id}">{record.name}</a></li>
{/each}
</ul>
<h2>Create New Record</h2>
<!-- Form to create new data -->
<form method="post">
<input type="text" name="artist" placeholder="Enter artist..." />
<input type="text" name="name" placeholder="Enter name..." />
<button type="submit">Create record</button>
</form>
import { list } from "$lib/server/db";
import { add } from "$lib/server/db.js";
export function load() {
// Describes what is available in the `data` prop
return {
records: list(),
};
}
export const actions = {
// The default form action to process form posts
async default({ request }) {
const data = await request.formData();
const artist = data.get("artist");
const name = data.get("name");
add(artist, name);
},
};
<script>
export let data;
</script>
<h1>{data.record.name}</h1>
<p>by {data.record.artist}</p>
import { get } from "$lib/server/db.js";
import { error } from "@sveltejs/kit";
export function load({ params }) {
const record = get(params.id);
if (!record) {
throw error(404);
}
return {
record,
};
}
is an app development platform that helps you build and grow apps and games users love.
A user-friendly and secure authentication system that supports various sign-in methods.
A global-scale document database that allows easy data storage, synchro-nization, and querying for mobile and web apps
Serverless functions that allow secure and private data processing and database event handling.
App Client
Firebase Authentication
Login Credentials / Provider
Session
Firestore, Storage...
Request via Client SDK
Resource / Error
Firebase Backend
Check Access
Access Denied
Security Rules
App Backend
Request Resource
Resource / Error
Access Granted
Verify Identity
Resource
Request via Admin SDK
Resource
App Client
Firebase Authentication
Login Credentials / Provider
Session
Firestore, Storage...
Request via Client SDK
Resource / Error
Firebase Backend
Check Access
Access Denied
Security Rules
App Backend
Request Resource
Resource / Error
Access Granted
Verify Identity
Resource
Request via Admin SDK
Resource
App Client
Firebase Authentication
Login Credentials / Provider
Session
Firestore, Storage...
Request via Client SDK
Resource / Error
Firebase Backend
Check Access
Access Denied
Security Rules
App Backend
Request Resource
Resource / Error
Access Granted
Verify Identity
Resource
Request via Admin SDK
Resource
App Client
Firestore, Storage...
Request via Client SDK
Resource / Error
Firebase Backend
Check Access
Access Denied
Security Rules
App Backend
Request Resource
Resource / Error
Access Granted
Verify Identity
Resource
Request via Admin SDK
Resource
Firebase Authentication
Login Credentials / Provider
Session
App Client
Firestore, Storage...
Request via Client SDK
Resource / Error
Firebase Backend
Check Access
Access Denied
Security Rules
App Backend
Request Resource
Resource / Error
Access Granted
Verify Identity
Resource
Request via Admin SDK
Resource
Firebase Authentication
Login Credentials / Provider
Session
App Client
Firestore, Storage...
Request via Client SDK
Resource / Error
Firebase Backend
Check Access
Access Denied
Security Rules
App Backend
Request Resource
Resource / Error
Access Granted
Verify Identity
Resource
Request via Admin SDK
Resource
Firebase Authentication
Login Credentials / Provider
Session
App Client
Firestore, Storage...
Request via Client SDK
Resource / Error
Firebase Backend
Check Access
Access Denied
Security Rules
App Backend
Request Resource
Resource / Error
Access Granted
Verify Identity
Resource
Request via Admin SDK
Resource
Firebase Authentication
Login Credentials / Provider
Session
App Client
Firestore, Storage...
Request via Client SDK
Resource / Error
Firebase Backend
Check Access
Access Denied
Security Rules
App Backend
Request Resource
Resource / Error
Access Granted
Verify Identity
Resource
Request via Admin SDK
Resource
Firebase Authentication
Login Credentials / Provider
Session
App Client
Firestore, Storage...
Request via Client SDK
Resource / Error
Firebase Backend
Check Access
Access Denied
Security Rules
App Backend
Request Resource
Resource / Error
Access Granted
Verify Identity
Resource
Request via Admin SDK
Resource
Firebase Authentication
Login Credentials / Provider
Session
service <<name>> {
// Match the resource path.
match <<path>> {
// Allow the request if the following conditions are true.
allow <<methods>> : if <<condition>>
}
}
Collection
Collection
Collection
Document
Document
Document
Document
Document
Document
Document
Document
Document
Document
Document
Document
Document
Document
Document
Document
Document
Document
Document
Database
// Create a new document in a collection
await db.collection("collection-name")
.doc()
.set({ fieldName: "field-value" });
// Query documents from a collection
const documents = await db.collection("collection-name")
.where("fieldName", "==", "field-value")
.get();
// Update a document in a collection
await db.collection("collection-name")
.doc("document-id")
.update({ fieldName: "updated-field-value" });
// Delete a document in a collection
await db.collection("collection-name")
.doc("document-id")
.delete();
A short introduction on how to set up a Firebase project with SvelteKit.
Create a Firebase project in the Firebase Console.
Set up a web app within the Firebase project.
Create a SvelteKit project on your computer.
* Optionally, install Firebase Admin SDK for server-side usage.
** Find more information at https://github.com/FirebaseExtended/firebase-framework-tools
*** Since Web Framework support uses Cloud Functions, you have to be on the Blaze plan.
Repository: | https://github.com/nilsroehrig/plant-care-assistant/ |
Website: | https://plant-care-assistant-38fd3.web.app/ |
LinkedIn: |
Roman Abendroth Nils Röhrig |
X / Twitter: | Nils Röhrig |
We offer a variety of services and plans tailored to business needs of any kind and of any size.
During the ideation phase, expect to discuss the project in depth to clearly understand the goals and requirements.
Our team makes each part of the build phase seamless with regular check-ins and deliverables.
It's time to take the product live - the end if the build phase but the beginning of being in market.
Our design team has a collective 75 years of experience in crafting digital products. Our diverse backgrounds offer a thorough mix of points of view.
CFO
CEO
Advisor
Conceptualization
Product Design
Development
UI/UX Testing
Branding
Our dedicated team is there when you need us to resolve any and all issues.
Working with ACME is nothing short of amazing. They delivered a pixel perfect product on time and on budget. 10/10 recommend.
– Frank Newman,
Vandelay Industries
The Summit is what drives us, but the climb itself is what matters.
– Conrad Anker
Country | City | Contact |
---|---|---|
USA | Los Angeles | +1 555 0194 |
USA | New York | +1 555 0142 |
Sweden | Stockholm | +46 555 0077 |
UK | London | +44 555 0211 |
South Korea | Seoul | +82 555 0138 |
Price $149 /mo
One project
Two designs
7-day turnaround
Premium support
Price $299 /mo
NEW
Up to three projects
Three designs/project
7-day turnaround
Premium support
Price $599 /mo
Up to five projects
Five designs/project
3-day turnaround
24/7 support
ACME Design Inc started a two-person operation in 2011. In their hometown of Los Angeles, California, the founders came together with a vision to design and build beautiful, simple web and mobile products.
In ten years, the team has grown to over one hundred members with offices in four countries. In that time the goal has always remained the same: to design impactful solutions to complex problems.
Once all is removed that can be removed, that is how designs are truly in their simplest form.
We believe great things are created when teams of diverse individuals come together and organize around a centralized goal. We operate without ego or blame and we have defined processes that ensure the best option is the one chosen.
While this process is lengthy at times, the best outcomes are derived from our approach to creation.
Discovery of requirements for a project.
Research into the project space, competitors and the market.
Creating a Plan that sets the requirements for the design and build phases.
Review and Iterate on the designs with testing of ideas, client feedback and prototypes.
Design a number of iterations that capture the plans and requirements.
Build the project to an MVP to test and evaluate. Iterate using these learnings.
+1 555-0194
Our client team is ready to hear about your project. We're available by email or phone 24/7.