Let's build Netflix with Bricks and OxyProps (TMDB API, custom made repeaters, render data from PHP)
HTML-код
- Опубликовано: 6 июн 2024
- In this video, we are building together the Netflix app in WordPress using Bricks builder and OxyProps. All movies data is pulled from the TMDB API.
Doing so, we learn :
- How to use vanilla Javascript to add / remove a class to an element based on scroll position.
- How to use data from custom PHP functions in Brick dynamic data.
- How to fetch data from an external API and how to format it to be used in Bricks.
- How to create a custom repeater with a code element to loop through our external data.
This will be a lot of fun !
🎉 Get OxyProps while it is on LTD !
OxyProps: oxyprops.com
🔗 Links
Github Repo: github.com/OxyProps/netflix-b...
TMDB: www.themoviedb.org/
⌚ Timestamps
00:00 - Introduction
02:30 - Getting started
03:50 - Create the header template
16:47 - The Hero section. Creating the structure.
27:40 - The TMDB API.
30:53 - Custom PHP functions for Bricks.
36:00 - Interacting with the API
1:10:25 - Populating the Hero Section
1:19:50 - Creating custom repeaters
1:38:50 - Final review
#CSSFramework #bricksbuilder #OxyProps
___
Come hang out with other OxyProps users ans Oxygen lovers in our Facebook Community
💬 / oxyprops
___
My editor:
VS Code - code.visualstudio.com/
My Terminal Enhancements:
OhMyZSH: ohmyz.sh/
Powerlevel10k: github.com/romkatv/powerlevel10k
___
Find OxyProps on the internet :
Facebook: / oxyprops
Twitter: / oxy_props
___
And don't forget that if you can design it with Bricks, you can style it with OxyProps!
Thanks for introducing me to BEM naming conventions. I'll be sure to start using them in my future projects
My pleasure, you can check getbem.com/ for more info.
this is such a great tutorial. really covers so many aspects. thanks for sharing your knowledge
Glad you liked it!
We need this type of tutorials. Very helpful. thanks.
Thanks you Mian Muhammad Hassan. I plan to make more of them.
How to use Bricks to another level. Bravo and thank you!
Thank you Sitect videos. Glad you liked it.
Amazing, please more tutos like this. Maybe focus in marketplaces?
Hi Iservisat. Markeplaces ? You would like a rebuild of Amazon ?
@@OxyProps that would be amazing: amazon, aliexpress, ebay should be a good example
Fantastic tutorial Cédric, thank you so much! I really learned a lot.
I am so glad you found it helpful. Thanks!
Great content as always! That's what we need. Building complex websites with Bricks! Thank you
Thanks Mahmoud. I am happy you like it.
Mind Blown, love it! Thank you for such a greta tutorial and content!
Hello The Skating Choreographer, I am happy you found it useful.
Easy to follow advanced tutorial that even beginners can comprehend. Awesome. Thank you very much!
Hi Michail. Glad you liked it.
What an amazing tutorial. Thank you so much for the time and effort put into this. Would love to see more of these. 🙏
Thanks!
Once again, WOW Walkthrough, Your tutorials are appreciated as top-notch and unique...Keep doing it ^__^
Thank you.
Thanks a lot for your comment Kareem!
Fantastic walkthrough
Thank you Amanda.
Thank you so much for the tutorial!!
My pleasure Oliver!
Well done. Great video! 👏
Thanks Bricksforge!
Great tutorial, thank you very much!
Hello Vy Le Tien. Thanks for you feedback.
Thank you so much, this video was extremely helpful!
Glad you liked it and found it helpful.
Love these more “advanced” type videos!
I do too, but they take so much time to prepare, record and publish...
You are a genius.... wonderfull tutos
Thank You
I am so glad you like it. Thanks.
Incredible video - I learnt a lot of useful things. Esp reg the API calls, that part was interesting
Glad you liked it Grant!
Oh my God. You are great. Thats what I want. Thank you so much. You are really great.
I just included the full structure in the new v1.5 of the plugin !
This was a really great, helpful tutorial, I learned a lot about Bricks, your framework and the Fetch API, thank you! The only thing I noticed negatively is the inefficient JS code for setting and removing the header class, since the query function has to be re-executed on every scroll event.
Bravo!!!
Merci!
So, I've got this mostly working. However I'm seeing a horizontal scrollbar and the category listings aren't styled correctly on firefox (tiny and no scroll)... apart from that, pretty awesome stuff!
Awesome Tutorial! Thank you very much for that! Would you like make a video about your development environment with Valet and the Sh script? And maybe also the deployment? =)
Hello Sebastian,
Sure, a video about my dev environment is on my todo list.
@@OxyProps awesome! looking forward to it! =)
Hi Cédric, great tutorial and showcase how to use oxyprops with bricks, I have one question how did you made movies scrollable? I didn't saw that you wrote some javascript for that, did you got that effect with classes that you put in code element (oxyprops classes ?)
Ho Miloš,
In the video, I use javascript only for changing background on the fixed header.
The movies horizontal scrollers are 100% CSS with OxyProps utility classes. These classes :
- Create the horizontal scrolling container
- Control the scroll snap bahavior for both parent and children.
- Style the scrollbar so it is always hidden.
@@OxyProps thanks for explaining ;)
That's a really great tutorial and show the full potential of Bricks and BricksProps. Could you do a video on how to filter posts (by category or tag) without any other additional plugin? Would love to know how it works.
Yes I will add this to my list.
Great tutorial
I have a couple of questions
since the api docs are changed (think so), I have trouble to find the cretiria responds in the docs.
moreover, I will be happy if you can tell me from where did you took the 550 on 41:03
Can you please provide links to the responds? This is my first time with midb
Thanks
Love the tut. But it would be nice to provide the assets, (and URLs used as your place holders in a txt file) in your repo because not all of us have a Netflix account to pull these assets from the site.
Hi Ken,
Sure, I'll add them to the repo. You don't need a Netflix account. They are pulled either from TMDB, or wikimedia (for the avatar).
@@OxyProps That's what I ended up doing. I guess this would help for people new to Bricks and OxyProps. This way they can focus on the tutorial and not having to stop to find assets. I myself am on day 2 with this tutorial and I just finished the hero buttons.
Great tutorial.
Is it possible to use repeater loop with queries api with bricks elements instead of custom code inside brick's.?
Thanks
Hi Malik,
By default, Bricks query loop supports only querying posts, terms, and users. Using code, we can use data from the api and make WordPress "think" they are posts. Then the query loop would use them. Maybe a plugin already exists that can achieve that. Or we could create one.
But as this involves code, i think it is easier to use code for the repeater also.
@@OxyProps thanks for information. Will try that plugin so I can have full control over design with bricks
Good tutorial! One question: if a lot of users join the website they will do a lot of API requests to the server. Can you do a next video explaining how to fix that saving the request and reusing it?
Hello Pau,
Yes, as the trending or top 10 movies don't change every minute, we could define a frequency to update the information, and request from the API only once per day for example and serve from the saved result the rest of the time.
We could for example create an entry in our WP database to store the result and the date of the last api call. Then with a simple test, decide if we need to refresh with a new API call or serve directly.
I don't promise a video on this topic.
@@OxyProps Thanks for your useful response! Keep up with the good work!!
Great video.
Could you do a tutorial on how to recreate the youtube website & pulling videos from custom posts.
Hi Joe,
Would the idea be to use RUclips API ? Or simply re-create a RUclips like website using 100% WordPress ?
@@OxyProps Hi!
100% wordpress but with the same functionality such as video play on hover & filtering, liking videos & favourites lists.
I am also interested in how to recreate the mobile bar on the bottom.
Hello, how does the scroller works with mouse scroll?
Hello Aleš Sýkora,
It scrolls horizontally. On a touchscreen, a trackpad, or a magic mouse like the one I use, you just have to swipe left and right.
On a PC with a scroll wheel, you scroll the wheel while holding shift key to get a horizontal scrolling.
Bonjour,
J'ai vu que tu avais fais un tutoriel pour une configuration sur oxygen builder de oxyprops, est-ce possible de faire la meme avec bricks ?
Bonjour Alexandre.
La config est très similaire pour Brick et Oxygen. Par contre, le dashboard a évolué depuis cette vidéo, donc j'ai prévu de la refaire.
@@OxyProps merci pour ta réponse c'est gentil, j'ai hâte de découvrir la nouvelle vidéo de présentation, en tout cas tu peux refaire des vidéos comme pour Netflix avec des api c'est génial et ça donne plein d'idées , merci beaucoup !
so basically your saying use this oxyprops BUT installed on a bricks build?
Yes, this is the exact same plugin It just adapts its name based on the installed site builder.
Fantastique = "OxyProps + Bricks"
Hello David. Glad you liked it!
I used "o-overflow-hidden" and "o-line-clamp-3". But it still has 6 lines.
Hi Rising Stars,
Are you using v1.4.9 ? The line clamp classes were not in previous version.
@@OxyProps I have updated to v1.4.9. It works now. thank you...