SandCrab is a new experimental project I am working on. It is an Electron app that brings Amazon S3 to your desktop with a simple drag and drop UI. You can use SandCrab to manage and create buckets, upload, download, move, copy and delete files, all from your desktop. Get the app here: sandcrab.io My Website: zayne.io

In this video, we build a working proof of concept for integrating Stability AI's Image Upscaling API into my Electron app Conductor to upscale images and GIFs. I'll be uploading more videos soon working on the codebase of Conductor to add more features to the app. Conductor is a new project I am working on that is built using Electron and FFmpeg. It is a desktop MacOS application for transforming videos, images, and GIFs. I will also be making the production app available to download soon for Patreon subscribers. My Github: https://github.com/zayneio My Website: https://zayne.io Conductor's Website: https://conductor.gg Patreon: https://patreon.com/zayne_ Timestamps: 00:00 - Introduction 02:17 - StabilityAI's Upscale API 03:19 - API Proof of Concept 05:07 - Upscaling Images 06:13 - Adding the Upscaler to our App 13:01 - Updating the Frontend 17:18 - Updating the Backend 22:13 - Testing Our Image Upscaler 22:50 - Debugging 23:38 - Image Upscaling Works 25:24 - Upscaling GIFs 30:00 - Testing Out Our GIF Upscaler

Conductor is a new project I recently started working on. It is a desktop MacOS app written with Electron and uses FFmpeg under the hood for video and image transformations. Over the next few weeks, I'm going to start sharing some videos working on the codebase of Conductor, adding new features and building out more functionality. More here: https://conductor.gg ProductHunt: https://www.producthunt.com/posts/conductor-b1a9cd41-3057-41bb-9b29-c88e01431103 Twitter: https://x.com/zayneabraham My website: https://zayne.io

This is a follow up to the previous 2 videos on building an electron app with react.js. In this part, we will get into setting up a simple json data store that can be used to persist data in our electron app for things like user settings. The lib that I used for this in the video is called electron-store, you can learn more about it here: https://github.com/sindresorhus/electron-store. In the next part, we will finally jump into doing some things on the react side, setting up a simple way for users to switch between a light/dark theme in the app using the data store that we set up in this video. Note: One of my goals in making this series is to improve my own knowledge of Electron and Node. It's entirely possible that some of the things I'm doing here are not the best way (or even the correct way) of doing something. Feedback, comments, corrections and constructive criticism are more than welcome!

In this video, we'll dive deeper into the main.js file that we copied over from electron-quick-start in the first video. We will add additional functionality to our main.js file to add a tray icon into our menu bar that we can use to toggle the visibility of our app's browser window. Along the way, we'll also explore some of the built-in functionality we get with various modules/classes from Electron. === 📖 Sometime around late 2019/early 2020, I was looking for good resources on setting up an Electron app to use Tray. At the time, I was building a cryptocurrency menu bar app. Funnily enough, one of the best articles I found on this topic happened to be a medium article that was also focused on building a cryptocurrency menu bar app! Several of the tips and methods used in this video to set up the tray functionality come directly from that article, and I highly recommend giving it a read for some additional context: https://medium.com/@nahoc/lets-build-a-system-tray-cryptocurrency-tracker-for-mac-using-electron-part-1-7888747891b. === Post Video notes: - I forgot to mention this in the video, but when setting up the app to use tray, if you use an image for your icon that is too large it may not show up in the menu bar. As an example, the image I used in this video is 16x16.

Earlier this year I started to experiment with electron, and I've been having a lot of fun with it so far. I thought it might be interesting to try out a mini-series where we try to build an app from scratch using electron and react. In this first video, we will create a new react app using create-react-app, add electron to it, and then create a new start script that lets us run everything together. Here is the link to electron-quick-start, where we copied over the main.js file in this video: https://github.com/electron/electron-quick-start. I'll be going into the main.js file in more detail in the next video. If you enjoy this video, I highly recommend reading this post by kitze on medium: https://medium.com/@kitze/%EF%B8%8F-from-react-to-an-electron-app-ready-for-production-a0468ecb1da3 This was the first really good article I found when I started exploring this topic, and it's where a number of tips in this video came from, including using the concurrently and wait-on packages, as well as the start script used to run the app. I'm still pretty new to working with electron, feedback throughout this project is more than welcome! Here is a quick recap of the steps in this video in case it's helpful: npx create-react-app app-name cd app-name yarn add concurrently yarn add wait-on Specify the electron startup script in our package.json (e.g. "main": "main.js") Copy over the main.js file from electron-quick-start into our new app Add the start script to package.json Run it! Here is the start script from the video: "electron-react": "concurrently \"BROWSER=none npm start\" \"wait-on http://localhost:3000 && electron .\""

👉 All of the code from this video is available here: https://github.com/zayneio/open-flights 👉 Github: https://github.com/zayneio Here is part 4 of the Rails + React CRUD app mini series. In this video, we will be building the review component to display reviews on each individual airline page, as well as fixing a small bug from the previous video so that new reviews will get displayed onto the page as they get added. We'll also create a small, reusable rating component that we can use to start swapping in star ratings throughout our app where we currently have numbers representing the score. 👉 Related Article: https://zayne.io/articles/how-to-build-a-crud-app-with-ruby-on-rails-and-react-part-2

👉 All of the code from this video is available here: https://github.com/zayneio/open-flights 👉 Github: https://github.com/zayneio Let's build a CRUD app with ruby on rails and react.js! In this short video series, we are going to build an airline reviews website using rails, react, and webpacker. We'll also be using some interesting technologies and tools like fast_jsonapi to build out our api, styled-components to add styling on the front end, react-router, axios, and more! In this 3rd video, we will be building out an airlines show view in our app, along with creating a review form for adding new reviews. ▶️Relevant Links: - [39:12] Simple star rating by knyttneve on Codepen: https://codepen.io/knyttneve/pen/EBNqPN - [43:18] General sibling combinator: https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator

👉 All of the code from this video is available here: https://github.com/zayneio/open-flights 👉 Github: https://github.com/zayneio The audio is finally corrected at ~13 minutes -- sorry for the poor audio quality/loud keyboard noises 🤦! Let's build a CRUD app with ruby on rails and react.js! In this short video series, we are going to build an airline reviews website using rails, react, and webpacker. We'll also be using some interesting technologies and tools like fast_jsonapi to build out our api, styled-components to add styling on the front end, react-router, axios, and more! In this 2nd video, we will start the react portion of our app, building out the index/home page of our app. This will include adding react-router to set up navigational components, using axios to make api request to the api we set up in video one, and styling our home page with styled components. Relevant Links: → The useState tip at 12:05: https://reactjs.org/docs/hooks-state.html → The useEffect tip at 12:36: https://reactjs.org/docs/hooks-effect.html → The useEffect tip at 13:52: https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects → The CSS Grid tip at 28:48: https://css-tricks.com/snippets/css/complete-guide-grid/ Timestamps 0:00 Intro 1:23 The javascript_pack_tag 3:48 Creating our App component 4:58 Adding React Router to our project 11:24 Building out our Airlines component 12:06 Setting our airlines state with useState 12:31 useEffect 13:08 Getting data from our api with axios 18:18 Creating an airline grid for our homepage 22:10 Adding our avg_score method to our airline serializer 23:35 Handling edge cases for our avg_score method 24:52 Using Link with React Router for anchor tags 25:47 Adding styled components 28:34 Using css grid to style our airline grid 35:59 Disabling turbolinks for our project

👉 All of the code from this video is available here: https://github.com/zayneio/open-flights 👉 Github: https://github.com/zayneio I realized after recording this that I was using the built-in computer mic the entire time instead of my mic 🤦 -- sorry for the poor audio quality/loud keyboard noises! == Overview == Let's build a CRUD app with ruby on rails and react.js! In this short video series, we are going to build an airline reviews website using rails, react, and webpacker. We'll also be using some interesting technologies and tools like fast_jsonapi to build out our api, styled-components to add styling on the front end, react-router, axios, and more! In this first video, we will be building out all of the back end functionality needed for our rails api. This will include setting up our models, controllers, routes, and serializers from scratch. At the end of this video, we will test out the API we built using an HTTP client tool (Insomnia, Postman, etc.). In the next video, we will start building out the front end portion of our app using react! Timestamps 0:00 Intro 1:47 Creating our new rails app with webpacker and react 4:05 Creating models and database tables for our app 10:00 Creating seed data for our app 12:15 Using fast_jsonapi to build out our API 17:07 Routing 19:15 Creating our API controllers 29:30 Testing our API with Insomnia

👉Code from this video here: https://github.com/zayneio/cryptocurrency-calculator 👉 Patreon: https://patreon.com/zayne_ 👉Subscribe for more React/Rails videos: https://www.youtube.com/channel/UCkoEStUK7wxmZef2DcPuCAQ?sub_confirmation=1 👉Seed file: https://github.com/zayneio/cryptocurrency-calculator/blob/master/db/seeds.rb 👉Website: https://zayne.io/articles/build-a-cryptocurrency-portfolio-calculator This video is basically just me messing around with using react in a rails app. There's a lot of stuff in here on the react side that could be done better. Some of the components could be dumb/presentational components. A lot of variable naming on the fly is done pretty willy-nilly (camelCasing vs underscoring, use of const vs let, etc). Search results could be it's own component. Etc, etc.

👉 All of the code from this video is available here: https://zayne.io/articles/how-to-build-a-react-app-with-ruby-on-rails 👉 [NEW] Patreon: https://patreon.com/zayne_ 👉 Subscribe For More React/Rails Videos: https://www.youtube.com/channel/UCkoEStUK7wxmZef2DcPuCAQ?sub_confirmation=1 👉 My Website: https://zayne.io == Overview == In the last video, we created a simple hello world with react and ruby on rails. In this video, we are going to extend that app by adding react router and creating routes for our app.

👉 All of the code from this video is available here: https://zayne.io/articles/how-to-build-a-react-app-with-ruby-on-rails 👉 Watch Part 2 Here: https://www.youtube.com/watch?v=hBm5M4u2jLs 👉 Patreon: https://patreon.com/zayne_ 👉 Subscribe For More React/Rails Videos: https://www.youtube.com/channel/UCkoEStUK7wxmZef2DcPuCAQ?sub_confirmation=1 👉 My Website: https://zayne.io == Overview == A quick look at how you can build a React application using Ruby on Rails. There are two common methods (at least that I know of) that you can use to create a react app using ruby on rails. The first option is to create 2 separate applications - one for your frontend react app, and a separate rails api. Then you can deploy the react app using something like surge.sh, and deploy the rails API with Heroku or similar. However, as of I think rails ~5.1, there's a second option you can use as well. The second option is to create a single application, setting it up with react from the start using webpacker. In this post we will focus on this second option. In this video we are going to take a look at how to build a simple hello world react app with ruby on rails using webpacker. More on the webpacker gem here: https://github.com/rails/webpacker#react