Build a Full-Stack Filtering System with Next.js 14, Tailwind, Upstash (2024)
HTML-код
- Опубликовано: 28 сен 2024
- In this single video, we're building a full-stack filtering system even allowing custom inputs using Next and Tailwind. This is a dope project to get a feel for some great web dev fundamentals like react query and schema validation and build something cool along the way.
--- Links
Project on GitHub: github.com/jos...
Upstash Vector: console.upstas...
Hope you enjoyed the video!
![Yailin La Mas Viral, @kreizyk.official - Dale 2 (Remix) [Video Oficial]](http://i.ytimg.com/vi/JaYHBzgqz94/mqdefault.jpg)
Thanks a lot! It's great to see that your new role at Upstash is benefiting both you and us. Your in-depth videos really showcase how it works and the advantages it brings.
Impressive, very nice. Let's see Paul Allen's full-stack filtering system.
dude hahaha nice to see you here, appreciate ya a ton
wow, thank you, I was waiting for your next project on this channel, a hug!
Thank you very much. I just received a task today to make a product filter. I'm sure your decision will help me a lot.
You are really good at what you do, i love your videos so much....😊
I'm very confused/curious why you would use a vector database? are the costs the same as a SQL? future proofing for AI?
Thanks for the awesome content josh. Please create a video on kafka.
Your tutorials are really good, you explain all that's necessary, but with a more popular DB or ORM it would be much better
thank you josh it was really helpful
superb bro !!
Is there a special reason why you don't use 'bun'? why do you use yarn pnpm or npm npx etc?
is this video about TypeScript or about product filters? 2 hours 40 minutes - TypeScript , 10 minutes - product filters.
is there any alternative to tailwind family in next.js? i really dont wanna see lengthy classnames
i have a problem npm didn't have a command called seed i am having thouble in it
Josh please ,teach us how to deploy our website also
will be very greatful to you
Josh, but lucide-react already got installed with shad-cn?
Yes my friend
maybe make this as a fullstack ecommerce app josh
Wow great🎉🎉
why you use REACT Query with nextjs SWR should use ? no or i m worng please correct me
both are good, its mostly personal preference
10:27 No no that must be pnpm dlx .....
I feel we lost all the benefits of nextjs server components @ "use client" on top of the whole file, we could separate out the client components.
1:09:20 Better to turn on slow 3G throttling.
it's have infinite scroll or pagination?
Thaaaaanks ❤
40:14 Was facing error while running seed script, was using npm, figured out my mistake. yarn -> npm.
"script": {"seed": "tsx .src/db/seed.ts"}
In CLI run: npm run seed
we want upstansh course from begginers to advanced
why i don't find the old videos o the channel ?
Because this is new channel
this is my second channel :3
Nice
you video is 3 hourse but no timestamps
Damn you are literally serving us man. Appreciate you alot josh.
appreciate you too man, cheers
I don't got it, why everything is 'use client'
Isn't this solution bad for SEO?
I don't know
Thanks for this content! It would be interesting that filters and sorting preferences are saved in the route with query params and to use the hook useSearchParams, not to use the hook useState and to make the component SSR and if the user shared the url with someone else, the filters and sorting are maintained.
ByteGrad has an awesome video about that.
@youneshenni5417, please, how can I get it, please
Thanks man! I would've love to see those time stamps though
@josh could you let us know when deploying this to vercel ,how could we take care of api route as in this post request route is for local host
I dont know whether its making a filter that is not easy or maybe I am The one or maybe its the tutorial
how about server side filtering , we need to handle that on SEO
This is really one of the best tutorial I have seen and please take this to more net level by incorporating the following things like of use drizzle ORM, PostgreSQL and make the product component with more fields and this will be really more and more batter and comprehensive.
I wanted to like multiple times. sadly yt only allows once.
I don't know any backend Can I follow this tutorial?
Not synced with url :/
I just noticed that this was a different account! Subbed! 😁
Appreciate for this...
wth is upstash is it redis ? how can i learn it pls suggest something
yes the same here!!. thanks in advance..
Awesome video...here I am scratching my head how come I did not subscribe to your channel; but hold on, I am sure I subscribed before, and then puzzled how come this channel only has 5k subscribers; then realized this is not your original channel. Subscribed again. Love your content....
How do you stand towards Angular actually? I've noticed that especially in Germany most big corpates which pay very good are using Angular and after trying it, I actually really like it. I think OOP brings a lot of structure and stability into the code base, what are your thoughts on that?
Grüße aus Deutschland
Great video! Learning a lot and will definetly use it in my next projects for the org and for my side projects (26:55 just saving my time, around 3:50am around here 😅)
bro, you can open 2 terminal in your vs code. One for running server and one for installing any package. its very simple and can make you more than faster to developing you apps
NiceTutorial....👍
Thank you It was a pleasure watching you handle these problems. adding the filters to the tan-stack useQuery ( queryKey ) will automatically refetch and cache these requests
Thank you, great explanation! Hope with the new knowledges from your videos I will find a new job in the nearest future😅
Geeat video as always josh! Could you create a video showing how you come up with those tailwind style? Like the process you think about the design to tailwind classes. Thanks
Please! You're the one that explain the code and make it clearly for me. But please, can you make a tuto about zod react hook form and prisma?
I mean, how to put the data of a form or a blog for example in a database with prisma.
you've just earned a new subscriber that will watch your every video(just nextJs :>) keep it up bro!
I've learned a lot from this tutorial. Thanks for making this helpful content for the future developers like me.
Even though I activate the subtitles, the subtitles do not appear. Does anyone know why?
Amazing project Josh! Tks to share.
Awesome content Josh, a quick one. Lets say you are using npm how do we seed data to Upstash?
please show us the deployment part also,please please
does anyone know why we use reactnode?
Thank you so much bro
Why don't you use trpc?
great video
Thank you so much for sharing your experience and knowledge, Sir.
Wonderful explanation of filtering.
is this ssr
Thanks Josh
28:26 Taking A Break
I dont know whether its making a filter that is not easy or maybe I am The one or maybe its the tutorial
Taking one at 35:10
I was having problem with this , thank you a lot josh
wat problem brother let me know