Learn SvelteKit by building a Full Stack CRUD app | SvelteKit & Firebase (Auth + DB)
ฝัง
- เผยแพร่เมื่อ 6 ส.ค. 2024
- This SvelteKit crash course will teach you all the essentials for full stack development with SvelteKit + Firebase (auth & database). We cover all the best practices for svelte stores, state management, authentication, routes, styling, responsive web app development and learn how we can implement all the CRUD operations using Firestore and Firebase Auth.
#Fullstack #sveltekit #Firebase #programming
🔗 Resources
Init SvelteKit - kit.svelte.dev/docs/creating-...
Github repository - github.com/jamezmca/sveltekit...
FIrebase docs - firebase.google.com/docs/web/...
Font Awesome CDN - cdnjs.com/libraries/font-awesome
🔥 Get More Content - Subscribe and click le notification bell to stay tuned for all the fun & exciting tutorials to come!
Roadmap - roadmap.smoljames.com
Courses - smoljames.com
📚 Chapters
00:00 Intro + Demo
01:49 Build SvelteKit App
01:46 Init & configure Next.js project
45:24 Firebase Auth + DB
🔖 Topics Covered
- How to build a full stack app
- Learn SvelteKit
- Responsive web design
- Firebase Auth + Firestore noSQL databases
Wow. That was a blitz, and everything worked! Thank you - this was really helpful. I appreciate you taking time to put the sensitive info in a .env file.
Thanks man, there isn't a lot of up to date SvelteKit content out there, keep it up!
Might have to make some more videos on Sveltekit then aye :)
Superlative content , James I've watched the video twice so far as there is so much to unpack in this one , best Sveltekit CRUD on youtube ! Really liked your take on floating-labels.
Thanks for the comment - that's very kind. I'm glad you enjoyed the video 😊
Excellent work! Flexbox is still a bit foreign for me even still, but I like that you spent time working through common styling needs!
haha thanks for the comment - as with anything, it'll come with practice :)
awesome video.. concise, to the point and hands on...
Hi James, thanks for making this. You're solving the problems that I'm having trouble with at the moment. Just one bit of constructive criticism: I think it would improve your content if you were to bundle the different aspects to this project into different sections. (i.e. a section on auth, a section on db, a section on styling). As they are very much intertwined in this video, I can't watch the Auth stuff I'm interested in without searching for those little nuggets in amongst you adding CSS to stuff - which is all stuff I know. Might just be me, I don't know. But I thought I'd offer the feedback :) Thanks again.
Hi Ben - thanks for the comment, it's a really good point & I see where you're coming from. In future, I will try to keep clearer divisions between the sections :)
You da best for this one. GOATed.
Great stuff! Got me subscribed for more Svelte/SvelteKit goodies! Thanks for sharing!
Glad you enjoyed :) thanks for the comment!
Awesome tutorial!
Thank you!
Great tutorial man🥳, it was easy to follow and explained well. Keep doing more stuff on SvelteKit & Firebase...
Glad you liked it!
Very good tutorial, thanks for you time and effort!
Thanks for the comment & you're more than welcome :P
+suggestion - On further videos please breakdown & explain complex things step by step for more clarity, it would be helpful for beginners.. Nice work👏
Noted! thanks for the feedback
bro i fucking love you
not gonna lie
i was having a hard time following you as i was changing things up when i was following
the favicons thing didnt work so had to use buttons
and the firebase thing was having issues with storing the todos but somehow managed to get it fixed
eternally grateful bro
With the way you've structured this project, every time one of the authHandlers methods is called, the http POST request is shown in the console with API key attached in plain text. Is there a way with SvelteKit to ensure that those methods are only run on the server to avoid exposing the key?
Smooth video, can you remind me how did you prevent the page show on a non authenticated route? (when trying to reach dashboard before the login for example)
Thank you so much
Happy to be of service!
excellent explanation man thx alot!
More than welcome!
first, thanks for your big efforts, and a great tutorial, I have just a question. can we do that in the form actions and instead of stories we could use the hooks !!! really like your styling 😉...
Thanks for the comment :) and yes I'm sure you could just use the form actions and use hooks instead of the store. Might be a bit of reconfiguration but I'm sure it's doable:)
Thanks James very helpful video
More than welcome :)
It would be great to have more next js 13 projects especially with the changes in 13.2
sounds like a plan :)
actual GOAT
I loved this tutorial and it was pretty simple to follow, if I were to ask for something to improve it would be if you could maybe try to explain why you do some things but either way it was a good video to follow along.
I'm trying to deploy the app to vercel but when I build it and run npm run preview it works fine but when I finally deploy it on vercel it throws an error :
This Serverless Function has crashed.
Your connection is working correctly.
Vercel is working correctly.
500: INTERNAL_SERVER_ERROR
Code: FUNCTION_INVOCATION_FAILED
Glad you found the tutorial useful and thanks for the feedback! It's good advice :) As for the error, i'm not super familiar with deployment on Vercel but im sure there's some good documentation out there as to how you can deploy a nextjs app on vercel!
hello , thank you a lot , this project was amazing but next time don't take so much time in styling ! thank you again :)
Haha noted!
Loved this Svelte+Firebase stack. Isn't there another way to structure the code, as in not having the logic (js) + html + css in the same file? Having a file for, at least, the css alone would make it feel less cluttered and more legible
Yeah I believe you can make a separate app.css and import it into your svelte file inside the script tag
thanks a lot
You are most welcome :)
excellent maybe someone knows how to create the dist directory to upload to firebase
would you use svelte in a production project?
Absolutely!
It'd have been much easier and to the point if you made the app functional, and made styling an optional part somewhere at the end, as were mostly here for the functionality part.
Noted - thanks for the feedback!
You had me at 26:20
@Smoljames thanks for video. But I think this video is about Css and styling. 80% of the content is writing style classes. Please make such courses about what it is. Maybe you should use zero css or share the complete style.css from here and focus on Svelte and Firebase. Thank you in advance.
Good feedback - I think you make a good suggestion and I'll be sure to incorporate it in future so that it's more focused on sveltekit!
Sorry but in whole first 30 minutes you only show styling and css classes. I thought I am watching wrong course, not Svelte but CSS. Normally it takes 2 or 3 minutes to prepare basic login and register form component.
@@Smoljames I don't want to be misunderstood. The course is awesome as a full stack crud/auth app. As an exprienced React and Vue developer, I just want to more Svelte things rather than Css. But I think it depends.
you are css guy but the way your develop svelte component and manage forms is wrong.
Title is somewhat missleading cause it feels like you did not use a lot of SvelteKits features. I only saw Svelte features. But also i mostly skimmed over the video so maybe i missed it😅
you should have named the video, learn CSS rather than learn SvelteKit
Dude for real.
Awesome video! This would be considered an SPA right? What structural differences would have to be made in order to make a MPA? @Smoljames