How to Build Password Generator with Electron & React Pt.2 – Creating the UI

How to Build Password Generator with Electron & React Pt.2
Reading Time: 10 minutes

Every password generator, and app in general, needs a great UI. For two reasons. First, great UI makes using the app easier and faster for anyone who wants to use the app. Second, we often judge the quality of the app according to its design. We see things with great design as better and more valuable. And, if the app also works great, then the sale is made and people become users. Without further ado, let’s create a great UI for our password generator app! Continue reading “How to Build Password Generator with Electron & React Pt.2 – Creating the UI”

How to Build Password Generator with Electron & React Pt.1 – Setting the Stage

How to Build Password Generator with Electron & React Pt1
Reading Time: 10 minutes

Have you ever wanted to build your own password generator? And, what about an app? This tutorial will show you how! In this mini series, we will learn how to use electron and React and build desktop password generator app. Today, we will start by putting together all dependencies. Then, we will create package.json and prepare npm scripts. Finally, we will prepare configs for Webpack and main file for electron. Now, let’s begin! Continue reading “How to Build Password Generator with Electron & React Pt.1 – Setting the Stage”

How I Built My First Electron App & You Can Too Pt.5 – Polishing, Building & Shipping

How I Built My First Electron App & You Can Too Pt.5
Reading Time: 12 minutes

Wanting to create an electron app is one thing. Shipping it is another. Today, we are going to finish our app and ship! We will start by improving the UI. We will use styled-components to create components for custom checkboxes and lists. Then, we will implement a simple top menu. After that, we will use electron-packager and setup npm scripts so we can create builds for our new electron app for all major platforms. With that, our app will be ready for release. Let’s begin! Continue reading “How I Built My First Electron App & You Can Too Pt.5 – Polishing, Building & Shipping”

How I Built My First Electron App & You Can Too Pt.4 – Adding Timer & Notification

How I Built My First Electron App & You Can Too Pt.4
Reading Time: 10 minutes

Building an electron app is so easy anyone can do it! All you need is just an idea. Then, this mini series will show you how to take your idea and build your first electron app, step-by-step. In this part, our goal will be creating, and then implementing, Timer component with a simple notification for our Grease the Groove electron app. Without further ado, let’s begin … and have some fun! Continue reading “How I Built My First Electron App & You Can Too Pt.4 – Adding Timer & Notification”

How I Built My First Electron App & You Can Too Pt.3 – Unleashing the Electron

How I Built My First Electron App & You Can Too Pt.3 – Unleashing the Electron
Reading Time: 10 minutes

Building an electron app doesn’t have to be hard. It can be actually easy. In this mini series we will take a look at how to do it, step-by-step. In this part, we will put together the code that will power up our electron app. Then, we will create the first and also the main React component for our app with a simple UI. With that, we will finally have the chance to run our electron app and see the results of our work. So, without further ado, let’s begin! Continue reading “How I Built My First Electron App & You Can Too Pt.3 – Unleashing the Electron”

How I Built My First Electron App & You Can Too Pt.2 – Preparing the Workflow

How I Built My First Electron App & You Can Too Pt2
Reading Time: 10 minutes

So, you want to build your own electron app? Do you have some interesting idea in mind, or just want to learn how to do it? You are on the right place! This mini series will help you learn all you need to achieve both. Today, in this part, our main goal and focus will be setting up the workflow for building our electron app. We will start with installing necessary dependencies and devDependencies. Then, we will set up npm scripts. Finally, we will end this part by preparing configs for Webpack. Now, let’s begin! Continue reading “How I Built My First Electron App & You Can Too Pt.2 – Preparing the Workflow”