Build a Full-Stack Filtering System with Next.js 14, Tailwind, Upstash (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

Hope you enjoyed the video!

[nidhi]

Damn you are literally serving us man. Appreciate you alot josh.

[BeyondLegendary]

Impressive, very nice. Let's see Paul Allen's full-stack filtering system.

[carvierdotdev]

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.

[-not-found-service]

wow, thank you, I was waiting for your next project on this channel, a hug!

[emilzonjeronimo]

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.

[mistersir]

Thanks man! I would've love to see those time stamps though

[mohdali-yqgq]

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.

[Peshak]

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....

[igorcastilhos]

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 😅)

[cadserg]

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.

[NazimLeulmi]

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

[johnchristiancabrera]

I just noticed that this was a different account! Subbed! 😁

[gabrielpaor]

I've learned a lot from this tutorial. Thanks for making this helpful content for the future developers like me.

[MolecularDev]

you've just earned a new subscriber that will watch your every video(just nextJs :>) keep it up bro!

[bbrainttech]

You are really good at what you do, i love your videos so much....😊

[uminhtetoo]

Thank you so much for sharing your experience and knowledge, Sir.

[nxthing______]

Thank you, great explanation! Hope with the new knowledges from your videos I will find a new job in the nearest future😅

[gamingwolf]

I was having problem with this, thank you a lot josh

[wonganitembo]

Thanks for the awesome content josh. Please create a video on kafka.

[me-ynmn]

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