Tutorials
others / www.youtube.com2022-07-26

Create a Movie Emoji Quiz - Clerk, Fauna, Remix

Want to build this yourself? Check out the full tutorial here: https://clerk.dev/tutorials/build-movie-emoji-quiz-with-remix-fauna-and-clerk Looking for the FQL Snippets ? https://gist.github.com/devchampian/a11f4edb2cf26831a2c0bf369526be40 Tutorial code repo: https://github.com/clerkinc/remix-fauna-tutorial Tutorial live demo: https://remix-fauna-tutorial.clerk.app/ Sign up for a free Clerk account: https://dashboard.clerk.dev/sign-up 00:00 - Introduction 00:18 - Clerk Setup 01:15 - Code Setup 02:49 - Fauna Setup 05:27 - Clerk + Fauna JWT Integration 06:12 - Working Example 07:18 - Outro

others / www.youtube.com2022-06-07

Working with Remix: AWS Amplify Authentication Using Authenticator UI and AppSync Integration

Working with Remix: AWS Amplify Authentication Using Authenticator UI and AppSync Integration #remix #aws #authentication Walkthrough a code sample of integrating AWS Amplify with a Remix Application. We show how to implement complete authentication flows to your application with minimal boilerplate. We then make a database query using the AWS Appsync API to retrieve data. This video does not walkthrough setting up an aws amplify environment, there are plenty of videos cover that already, this just shows how to using remix with that environment Chapters --------------- 00:00 Introduction 01:18 Quick Application Demo 03:28 Changes In Root.jsx 04:29 Changes to Index.jsx, redirecting when not authenticated 05:28 Login.jsx, using AWS Amplify Authenticator Component 06:50 Using a Fetcher to Submit Credential Tokens to Create Session Cookie 07:47 In Session.Server.ts managing the session cookie 08:22 Loading Data Using AppSync API with credentials saved in Session Cookie 10:44 Using Client Side SDK to Get User Information 11:29 Signout using client SDK and clear server session information 12:14 Review Pattern Source Code -------------------- - https://github.com/aaronksaunders/amplify-remix-todos-1 Documentation Links ---------------------------------- Remix Cookie Package - https://remix.run/docs/en/v1/api/remix#cookies AWS Amplify Web Client SDK - https://docs.amplify.aws/cli/start/install/ AWS Amplify Node SDK - https://docs.aws.amazon.com/sdk-for-javascript/v3/developer-guide/getting-started-nodejs.html AWS Amplify UI Components - https://ui.docs.amplify.aws/react/components/authenticator Follow Me ------------------------------------------- twitter - https://twitter.com/aaronksaunders github - https://github.com/aaronksaunders udemy - https://www.udemy.com/user/aaronsaunders gumroad - https://app.gumroad.com/fiwic #remix #remixrun #firebase #googleauth #firebaseauth https://www.clearlyinnovative.com

others / www.youtube.com2022-06-01

Remix Firebase Email & Google Authentication

Remix Firebase Email & Google Authentication #remix #firebase #authentication First attempt at integrating firebase with Remix for authentication. I used a combination of Server Token Validation and the client-side API's for authentication. - firebase auth remix run ************************************************************************* See this video for an updated approach using Remix Cookie Package - https://youtu.be/8GdYy9PWncI ************************************************************************* Let me know what you think of this approach, it is still a work in progress as I get a better understanding of the "Remix Way" of doing things. 00:00 - Intro 00:54 - Technical Approach 02:28 - Start Code Walkthrough Source Code -------------------- - https://github.com/aaronksaunders/remix-firebase-sample-app Documentation Links ---------------------------------- Firebase Client SDK - https://firebase.google.com/docs/auth/web/manage-users Firebase Admin SDK - https://firebase.google.com/docs/auth/admin/manage-cookies Follow Me ------------------------------------------- twitter - https://twitter.com/aaronksaunders github - https://github.com/aaronksaunders udemy - https://www.udemy.com/user/aaronsaunders gumroad - https://app.gumroad.com/fiwic #remix #remixrun #firebase #googleauth #firebaseauth https://www.clearlyinnovative.com

others / jonmeyers.io2022-05-27

Create an isomorphic Supabase client in Remix with Environment Variables

Environment Variables are a way to make values globally available within the environment our code is running in - either the client’s browser or on the web server hosting our app. Environment variables are often used to store secrets - such as an API key. In this article, we look at how to make our secret values available on the server β€” loaders and actions in Remix β€” and how to expose public values β€” such as our Supabase url and anon key β€” to the browser.

others / egghead.io2022-05-25

Learn Remix by Building a Social Media Platform with TypeScript and Prisma

Remix takes a more traditional approach to web development, it embraces the Client/Server model and by doing so unlocks the web platform in ways you might not be used to. You'll find yourself not reaching for global state management as much (try not to when you first start out!) because you have access to what's on the server readily available to you anywhere in your application, database and all. In addition to state management adjustments, you'll also find yourself using actual platform API like Forms and the Web Fetch API. Along with Remix, Ian utilizes TypeScript, Prisma, PlanetScale, and Vercel in this course for a truly wonderful developer experience. Prisma + TypeScript make it easy to model and validate all the data flowing through your application. With Prisma set up, you'll find switching to a deployed, production database is a breeze (no really) with PlanetScale. Tying it all together is Vercel which plays nice with GitHub and PlanetScale for easy deploys. With this stack, you will build out an MVP for a social media type application. You’ll start your journey by building out the more static parts of your application, introducing you to Remix API and Patterns along the way. As you get familiar with these API and Patterns Ian will introduce you to more complex features. This includes user authentication through cookie session storage and implementing an authentication strategy (which again, is a lot more pleasant than it sounds with Remix!).

others / www.youtube.com2022-05-24

CSS Approaches in Remix

Let's dive into different CSS approaches in Remix! We will look at styling your Remix application in three different ways while analyzing different implications. These considerations include performance, developer experience, and scalability. See how to leverage Remix and CSS to create amazing experiences for your users. Speaker Bio: I am currently a freelance full-stack developer with experience in developing JavaScript applications in a variety of frameworks. I am passionate about web development and have recently been building different projects using Remix. I am also getting a master's degree in information systems at BYU. Outside of development, my wife and I just had our first child. We enjoy playing board games and reading numerous (mainly fantasy) books. Follow Noah: https://twitter.com/jnoahjohnson Repo: https://github.com/jnoahjohnson/remix-css Learn more at https://remix.run

others / www.youtube.com2022-05-23

Can I Build and Deploy a Remix Site in 5 Minutes? by Ian Sutherland

Can I build and deploy a Remix site in 5 minutes? Let's find out! In this talk I will attempt to build a basic Remix site with a couple of pages and deploy it to a cloud provider. Will I succeed in setting a web development record or fail spectacularly? Speaker Bio: Ian is a full stack software developer, open source maintainer and speaker. He's currently the head of Developer Experience at Neo Financial, the maintainer of Create React App and a member of the Node.js team. You can find him on Twitter and GitHub @iansu. Follow Ian: https://twitter.com/iansu Code: https://github.com/iansu/remix-fan-club Learn more at https://remix.run

others / www.youtube.com2022-05-22

Crash Course with Remix Run which is a NEW Full Stack JavaScript Framework you MUST try in Arabic

In this video, I will go deeper into the core concepts in @Remix as We build a blog app with Prisma and Sqlite. Remix is a full-stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience. People are gonna love using your stuff. πŸš€ Join Discord - https://discord.com/invite/amsZty2hkM β–¬ πŸ”— Chapters β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬ βŒ›οΈ 00:00:00 Remix Intro βŒ›οΈ 00:07:27 Remix Project Initialization - File Structure Overview βŒ›οΈ 00:12:26 React Overview - Class/Functional Component βŒ›οΈ 00:16:57 React Overview - Props βŒ›οΈ 00:22:00 React Overview - State βŒ›οΈ 00:25:00 React Overview - Handling Events βŒ›οΈ 00:29:00 React Overview - Functional Component [hooks] βŒ›οΈ 00:33:37 What/Why Remix βŒ›οΈ 00:35:40 Add Tailwind CSS with Configuration βŒ›οΈ 00:46:00 Configure Prettier and Eslint βŒ›οΈ 00:53:00 Your First Route βŒ›οΈ 00:46:00 Loading Data - Loader βŒ›οΈ 01:10:00 Refactoring and Models βŒ›οΈ 01:19:00 Dynamic Route Params βŒ›οΈ 01:33:54 Nested Routing βŒ›οΈ 01:41:03 Actions βŒ›οΈ 02:03:00 Progressive Enhancement - Data Mutation βŒ›οΈ 02:11:00 Delete Data βŒ›οΈ 02:27:00 Prisma and Pulling from a data source βŒ›οΈ 02:50:00 Error Boundary βŒ›οΈ 02:54:00 Outro β–¬ πŸ”— Resources β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬ ⭐️ Github Repo: https://github.com/moelzanaty3/complete-intro-to-remix-run β–¬ πŸ”₯ Contact Me β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬ BIO: https://moelzanaty3.bio.link/ πŸ’– Become a Patron: Show support & get perks! https://www.patreon.com/mohammedelzanaty β˜•οΈ You Don't need to meet me to buy a coffee: https://www.buymeacoffee.com/moelzanaty3 πŸ”— GitHub: https://github.com/moelzanaty3 πŸ”— LinkedIn: https://www.linkedin.com/in/moelzanaty3 πŸ”— Twitter: https://twitter.com/moelzanaty3 πŸ“ͺ mohammedelzanaty129@gmail.com β–¬ βš™οΈ My Equipment Gear β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬ 🌟 https://kit.co/mohammdelzanaty/my-youtube-and-teaching-gear β–¬ 🎨 My Editor Settings β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬ 🌟 Night Owl Color Theme. 🌟 Dank Mono Font or more information - https://www.youtub.com/watch?v=ykA7WnUQuV0

others / egghead.io2022-05-20

Up and Running with Remix

What is Remix? > Remix is a seamless server and browser runtime that provides snappy page loads and instant transitions by leveraging distributed systems and native browser features instead of clunky static builds. > -- remix.run But that summary only scratches the surface. Remix has great mental models, is extremely fast, and has a plethora of components and features that will make your life easier and web apps perform better. And in this course, you'll be learning how to take full advantage of what Remix has to offer. You will learn by building a full-featured blog with a database, authentication, CRUD operations, user roles, and more! If you want to read more about why should give Remix a chance, give Kent's blog post, Why I Love Remix, a read! Check out this repo to see the project code for this course

others / www.youtube.com2022-05-19

Why you should lift component state up to the URL

"How can I sync component state with the URL?" This is one of the most common questions I see asked in the React community, and in this video we're going to learn why trying to synchronize state between your React app and the URL is a bad idea – and the right way to address this issue. - 0:00 – Intro - 2:04 – Implementing sorting in React - 17:06 – First attempt at shareable URLs: Synchronizing React state - 20:17 – Fundamental problem with first attempt - 21:43 – Second attempt at shareable URLS: Hoist state out of React - 29:13 – Outro Links: πŸ‘‰ Demo: https://2022-05-16-hoisting-state-to-url.vercel.app πŸ§‘β€πŸ’» Source on GitHub: https://github.com/samselikoff/2022-05-16-hoisting-state-to-url/blob/main/app/routes/index.jsx πŸ’… Table component from Tailwind UI: https://tailwindui.com/components/application-ui/lists/tables#component-7b5a46e74e475708d966ca31716f1771

others / www.youtube.com2022-04-28

How to Speak with Remix by Andre Landgraf

Remix is a full stack web framework but how "full stack" can we make it? Voice user interfaces have seen substantial growth in adoption and popularity over the past years. Unfortunately, there hasn't been much visible effort to apply the latest advancements in web development (frontend development) to the field of voice UIs. I created react-ssml-dom to apply the component-based approach to voice UIs. It was a fun project and I was able to create a small Google Assistant action using React to render SSML! Now, a few years later, Remix is out and has changed the way I develop for the web! What if we could use Remix to also render voice applications? Or full stack web and voice apps? Speaker Bio: Hey there! I am a Software Engineer from Germany with a background in Information Systems. I am currently doing my master's degree in Computer Science in Palo Alto, CA! I love to develop web and voice apps. Sometimes I also study for my degree. On the weekends, I hike, watch Marvel, or listen to Syntax.fm. Please find me on Twitter or the Remix Discord server and get in touch! Follow Andre: https://twitter.com/AndreLandgraf94 Learn more at https://remix.run