{"id":345672,"date":"2021-08-06T13:32:51","date_gmt":"2021-08-06T20:32:51","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=345672"},"modified":"2021-08-06T14:08:06","modified_gmt":"2021-08-06T21:08:06","slug":"209-a-netflix-clone-with-datastax-astra-and-netlify","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/video-screencasts\/209-a-netflix-clone-with-datastax-astra-and-netlify\/","title":{"rendered":"#209: A Netflix Clone with DataStax Astra and Netlify"},"content":{"rendered":"\n<p>I paired up with <a href=\"https:\/\/twitter.com\/sonicdmg\" rel=\"noopener\">David Jones-Gilardi<\/a> of DataStax to go through <a href=\"https:\/\/github.com\/datastaxdevs\/appdev-week3-graphql\" rel=\"noopener\">one of the workshops<\/a> they have put together (with <a href=\"https:\/\/www.youtube.com\/channel\/UC5DNytAJ6_FISueUfzZCVsw\" rel=\"noopener\">Ania Kub\u00f3w<\/a>, who has  <a href=\"https:\/\/www.youtube.com\/watch?v=g8COh40v2jU\" rel=\"noopener\">a video<\/a> you should watch as well) that does a good job of showcasing how nicely <a href=\"https:\/\/www.datastax.com\/products\/datastax-astra\" rel=\"noopener\">DataStax Astra<\/a> pairs up with the Jamstack approach. Here&#8217;s the gist:<\/p>\n\n\n\n<ul><li>DataStax Astra is hosted <a href=\"https:\/\/cassandra.apache.org\/_\/index.html\" rel=\"noopener\">Apache Cassandra<\/a>, a powerful database technology used by most of the biggest players on the web. Astra makes it wildly easy to work with, hosting it, give you a nice dashboard for managing things, a GraphQL playground for it, serverless APIs, and more. We spin up a database cluster exactly as you would in this video, and see it right through GraphQL mutations in the playground (at first), and then through a <code>.csv<\/code> upload in the dashboard later.<\/li><li>Pairing those APIs with cloud functions is a natural fit, meaning you can access your data on an otherwise static site easily. Netlify makes it easy to <a href=\"https:\/\/www.netlify.com\/products\/functions\/\" rel=\"noopener\">create and deploy cloud functions<\/a>. <\/li><li>The front end of the site is a basic React setup: components that run queries to fetch data and build themselves based on that data. The data fetching here happens through the cloud functions.<\/li><\/ul>\n\n\n\n<p>It&#8217;s pretty satisfying to watch all this come together! I&#8217;ve been saying for years that front-end development is getting amazingly powerful (see: <a href=\"https:\/\/css-tricks.com\/the-all-powerful-front-end-developer\/\">&#8220;The All-Powerful Front-End Developer&#8221;<\/a> and <a href=\"https:\/\/css-tricks.com\/ooooops-i-guess-were-full-stack-developers-now\/\">&#8220;ooooops I guess we\u2019re* full-stack developers now&#8221;<\/a>) and this feels like that is coming to fruition in ways even beyond what I was imagining. <\/p>\n\n\n\n<p>I like how there is a see-saw-like effect with this. As we see in this video, we&#8217;re able not only to fetch our own data and craft our own queries, but we don&#8217;t even do any back-end development at all. We spin up and deal with the entire database and APIs ourselves, as JavaScript-focused front-end developers. That&#8217;s a hell of a lot more responsibility (one side of the see-saw went up), which we&#8217;re able to do partially because some other things got a lot easier (the other side of the see-saw went down).<\/p>\n\n\n\n<p>Those easier things: making and managing databases, deployment CI\/CD for free, easy creation and deployment of cloud functions, infinite scalability with zero work, CDN-backed hosting with zero work, SSL with zero work, etc. All those things took much more time and effort before, and now we can re-focus that time and effort on other things.<\/p>\n\n\n\n<p>Heck, in this video, David doesn&#8217;t even use <em>any<\/em> local software other than a web browser. All code editing was done in <a href=\"https:\/\/www.gitpod.io\/\" rel=\"noopener\">Gitpod<\/a>, which spins up a VS Code instance for you right in the browser, with a fully functioning terminal included, where he uses the <a href=\"https:\/\/www.netlify.com\/products\/dev\/\" rel=\"noopener\">Netlify Dev<\/a> CLI to do some fancy stuff.<\/p>\n\n\n\n<div class=\"wp-block-group ticss-2933b412\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"is-style-default\">Ready to check out Astra for yourself? Use code <code>CSSTRICKS200<\/code> for $200 of Astra credits when signing up!<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\" href=\"https:\/\/astra.dev\/csstricks\" rel=\"noopener\">Get started<\/a><\/div>\n<\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>I paired up with David Jones-Gilardi of DataStax to go through one of the workshops they have put together (with Ania Kub\u00f3w, who has a video you should watch as well) that does a good job of showcasing how nicely DataStax Astra pairs up with the Jamstack approach. Here&#8217;s the gist: DataStax Astra is hosted [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":345681,"parent":1283,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"video-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"Video: A Netflix Clone with DataStax Astra and Netlify","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":18494,"url":"https:\/\/css-tricks.com\/lodge\/v10\/079-moving-the-live-database-local\/","url_meta":{"origin":345672,"position":0},"title":"#079: Moving the Live Database Local","date":"September 24, 2012","format":false,"excerpt":"As we get started working in WordPress it will be best if we snag an exact copy of the live database to work with locally. Some websites have things like phpMyAdmin installed which provide a GUI for things like exporting a database, but the CSS-Tricks database is just too big\u2026","rel":"","context":"With 8 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":8482,"url":"https:\/\/css-tricks.com\/snippets\/wordpress\/custom-database-error-page\/","url_meta":{"origin":345672,"position":1},"title":"Custom Database Error Page","date":"February 9, 2011","format":false,"excerpt":"Put a file called \"db-error.php\" directly inside your \/wp-content\/ folder and WordPress will automatically use that when there is a database connection problem. Database Error You got problems.","rel":"","context":"With 3 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":5809,"url":"https:\/\/css-tricks.com\/snippets\/php\/sanitize-database-inputs\/","url_meta":{"origin":345672,"position":2},"title":"Sanitize Database Inputs","date":"March 3, 2010","format":false,"excerpt":"1) Function for stripping out malicious bits 2) Sanitization function Uses the function above, as well as adds slashes as to not screw up database functions. Usage","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":7767,"url":"https:\/\/css-tricks.com\/snippets\/wordpress\/reset-admin-password-through-database\/","url_meta":{"origin":345672,"position":3},"title":"Reset Admin Password Through Database","date":"October 30, 2010","format":false,"excerpt":"You'll need to be able to run SQL on that database, like for example, through phpMyAdmin. UPDATE `wp_users` SET `user_pass` = MD5( 'new_password_here' ) WHERE `wp_users`.`user_login` = \"admin_username\";","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3510,"url":"https:\/\/css-tricks.com\/snippets\/php\/mysql-database-access-class\/","url_meta":{"origin":345672,"position":4},"title":"MySQL Database Access Class","date":"August 22, 2009","format":false,"excerpt":"","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18500,"url":"https:\/\/css-tricks.com\/lodge\/v10\/80-updating-local-content-by-running-the-sql\/","url_meta":{"origin":345672,"position":5},"title":"#80: Updating Local Content by Running the SQL","date":"September 25, 2012","format":false,"excerpt":"We have an .sql file now thanks to exporting it and downloading it as we did in the last video. Now we just need to run it and overwrite our currently existing local database. This local database already exists because we've long been running CSS-Tricks locally through MAMP (one of\u2026","rel":"","context":"With 1 comment","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/345672"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=345672"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/345672\/revisions"}],"predecessor-version":[{"id":346285,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/345672\/revisions\/346285"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/345681"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=345672"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=345672"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}