Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Svelte.js & Firebase: Pokedex edition
Rating: 4.1 out of 5(42 ratings)
2,215 students

Svelte.js & Firebase: Pokedex edition

Build step by step a web application with SvelteJS & Firebase
Created byGuillaume Duhan
Last updated 4/2021
English

What you'll learn

  • SvelteJS basics with no knowledge
  • Advanced techniques & core concepts of Svelte
  • Firebase setup from scratch
  • Firebase Auth with Google, store/get data with Firestore & Database
  • Routing, route guards & redirect with Routify
  • Webdesign with Tailwindcss

Course content

1 section • 14 lectures • 1h 58m total length

  • Svelte Routify setup6:34

    In this course, we are going to setup our Svelte project with Routify.

  • Firebase setup7:01

    Let's setup now our Firebase project with pokemons.json that you can find down here.

  • Authentication12:48

    Authentication with Firebase can be tricky. Let's check that together.

  • Navigation bar (auth logic)8:34

    Now we've got our authentication setup, let's create our navigation bar to login with Google.

  • Components in Svelte (nav, menu, button)7:47

    With Svelte, you can create components. Theses components can be reusable. In this lesson, we are going to create Menu & Button components and I'll teach you the component logic.

  • Events in Svelte (from child to parent, parent to child...)11:25

    Firing an event from the menu is a very good example of events logic in Svelte.

  • Set data in Firestore (user document)8:27

    Later, we'll need to get our favorites by user. In order to get them, we need to first set a user document at signin.

  • Creating stores in Svelte (user & pokemons)8:39

    Stores help us to save data and share it between components/pages.

  • Store pokemons get from database (favorites)12:40

    In this session, we'll get the pokemons from database and store them.

  • Loading, ListItem & Labels components (svelte, tailwindcss)9:48

    We need to create and design some useful components. Loading, ListItem ans Label are going to be helpful.

  • Set a pokemon as favorite (firestore)8:58

    In our ListItem component, we'll set a button that triggers our favorite feature.

  • Pokemon & Profile pages (svelte, tailwindcss)9:31

    This is design time. We'll clean our Pokemon profile page and our User profile page. Be careful: we'll also work on page's mechanic initiation.

  • Autocomplete (svelte, firestore)6:07

    This is the quick bonus of this course: i'll show you how to create an autocomplete and get pokemons by name from database.

  • Thank you very much!0:32

    This is the end. Thank you very much !

    Find down here the repository of this course. Note: it's version might evolve with time this is why some functions could not be named as in the course.

Requirements

  • Javascript basics

Description

What is Svelte?

Just like React and Vue, Svelte is a JavaScript framework offering a productive approach for making frontend interfaces easy to build. The biggest technical advantage of Svelte is high performance, browser-friendly JavaScript with small bundle sizes.

Why to use Svelte.js?

If you are looking for an efficient Javascript framework with a nice learning curve to build front-end applications, you'll love to play with Svelte. This framework provides a fluid & light approach of coding that open new horizons for beginners and seniors developers.

Svelte/Firebase, a good mix?

As you may already know, Firebase offers you the opportunity to create an app serverless. It means that you don't need to code any back-end at all. Moreover, this is for free! How amazing is that? Combined with Svelte makes this course even more interesting for those who want to create a front-end app.

What is our program?

In this course, I'll teach you how to handle Svelte and Firebase by coding a Pokedex! Why? Because it provides to us an already-made database (I'll provide you a JSON to use during the course) that we'll inject inside our Front-End application directly from Firebase.

Concerning Svelte, you'll learn:

  • Svelte mechanic, logic & lifecycles,

  • Adding data,

  • Dynamic attributes,

  • Conditions, key, DOM events...

  • Styling,

  • Nested components,

  • Components & views relationships,

  • Assignments, declarations, statements,

  • Updating values,

  • Declaring props,

  • Manage stores...

But not only. I'll use my senior skills to show you how to architecture a Front-End application properly. In details, this is our roadmap:

  • Svelte install & configuration,

  • Routing with Routify,

  • Firebase project configuration,

  • FireAuth, FireStore & FireDatabase initialization,

  • Authentication, routes guards & sessions,

  • JavaScript modules & Front-End architecture,

  • API interface design,

  • Views & components logic in Svelte,

  • CSS Design with Tailwindcss,

  • Autocomplete for pokemons,

  • Listing pokemons,

  • Store favorites pokemons...

This is a complete program and all of this in less than 2 hours.

Svelte is a radical new approach to building user interfaces [...] As we all know the popularity of Svelte is at the moment way lower than other JS frameworks/libraries like React.js or Vue.js, but that is no reason for Svelte to lose the game.

Svelte. What is your opinion about the lightweight JS framework? by Dennis Frijlink

So if you are ready, join this course!

Who this course is for:

  • developers

Report abuse