Roman Abendroth & Nils Röhrig | Loql
The Hosts
Software Engineer
Roman Abendroth
Software Engineer
Nils Röhrig
The Tools
A short introduction to both Firebase and SvelteKit.
is a framework for rapidly developing robust, performant web applications using Svelte.
- Components
- Rendering
- Interactivity
- ‘Browser Stuff‘
- Routing
- Data Loading
- Form Processing
- ‘Server Stuff‘
Meta-framework for
Meta-framework for
Routing
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')
})
Code-Based
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')
})
Code-Based
How it works in Frameworks like Express, Laravel or Spring Boot.
File-Based
How it works in Frameworks like SvelteKit, Next.js or Nuxt.
Anatomy of a Route
+page.js
Loads data on the client and on the server. Returns data available within the data
prop.
+page.server.js
Loads data and processes forms on the server. Returns data available within data
and form
.
Route/[param]
The actual path to a specific route, rooted at the routes
folder in a SvelteKit code base.
+page.svelte
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.
Product Examples
...and many more...
Authentication
A user-friendly and secure authentication system that supports various sign-in methods.
Firestore
A global-scale document database that allows easy data storage, synchro-nization, and querying for mobile and web apps
Cloud Functions
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>>
}
}
Security RUles
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();
Project Setup
A short introduction on how to set up a Firebase project with SvelteKit.
1
Create a Firebase project in the Firebase Console.
2
Set up a web app within the Firebase project.
3
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.
Demo & Code Deep Dive
Thank YOu!
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 |
Text
We offer a variety of services and plans tailored to business needs of any kind and of any size.
Process
IDEATION
During the ideation phase, expect to discuss the project in depth to clearly understand the goals and requirements.
BUILD
Our team makes each part of the build phase seamless with regular check-ins and deliverables.
LAUNCH
It's time to take the product live - the end if the build phase but the beginning of being in market.
TEAM & BACKGROUND
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
George
Meet the Team
CEO
Elaine
Advisor
Susan
-
Conceptualization
-
Product Design
-
Development
-
UI/UX Testing
-
Branding
OUR SERVICES
Available 24/7
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
- Thoughtful process
- Dedicated team
- Pixel-perfect work
- 24/7 support
ACME Design
- Fragmented workflow
- Too many clients
- Rushed deliveries
- 9-5 support
COMPETITORS
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 |
ACME Offices
SOLO
Price $149 /mo
One project
Two designs
7-day turnaround
Premium support
PRO
Price $299 /mo
NEW
Up to three projects
Three designs/project
7-day turnaround
Premium support
PREMIUM
Price $599 /mo
Up to five projects
Five designs/project
3-day turnaround
24/7 support
Services & Pricing
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.
Our History
PHILOSOPHY
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.
1
Discovery of requirements for a project.
2
Research into the project space, competitors and the market.
3
Creating a Plan that sets the requirements for the design and build phases.
5
Review and Iterate on the designs with testing of ideas, client feedback and prototypes.
4
Design a number of iterations that capture the plans and requirements.
6
Build the project to an MVP to test and evaluate. Iterate using these learnings.
GET IN TOUCH
+1 555-0194
Our client team is ready to hear about your project. We're available by email or phone 24/7.
Building Dynamic Web Apps with SvelteKit and Firebase
By Nils Röhrig
Building Dynamic Web Apps with SvelteKit and Firebase
- 1,034