- Svelte Routify setup
- Firebase setup
- Authentication
- Navigation bar (auth logic)
- Components in Svelte (nav, menu, button)
- Events in Svelte (from child to parent, parent to child...)
- Set data in Firestore (user document)
- Creating stores in Svelte (user & pokemons)
- Store pokemons get from database (favorites)
- Loading, ListItem & Labels components (svelte, tailwindcss)
- Set a pokemon as favorite (firestore)
- Pokemon & Profile pages (svelte, tailwindcss)
- Autocomplete (svelte, firestore)
- Thank you very much!
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
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!
Other Courses
Selling your Black Hills and Rapid City Home
The step by step video series showcasing each step of the Rapid City and Black Hills home selling process.
Color Grading Using Look Up Tables in Photoshop
Giving your photos the professional look
Everything you need to know before you fly a drone in the US
Learn when you need no licence, a Part 107 or a Section 333 exemption
JavaScript 3 practice projects Input form Exercise Generator
Learn JavaScript creating 3 unique interactive projects from scratch - JavaScript DOM element selection and manipulation
AWS Analytics - Athena Kinesis Redshift QuickSight Glue
Covering Data Science, Data Lake, Machine learning, Warehouse, Pipeline, Athena, AWS CLI, Big data, EMR and BI, AI tools
About the instructors
- 3.99 Calificación
- 50734 Estudiantes
- 16 Cursos
Guillaume Duhan
CTO & Front-End Developer
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.
Student feedback
Course Rating
Reviews
Hasta ahora excelente
This course is not for beginners. You have to have a good understanding of Svelte, components, and props as nothing is being explained here. I am not an expert in Firebase or Svelte, but I feel like the app structure is all over the place. If I leave this code for a week without looking at it, I won't understand what is going on or what does what. Take this course if you have a good understanding of frameworks and Firebase. Other than that, it is not the course for you to dip and try Svelte
NOT WORTH YOUR TIME OR MONEY! The course is basically covering how to code a very simple CRUD app with Pokémons. Kind of a to-do app with Pokémons instead of tasks. The app is poorly written in my opinion. Authors coding style and structure of this app are both inconsistent and overcomplicated, considering how small this project is. 1 Content of the course is disappointingly limited. Only a bunch of basic svelte and firebase functionalities are introduced. You could probably squeeze it into 20min tutorial. You will learn much more by reading svelte docs for 10 minutes. 2 Authors comments what is being written, but it is hard to call it an explanation. It is more of a voice-over of what you see on your screen. Sometimes it is hard to get where he is going with the code before he gets there. 3 The course doesn't have a good structure. Is is just an app being written feature by feature, it is not great for education purposes. I would be nice to have the course divided into some chapters / sections that would cover particular topics. 4 From a developer with 10y experience I would like to learn something that I can't learn by just reading the docs. Maybe something about structuring the project to make it scalable? 5 The course is bad for noobies because it lacks in explanation and offers bad code practices and boring for more advanced developers because it doesn't offer any interesting insights about neither svelte nor firebase. Author seems like a nice guy but I don't think he put enough effort preparing this tutorial. very disappointing :(
I love this course.
The code for this course is extremely convoluted, I mainly bough this course so I could get in the express lane for Svelte and Firebase, since it's a technology I would like to pursue for our company. I am a very experienced JavaScript developer, so I can tell this is poor practice. Why on earth would you have several calls to a database to fetch random Pokemon from a database, when you can simply query based on a set of id's? This to me demonstrates a lack of understanding of Firebase. There are also some very sloppy things that I noticed at the start, please bear in mind that I have not finished the video series yet, however I feel this should have been addressed much sooner. The brief amount of time it takes for the UI to recognize that a user is logged in (the auth state changes in the background) is very sloppy. I don't think this kind of thing should be in a course you pay for. This would be fine for a YouTube video, however for a premium course, this is bad. Perhaps a loading wrapper maybe? We should really be learning best practices for the industry when we watch videos like this. Very unimpressed and disappointed so far, I feel like I'm better off going out and learning this from scratch. Courses like this should help reduce the time developers need to learn a new technology, I don't feel this course has done that at all.