Build an App with SvelteKit and Tailwind CSS

Подписаться 203 тыс.

Просмотров 60 тыс.

50% 1

Have you tried out the hottest new framework in Web Development? In this video, we'll create a TODO app using SvelteKit and Tailwind CSS.
Source Code -github.com/jam...
Avneesh's Blog - blog.avneesh.t...
Johnny Magrippis RU-vid - / @jmagrippis
SvelteKit + Tailwind Setup - magrippis.com/...
STAY IN TOUCH 👋
Check out the Podcast - compress.fm
Newsletter 🗞 - www.jamesqquic...
Live streams on Twitch 🖥️ - / jamesqquick
Follow me on Twitter 🐦 - / jamesqquick
QUESTIONS...?
Join the Discord Server 💬 - / discord
Want to know what hardware and software I use? www.jamesqquic...
Learn Web Development 📖 - www.jamesqquic...

Опубликовано:

18 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 172

@JamesQQuick 2 года назад

Make sure to check out Part 2 where we add Supabase, authentication, and more! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YqIyET7XKIQ.html

@kirso 2 года назад

Yes for part2 please! Would be cool to include TypeScript + Data storage

@JamesQQuick 2 года назад

Part 2 has been published! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YqIyET7XKIQ.html

@Protoscribe 2 года назад

Hey James, do the second tutorial. I started using Sveltekit like the day it released and auth was one of the things I had to figure out, at least doing it in a correct way. Also people might enjoy seeing endpoints and context module being used in conjunction to talk with an API

@andylib 2 года назад

Agreed

@misterjaypeasmith 2 года назад

@timsonner 2 года назад

Yes, please. I am also highly interested in CRUD operations with SvelteKit. Maybe using PostgreSQL??, whatever db you prefer. On a side note, Rich Harris just joined with Vercel, and is now working on Svelte full time. Kinda big news on par with log4js. Great channel, would greatly enjoy ep 2. Also, gonna try Thunder Client extension for VSC, thanks for the heads up. +1

@Protoscribe 2 года назад

@@timsonner You should check out Prisma and try setting up a project with Sveltekit using it in endpoints in the meantime. Definitely great news about Rich joining Vercel, I actually watched an interview which he mentions it on the 14th.

@timsonner 2 года назад

@@Protoscribe Very cool, I was just on the Prisma site, they did a great job (beautiful site, great documentation). Here is a link to the Vercel interview with Rich Harris being interviewed by Lee Robinson: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-uQntFkK8Z54.html Thanks for the heads up on Prisma.

@dinckelman 2 года назад

Honestly speaking, i'd love to see TS in all future projects. It's a bit of extra effort, but the benefits are just unparalleled

@JamesQQuick 2 года назад

Yeah it’s a tough balance with RU-vid content because of the setup time and not knowing if everyone that is watching has that experience. Regardless I definitely want to do more!

@avneesh0612 2 года назад

Great video and enjoyed this collab as well! Looking forward to more of these 🥂

@JamesQQuick 2 года назад

Part 2 has been published! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YqIyET7XKIQ.html

@cobratateco.6041 Год назад

Sveltekit and tailwind look so smooth together definitely gonna use these for my to-go tech stack

@darrylv.5400 2 года назад

Yes please, a second part with auth & storage would be great and much appreciated.

@JamesQQuick 2 года назад

Part 2 has been published! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YqIyET7XKIQ.html

@DaveLaneNZ 2 года назад

Would love a data persistence & authentication tutorial as part 2! Would love to see it with using a microservice using Express + PostgreSQL!

@JamesQQuick 2 года назад

Part 2 has been published! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YqIyET7XKIQ.html

@jasonbrooks737 Год назад

good quality video! content, sound, font size, clarity all is just correct. thank you.

@raymondmichael4987 2 года назад

Part two will be quite nice, with authentication and cloud dB, preferably nosql (firebase or mongodb). I had trouble connecting sveltekit with firebase v9 hopefully you can shade some light Though we requested a part two of Pokémon app you didn’t last time using sveltekit, I guess it won’t happen. BTW, thanks for doing this buddy

@JamesQQuick 2 года назад

Haha fair enough. It’s hard to keep up with all the part 2s. I wish I had more time lol

@raymondmichael4987 2 года назад

@@JamesQQuick I understand, it's oukay brother; just do justice on this one; this is already huge.

@JamesQQuick 2 года назад

Part 2 has been published! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YqIyET7XKIQ.html

@jeffmchale5826 2 года назад

This was an amazing video! I would very much be interested in a part 2 that communicates with a DB and includes authentication.

@JamesQQuick 2 года назад

Part 2 has been published! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YqIyET7XKIQ.html

@michongoma7598 2 года назад

Part 2 please!

@JamesQQuick 2 года назад

Part 2 has been published! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YqIyET7XKIQ.html

@ronaldvanmeurs8039 2 года назад

For sure a part two as well, keep up the great work!

@JamesQQuick 2 года назад

Part 2 has been published! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YqIyET7XKIQ.html

@alexdewergifosse6177 2 года назад

Def keen for part 2!

@JamesQQuick 2 года назад

Part 2 has been published! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YqIyET7XKIQ.html

@toup0 2 года назад

Nice that you ask if we want to see more typescript 😊 Yes please sir! Typescript + sveltkit wombo combo would be awesome!

@goummoboris5194 2 месяца назад

Hi James. Lovely 3 years old tutorial. Coming back to the togglemethod in our store. Is there a way to pass in directly the todo object and mutate its selscted attribute directly ? Hoping that we donot traverse through the whole store.

@alex_oceann 2 года назад

Thank you for the great videos! They're super helpful. Would you be interested in doing a Part 3 where you show how to integrate SvelteKit with the URQL GraphQL client, then use Capacitor to turn it into a native mobile app? Thank you!

@TannerBarcelos Год назад

Man Svelte / Sveltekit is so awesome. I think React/Next and Svelte/Sveltekit + TS and Tailwind in my frontend toolbox is going to be so valuable.

@tahaahmedkhan598 2 года назад

please Make a complete sevelte playlist with backend connectivity it gives a lot of help !

@thewiscokid81 2 года назад

Yes please do the second part

@JamesQQuick 2 года назад

Part 2 has been published! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YqIyET7XKIQ.html

@danielrodas7692 2 года назад

For anyone getting this error message: Cannot read properties of undefined (reading 'config') Create a new file called tailwind.config.cjs file under your root dir and add the following: // tailwind.config.cjs module.exports = { purge: ['./src/**/*.svelte', './src/**/*.css'], darkMode: false, theme: {}, variants: { extend: {}, }, plugins: [], }

@cristiancassetta 2 года назад

Great! Thanks a lot, it works now.

@stankyfiles 2 года назад

bless you man sheeeeesh, thought id get stuck 7mins into the video!

@hamzaha4506 2 года назад

thanks bro

@Warpgatez 2 года назад

Interesting introduction to svelte for me. Seems pretty easy. You seem knowledgeable. Just slow down. Lots of tiny technical mistakes due to rushing. I’m going to check your channel out but good job!

@muhammadyasser1987 2 года назад

We want part 2. Thanks James!

@JamesQQuick 2 года назад

Coming soon!

@JamesQQuick 2 года назад

Part 2 has been published! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YqIyET7XKIQ.html

@timewolf5510 2 года назад

Awesome, thank you James!

@vaniad555 2 года назад

Thank you for the quick tut, awesome job, hopefully, we see part 2 ...

@JamesQQuick 2 года назад

Part 2 has been published! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YqIyET7XKIQ.html

@nickreutlinger 2 года назад

Great tutorial, pleaseeee do a Part 2 with Firebase!

@JamesQQuick 2 года назад

Part 2 has been published! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YqIyET7XKIQ.html

@nickreutlinger 2 года назад

@@JamesQQuick Supabase is even better :)

@HaakonHestness 2 года назад

Cool tutorial, yet when I add the postcss.config.cjs file it throws an error. I've tried several times but keep getting - TypeError: Cannot read properties of undefined (reading 'config') at getTailwindConfig

@ChakritTansakul 2 года назад

add tailwind.config.cjs at the root directory //tailwind.config.cjs module.exports = { content: ["./src/**/*.{html,js,svelte}"], theme: { extend: {}, }, plugins: [], } solved for me.

@vipinjose5552 2 года назад

@@ChakritTansakul Thanks. This helped me to get it working

@streamingdev1163 2 года назад

@@vipinjose5552 Great suggestion this worked for me too

@mwnkt 2 года назад

Svelte is always amazing, would really like it if you could do more svelte videos. could you also do a video on deploying a sveltekit app to vercel or netlify I've been getting build errors.

@JamesQQuick 2 года назад

Part 2 has been published! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YqIyET7XKIQ.html

@galaxiegalaxie5003 2 года назад

Thank you, could you do the video on jwt, how to secure it, save it from vulnerability, whats the best practices and recommendation.Also please do the videos about dashboard after login where content will be loaded dynamically with click on nav.Also how do we secure page or route.

@denniszenanywhere 2 года назад

Would love it if you do more videos with database. Something with complex designs would also be great.

@JamesQQuick 2 года назад

Part 2 has been published! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YqIyET7XKIQ.html

@raymondmichael4987 2 года назад

I think RU-vid's like button is broken, it only respond once though I clicked many times 😌😌 Thanks man this is much better, waiting for the second part

@kvetoslavnovak423 2 года назад

The part 2 would be great!!!

@JamesQQuick 2 года назад

Part 2 has been published! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YqIyET7XKIQ.html

@dongums 2 года назад

that class technique using template literal was awesome. i use class directive from svelte docs. but i think using template literal has it advantages. specially together with tailwind

@jornesaenen 2 года назад

very excited for sveltekit, please do part 2

@JamesQQuick 2 года назад

Coming next week! :)

@JamesQQuick 2 года назад

Part 2 has been published! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YqIyET7XKIQ.html

@PeterMumford Год назад

nice work James

@JamesQQuick Год назад

Thank you!!

@abeechr 2 года назад

Yes, please make one with the backend.

@JamesQQuick 2 года назад

Part 2 has been published! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YqIyET7XKIQ.html

@yoshi661 Год назад

thankyou for quick guide

@Mavesound 2 года назад

I've had a lot of struggles with sveltekit & their transitions between pages, not sure if i'm 100% fan of it

@jaymartinez311 2 года назад

Great video and typescript for sure 😉 💪🏾

@piccolorio 2 года назад

This is great! Please do the second part with db and auth when you can.

@JamesQQuick 2 года назад

Part 2 has been published! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YqIyET7XKIQ.html

@maxkirwin1474 2 года назад

Part 2 would be insane ! Firebase or maybe supabase ?

@JamesQQuick 2 года назад

Part 2 has been published! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YqIyET7XKIQ.html

@dand4485 2 года назад

Would be interesting to see if/when you do the persistent store, how about doing a 2fer, meaning you use TypeScript. Even better take the current version, and retrofit both the date store and Typescript. Thanks.

@JamesQQuick 2 года назад

Part 2 has been published! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YqIyET7XKIQ.html

@msitman 2 года назад

Part 2 please :)

@JamesQQuick 2 года назад

Part 2 has been published! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YqIyET7XKIQ.html

@gilatron1241 2 года назад

What extension is changing how arrow functions and != look? It looks really nice

@sulemanmughal5397 2 года назад

Sir plz part 2 😃

@tommyeliassen4539 2 года назад

Yes to part two! :)

@JamesQQuick 2 года назад

Part 2 has been published! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YqIyET7XKIQ.html

@makexdix5962 2 года назад

I am interested for part 2.

@JamesQQuick 2 года назад

Part 2 has been published! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YqIyET7XKIQ.html

@jesper.ordrup 2 года назад

Hi James. Keep up the svelting 😀🤙 Check svelte for direct support for conditional class assignments. Also, the moment you find that you repeat a styling then create a component. Buttons etc .. Would love to see Auth example.

@JamesQQuick 2 года назад

Part 2 has been published! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YqIyET7XKIQ.html

@user-wi3id2si8g 2 года назад

Great video. I assume so much inline styling is due to "just a demo", but since i new to svelte and some tutorials saying that svelte convert all styles to its own format (adding svelte prefixes) i was wondering if it is possible/how easy is to fully separate svelte app from css (use classes and ids in svelte component and external css for styling)?

@mehrannaghizadeh5033 2 года назад

It twas a very clear explanation. Good job. Would you also do the typescript version, please? Thanks

@JamesQQuick 2 года назад

Yes, I need to do more TypeScript stuff!!

@PabloArceo-synclab 2 года назад

Yes to dB part 2. 🙏🏼

@JamesQQuick 2 года назад

Part 2 has been published! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YqIyET7XKIQ.html

@PabloArceo-synclab 2 года назад

@@JamesQQuick thanks james!

@MrMikeyberger 2 года назад

yes very interested

@JamesQQuick 2 года назад

Part 2 has been published! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YqIyET7XKIQ.html

@michaelrandazzo1957 Год назад

I got stuck almost immediately. My import won't recognize my css file. I tried moving it to the source folder, changing out the '@tailwind' with some plain css to modify the paragraph. This can be so frustrating sometimes.

@aingarant 2 года назад

In your opinion is SvelteKit production ready?

@scott_itall8638 Год назад

What do you use for screen capture?

@douglashoffmann4661 2 года назад

Hey, really nice video! I hope you could get a little deeper into svelte kit doing something that uses database and handle searchQuery and such. The docs about page load are not that good.

@JamesQQuick 2 года назад

Part 2 has been published! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YqIyET7XKIQ.html

@irlshrek 2 года назад

I fucking love svelte and sveltekit

@bobdobbs8397 2 года назад

Please do the database tutorial you mentioned. I finished a few Udemy courses and trying to learn Sveltekit. Can't find anything to do with interacting with database tho. Great channel.

@JamesQQuick 2 года назад

Will do. My podcast cohost are working on a new course for next year. You can sign up at everythingsvelte.com

@JamesQQuick 2 года назад

Part 2 has been published! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YqIyET7XKIQ.html

@bobdobbs8397 2 года назад

@@JamesQQuick Looking forward to it, glad to see you went with Supabase as well.

@michaels8398 2 года назад

Would love a part 2 with mongodb and auth0

@b0gie 2 года назад

yay

@haguerrerob 2 года назад

Hi James. I am trying to change the favicon that comes by default with svelteKit but I have not been able to do it, I have tried several methods and none have worked. in theory, the favicon image is located in /static. and is called from the html with: I change the image of the static folder but it does not modify the output. do you have any method to do it? thank you

@Antonio-fo4fl 2 года назад

Please do the second tutorial.

@JamesQQuick 2 года назад

Part 2 has been published! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YqIyET7XKIQ.html

@Antonio-fo4fl 2 года назад

@@JamesQQuick YOU LEGEND!!

@Booyamakashi 2 года назад

Im trying to use Sveltekit as SSG, but no luck yet. I cannot deploy any server-side code, i want to have bunch of html pages that i can host on AWS S3 - is this something you could cover?

@lovaion 2 года назад

I would love if you could do a tutorial based on svelte kit and firebase auth with creating and getting documents

@JamesQQuick 2 года назад

Part 2 has been published with Supabase! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YqIyET7XKIQ.html

@wilfried2701 2 года назад

Anyone knows what color theme he's using ?

@popey4525 2 года назад

Tailwind config not working for me, I got a SSR error : "Error when evaluating SSR module /src/routes/__layout.svelte", and then it written "Cannot read property 'config' of undefined". I can't find a good solution on internet, anyone has an idea of how to fix it ?

@jsnow301 2 года назад

have to make the config file first, skip a minute into the video

@MACAproject 2 года назад

what version of nodejs are you using?

@marcokohn5762 2 года назад

James, could you link the video with this nice intellisense feature in the console? Thanks.

@jedliu8671 Год назад

This will help. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-SyOnB1qvPn0.html

@devcoder6326 Год назад

Amazing!

@aashrith9680 2 года назад

Interested in part2 for learning auth and db

@JamesQQuick 2 года назад

Part 2 has been published! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YqIyET7XKIQ.html

@nathanielcameron8006 2 года назад

AYO SUH MY DOOOD

@thegreatprogrammer5937 2 года назад

12:50 No Its not by default. By default it is

@muhammadyasser1987 2 года назад

25:11 pun intended?! :D

@subhasishdas6930 2 года назад

need auth, saving to db and pwa features too.

@vincej151 2 года назад

Svelte is great. No question. I love it, but one significant problem - it has no community support to speak of. Vercel is backed by venture capitalists - basically sharks. If things don't give them a rapid return will they stick by Svelte or dump it? Do I dare gamble my customers that it will still be here is 2 years?

@willinton06 2 года назад

Well, since it is so much better than the alternatives it will most probably survive for years to come

@RickGraner 2 года назад

DB plz and perhaps some kinda refresh token auth w/a backend for todos, If you show ppl that, they pretty much can build their own social media app and take on the world ;) Great job!

@computerscience1152 2 года назад

Freaking cool

@GermanLc Год назад

so now how do i deploy it to my server?

@robsonvs 2 года назад

I'm starting learn svelte and I'm straggling with endpoints

@nicholassingh138 2 года назад

Hey can you a udemy course or something like a event pass where people can create and event and only view their users that signed up. Would be great to learn about policies

@tvbreum5325 2 года назад

Nice short introduction.

@JamesQQuick 2 года назад

Thank you!!

@destinlee 2 года назад

But it's Thursday!!

@riigel Год назад

bruh.. whats your vscode theme?

@timsonner 2 года назад

Part 2 with auth0!!!!!!! Por favor.

@JamesQQuick 2 года назад

Part 2 has been published! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YqIyET7XKIQ.html

@mazdaknazemi8268 2 года назад

we are interested :)

@JamesQQuick 2 года назад

Part 2 has been published! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YqIyET7XKIQ.html

@TheROck3052 2 года назад

Sorry that don't works for me. ;)

@evans8245 2 года назад

James, what does the Q in your name mean ?

@NibbyBanana 2 года назад

Quentin

@NibbyBanana 2 года назад

Also, Quality :)

@aaronabuusama 10 месяцев назад

bruh... why is no TS even an option?!?

@JamesQQuick 10 месяцев назад

Lol think it should just be required?

@aaronabuusama 10 месяцев назад

@@JamesQQuick 100% I genuinely do not see a reason why you would build anything without it these days. even of you dont use any types or TS syntax your dx is going to be better. There is an argument to be made if your writing a library but even imho its a no

@user-cn3vk5mc8z 2 года назад

second, pleeeeease

@bradtriplett6629 2 года назад

Nice video, It is really helpful to us traders, investing in crypto is the best and fastest way of making money, but only few understood the secret of crypto currency.