Svelte.js & Firebase: Pokedex edition

Build step by step a web application with SvelteJS & Firebase
New
Rating: 4.5 out of 5 (7 ratings)
694 students
English
English [Auto]
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

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

Course content

1 section14 lectures1h 58m total length
  • Svelte Routify setup
    06:34
  • Firebase setup
    07:01
  • Authentication
    12:48
  • Navigation bar (auth logic)
    08:34
  • Components in Svelte (nav, menu, button)
    07:47
  • Events in Svelte (from child to parent, parent to child...)
    11:25
  • Set data in Firestore (user document)
    08:27
  • Creating stores in Svelte (user & pokemons)
    08:39
  • Store pokemons get from database (favorites)
    12:40
  • Loading, ListItem & Labels components (svelte, tailwindcss)
    09:48
  • Set a pokemon as favorite (firestore)
    08:58
  • Pokemon & Profile pages (svelte, tailwindcss)
    09:31
  • Autocomplete (svelte, firestore)
    06:07
  • Thank you very much!
    00:32

Instructor

Senior Front-End Developer JavaScript (Vue, Node, Firebase)
Guillaume Duhan
  • 4.3 Instructor Rating
  • 529 Reviews
  • 22,375 Students
  • 17 Courses

Front-End Developer since 10 years now, I've spend 4 years abroad (London, Berlin, Paris) and I've worked in 30+ start-ups (up to 1,000 employees). Expert in Vue.js, I am also jury for French National developer's degree delivered by IFOCOP Paris 11, France. I also gives tech courses for companies on development, marketing & communication. Literature, languages and travel are my passions.

--

10 ans d'expérience en tant que développeur Front-end dont 4 années passées à l'étranger (Londres et Berlin) dans des start-up allant de 4 à 1000 employés. +100 applications et sites web créées.

Expert en Vue.js en freelance depuis 3 ans, je suis capable d'intervenir à toutes les étapes d'un projet numérique, de son élaboration, en passant par son architecture jusqu'à sa conception finale.

Formateur (JavaScript, Vue, Node), membre du jury pour le diplôme d'état "Développeur Intégrateur de niveau 6" de l'IFOCOP Paris 11, je suis également auteur de romans et de livres sur le sujet du numérique et de toutes les transformations digitales auxquelles la société devra se confronter dans les trente prochaines années.