I’m happy to announce that I just started my new career as Software Engineer! I’m sharing my story in hopes to inspire others who are thinking to change their careers as well. Before I wrote my first line of code, I knew nothing about programming.

Before we dive into my story, let me share a little background about myself. I am a third-generation Japanese American who was born and raised in Hawaii. I moved to Japan 7 years ago as an English teacher. I spent 3.5 years working at an after-school program teaching English to kids. …

In this article, we will learn about how to use the Grid component in Material-UI to create a responsive layout for a React application.

We will first learn about how the Grid container and Grid item work. Then, we will take a look at how to use breakpoints, padding, and flexbox to create a responsive layout.

Finally, we will continue the series where we are building out a website. In the last article, we added a hero section with a background video. If you missed that article, you can check it out here. …

The first thing you see when you visit any website is the hero section. The hero section is the part that typically displays an image with some text and a call to action at the top of a web page. You can also include a background video rather than an image to make it more appealing to the user.

In this article, we will learn how to build a hero section for a React website. We will learn about how to use react-player to play the background video, and add content and a dark overlay to it.

This article will…

The other day, I was trying to create a basic address form with inputs for address, city, state, and zip code. Here is a general idea of what I was trying to build (please ignore the not-so-nice design).

The navigation bar is one of the first things users see on a website. You can create a beautiful navigation bar easily in React using the component library from Material-UI.

In this article, we will take a look at how to create a navigation bar using the AppBar and Toolbar components from Material-UI. The navigation bar we will create will have a space for a menu icon, a logo/company name, and a signup button.

We will continue from a previous article where we already created a new react project and installed the Material-UI core package. In that article, we created…

According to StatCounter.com, almost 65% of users are using Google Chrome as their browser. I am also one of them.

However, this also means that 35% of users are not using Google Chrome. When developing you should always try to be aware of as many users as possible.

There are some features that will work well on one browser, but if you switch over to another, things will not work the way we expected. There is a handy website below called, caniuse.com, which checks whether a feature will work on a browser or not.

I recently found that a feature…

In a previous article, I showed you how to create a basic signup page using React and Material-UI. In that article, we used controlled components and the useState hook to keep track of the form input values. You can check out that article below.

In another article, we took a look at a library called React Hook Form. We learned an easy way to handle input data in a basic form using the library.

In this article, we will combine our knowledge of the two. We will use React Hook Form to handle the data for a form that uses…

For the past week, I have been learning about how to write tests for React applications using Jest and React Testing Library.

As always, one of the first things I did when learning something new is to do a Google search about the topic. I then started looking for good content to take in. When it comes to testing, I found that it was a lot harder to find good tutorials and information compared to some of the more popular topics in programming.

I still have a lot to learn when it comes to testing, but I’d like to give…