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.

4

Install Firebase Client SDK and use web app config to initialize your App*.

* Optionally, install Firebase Admin SDK for server-side usage.

5

Enable and initialize Experimental Web-Framework support** for your project via Firebase CLI.

6

Use Firebase Emulators Suite for testing. After that, deploy your app with Firebase CLI***

*** Since Web Framework support uses Cloud Functions, you have to be on the Blaze plan.

Demo & Code Deep Dive

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