Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

How to Build Serverless Web Apps with Firebase - Kelvin Gobo @slightlynerd

Slide 3

Slide 3 text

A Little About Me ● Kelvin Gobo ● Frontend Developer @Appyclan Technologies ● Mentor @ALC @DSCUniport

Slide 4

Slide 4 text

“Firebase is mobile and web development platform that helps you quickly develop high-quality apps and grow your business”

Slide 5

Slide 5 text

Is a good fit if you want: - Spend more time on business logic, less on overhead - Deliver value on time - Do more faster, easier

Slide 6

Slide 6 text

A conference web application with: - Authentication - Push notifications - Live feeds - Gallery All built in a week! Meet Confer

Slide 7

Slide 7 text

How is this possible?

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Hosting Authentication Storage Serverless

Slide 10

Slide 10 text

Authentication - User Identity - Store user records - Personalization - Premium services

Slide 11

Slide 11 text

URL: console.firebase.google.com

Slide 12

Slide 12 text

URL: console.firebase.google.com

Slide 13

Slide 13 text

URL: console.firebase.google.com

Slide 14

Slide 14 text

URL: console.firebase.google.com

Slide 15

Slide 15 text

URL: console.firebase.google.com

Slide 16

Slide 16 text

URL: console.firebase.google.com

Slide 17

Slide 17 text

● Add firebase to React App

Slide 18

Slide 18 text

● Authenticate users with firebaseui

Slide 19

Slide 19 text

● Authenticate users with firebaseui

Slide 20

Slide 20 text

● Authenticate users with firebaseui

Slide 21

Slide 21 text

Hosting - Show your site to the world - Build your brand - Provide a service

Slide 22

Slide 22 text

URL: console.firebase.google.com

Slide 23

Slide 23 text

URL: console.firebase.google.com

Slide 24

Slide 24 text

URL: console.firebase.google.com

Slide 25

Slide 25 text

URL: console.firebase.google.com

Slide 26

Slide 26 text

Storage - Store media assets - Save user uploads like photos and videos

Slide 27

Slide 27 text

URL: console.firebase.google.com

Slide 28

Slide 28 text

URL: console.firebase.google.com

Slide 29

Slide 29 text

URL: console.firebase.google.com

Slide 30

Slide 30 text

● Add firebase storage to React App

Slide 31

Slide 31 text

● Add firebase storage to React App

Slide 32

Slide 32 text

Truly Serverless

Slide 33

Slide 33 text

● Add firebase cloud functions

Slide 34

Slide 34 text

● Add firebase cloud functions - functions/index.js

Slide 35

Slide 35 text

URL: console.firebase.google.com

Slide 36

Slide 36 text

● Add firebase cloud functions - src/pages/Feeds.js

Slide 37

Slide 37 text

● Add firebase cloud functions - src/pages/Feeds.js

Slide 38

Slide 38 text

THANK YOU! Kelvin Gobo @slightlynerd www.slightlynerd.com