2:17 It is possible to add tailwind as run command 'npm run qwik add' then select 'Integration: Tailwind (styling)'. Then answer to question 'Ready to apply the tailwind updates to your app?. Select Yes looks good, finish update!'
Good speed run, could probably polish the context state though. Usually I write the cart logic in a separate lib file, like /src/store/cart.ts and there i define the context name, a createCartContext which i call in the layout or root, and a useCart hook which wraps the useContext. Inside createCartContext I'd add a test for the browser like `if (document !== undefined) { loadFromLocalStorage... }` so the context is initialized with the local store initially. Inside the actual context object I store some variables like `items` which contains the array of items in the cart but then I add some extra methods to it in the useCart hook,like `addToCart` and `removeFromCart`. This would look like: export const _addToCart = (state, item) => { state.items = [...state.items, item] // write to localStorage } export const useCart = () => { const state = useContext(CART_CTX) return { state, addToCart: $((item: CartItem) => _addToCart(state, item)), removeFromCart: $((item: CartItem) => _removeFromCart(state, item)), } } Note that in Qwik you need to wrap those with the $ wrapper.
@@Smoljames brother. Mixing state management and page changes and keeping it all together.nice. Why couldn't mix authentication as well like login and logout.
I've solved the issue with passing functions to another component (it's in the video around 53:00 - 54:00) with utilizing $() function. So for example if you want to pass function "goodbye" to another component, you can do it this way: // dont forget to import it import { $ } from ... const goodbye$ = $(() => alert('Good Bye!')); And so for the modal closing you can use just this: const onModalClose$ = $(() => { store.modal = false; }); {store.modal && } And then in the modal component you can use it as: const { onModalClose$ } = props; More info cound be found at quick tutorial around "passing closures".
Your tailwindcss.config.js was red through out the whole vide. This means when you actually push your site to production or containerize your app, it will fail because your linter in your CI doesn't acknowledge the file (You didn't configure your app correctly). Other than that, great informative video. Thank's.
Hey mate, thanks for the great tutorial. However, I’m not too excited about storing on onClick and retrieving on the product page from localStorage. In a real life scenario, would you have passed the ID as a param in the url? I guess my question is, does Qwik allow you to keep thinking in a “React/Next + whatever backend” way, or is it any kind of paradigm shift going on here? Sorry, I’m new to Qwik. I should probably finish the tutorial before asking this 😅
Great point :) in a real life scenario I would be using some form of backend or even a CMS system like Stripe which would mean that I could just fetch the product data instead of saving it to local storage. So yea that was definitely just done for the sake of simplicity but IRL I would definitely recommend using the product ID in the URL and maybe making a fetch request to the backend/CMS system for the product data. Hope that helps and let me know if you have any further questions
Hey :) Happy to provide you assistance with your code - I typically answer coding related questions inside of my Discord channel. Make a post there and I'll see what I can do
Most likely you need to ensure that you're using the correct cdn link and that is properly copied into the head tags of the document. If that doesn't work feel free to post code pic into discord server linked in bio and I can respond there :)
While quite enjoyable to watch, the author presents bad practices for writing applications in reactive frameworks like qwik, react. These frameworks are why they have their reactive state storage solutions, not to do it in localStorage.
Hi, here's a challenge for you, I'm 100% sure this will make you blow up on TH-cam, make a Facebook clone using qwik, WhatsApp clone using qwik, Amazon clone using qwik, crm build using qwik... I'll subscribe and wait.
2:17 It is possible to add tailwind as run command 'npm run qwik add' then select 'Integration: Tailwind (styling)'. Then answer to question 'Ready to apply the tailwind updates to your app?. Select Yes looks good, finish update!'
If it works then I don't see why that's not an acceptable alternative :)
Good speed run, could probably polish the context state though. Usually I write the cart logic in a separate lib file, like /src/store/cart.ts and there i define the context name, a createCartContext which i call in the layout or root, and a useCart hook which wraps the useContext.
Inside createCartContext I'd add a test for the browser like `if (document !== undefined) { loadFromLocalStorage... }` so the context is initialized with the local store initially.
Inside the actual context object I store some variables like `items` which contains the array of items in the cart but then I add some extra methods to it in the useCart hook,like `addToCart` and `removeFromCart`.
This would look like:
export const _addToCart = (state, item) => {
state.items = [...state.items, item]
// write to localStorage
}
export const useCart = () => {
const state = useContext(CART_CTX)
return {
state,
addToCart: $((item: CartItem) => _addToCart(state, item)),
removeFromCart: $((item: CartItem) => _removeFromCart(state, item)),
}
}
Note that in Qwik you need to wrap those with the $ wrapper.
An excellent point, I definitely agree :) thanks for the feedback
Thank you! I will give it a go and see how it goes for me
Bro. That is an amazing tutorial. Wow. So much in a single video.
Glad you enjoyed it my friend :)
@@Smoljames brother. Mixing state management and page changes and keeping it all together.nice. Why couldn't mix authentication as well like login and logout.
I've solved the issue with passing functions to another component (it's in the video around 53:00 - 54:00) with utilizing $() function.
So for example if you want to pass function "goodbye" to another component, you can do it this way:
// dont forget to import it import { $ } from ...
const goodbye$ = $(() => alert('Good Bye!'));
And so for the modal closing you can use just this:
const onModalClose$ = $(() => {
store.modal = false;
});
{store.modal && }
And then in the modal component you can use it as:
const { onModalClose$ } = props;
More info cound be found at quick tutorial around "passing closures".
Great solution my friend
Excellent tutorial, you earned my sub!
glad you enjoyed it :)
Good job👍
Thank you for sharing your expertise with us!🎉
Your tailwindcss.config.js was red through out the whole vide. This means when you actually push your site to production or containerize your app, it will fail because your linter in your CI doesn't acknowledge the file (You didn't configure your app correctly). Other than that, great informative video. Thank's.
Thanks for the feedback :) always appreciated. Glad you enjoyed the video otherwise
please post more on qwik
Yessir!
What theme for VS code are you using>?
Part 2 please (:
Yessir I'll make it happen
Hey mate, thanks for the great tutorial. However, I’m not too excited about storing on onClick and retrieving on the product page from localStorage. In a real life scenario, would you have passed the ID as a param in the url? I guess my question is, does Qwik allow you to keep thinking in a “React/Next + whatever backend” way, or is it any kind of paradigm shift going on here? Sorry, I’m new to Qwik. I should probably finish the tutorial before asking this 😅
Great point :) in a real life scenario I would be using some form of backend or even a CMS system like Stripe which would mean that I could just fetch the product data instead of saving it to local storage. So yea that was definitely just done for the sake of simplicity but IRL I would definitely recommend using the product ID in the URL and maybe making a fetch request to the backend/CMS system for the product data. Hope that helps and let me know if you have any further questions
Hey mate, thanks for the vid love it but got a slight prob can you help me? So the prob is the tailwind css doesn't apply is there a fix for that???
Hey :) Happy to provide you assistance with your code - I typically answer coding related questions inside of my Discord channel. Make a post there and I'll see what I can do
The only problem with qwik is that you can't export in SSR expressjs and put the dist in another directory.
For some reason the fontawesome icons are not displaying 🤔
Most likely you need to ensure that you're using the correct cdn link and that is properly copied into the head tags of the document. If that doesn't work feel free to post code pic into discord server linked in bio and I can respond there :)
No one is saying where to host these apps... Can someone please please deploy?....
Netlify for frontend apps & Render for backend! They're relatively straight forward to deploy on and have good guides for each
legit.
Your IDE screen is too small
Qwik*
true that
I’mconcerned why this app would take one hour lol. It’s just a page with a route and cart.
for the sake of education :) I feel it's more important to explain each step well than finish the app quickly
While quite enjoyable to watch, the author presents bad practices for writing applications in reactive frameworks like qwik, react. These frameworks are why they have their reactive state storage solutions, not to do it in localStorage.
Hi, here's a challenge for you, I'm 100% sure this will make you blow up on TH-cam, make a Facebook clone using qwik, WhatsApp clone using qwik, Amazon clone using qwik, crm build using qwik... I'll subscribe and wait.
Haha always down for a challenge :)