<div class="medium-feed-item">
<p class="medium-feed-image"><a href="https://javascript.plainenglish.io/typescript-narrowing-using-type-guards-268e4c6edc0?source=rss-6bb3c9d1a1f4------2"><img src="https://cdn-images-1.medium.com/max/2600/0*CpbUzWQ0sq2k-d57" width="3802"></a></p>
<p class="medium-feed-snippet">Help TypeScript get the correct types with narrowing</p>
<p class="medium-feed-link"><a href="https://javascript.plainenglish.io/typescript-narrowing-using-type-guards-268e4c6edc0?source=rss-6bb3c9d1a1f4------2">Continue reading on JavaScript in Plain English »</a></p>
</div>

TypeScript Narrowing Using Type Guards

<div class="medium-feed-item">
<p class="medium-feed-image"><a href="https://medium.com/code-and-chill/6-lessons-i-learned-in-6-months-working-as-a-frontend-developer-fd31ef8ce25e?source=rss-6bb3c9d1a1f4------2"><img src="https://cdn-images-1.medium.com/max/2600/0*ZFDGSjRhTeyxe0Kq" width="5316"></a></p>
<p class="medium-feed-snippet">Looking back on some of the lessons I learned from working in a startup company</p>
<p class="medium-feed-link"><a href="https://medium.com/code-and-chill/6-lessons-i-learned-in-6-months-working-as-a-frontend-developer-fd31ef8ce25e?source=rss-6bb3c9d1a1f4------2">Continue reading on Code and Chill »</a></p>
</div>

6 Lessons I Learned in 6 Months Working as a Frontend Developer

<div class="medium-feed-item">
<p class="medium-feed-image"><a href="https://levelup.gitconnected.com/redux-toolkit-an-easier-way-to-set-up-redux-6782b4857f8?source=rss-6bb3c9d1a1f4------2"><img src="https://cdn-images-1.medium.com/max/2600/0*t8Bp6wwplsq7Dp25" width="4845"></a></p>
<p class="medium-feed-snippet">How to set up a Redux store use Redux Toolkit in a React application</p>
<p class="medium-feed-link"><a href="https://levelup.gitconnected.com/redux-toolkit-an-easier-way-to-set-up-redux-6782b4857f8?source=rss-6bb3c9d1a1f4------2">Continue reading on Level Up Coding »</a></p>
</div>

Redux Toolkit: An Easier Way to Set Up Redux

<div class="medium-feed-item">
<p class="medium-feed-image"><a href="https://javascript.plainenglish.io/javascript-tip-remove-an-item-from-an-array-using-the-filter-method-249b2c720e02?source=rss-6bb3c9d1a1f4------2"><img src="https://cdn-images-1.medium.com/max/2600/0*QRZUnJ6pnLts4rt2" width="5350"></a></p>
<p class="medium-feed-snippet">Exploring the difference between the filter method and the splice method in JavaScript.</p>
<p class="medium-feed-link"><a href="https://javascript.plainenglish.io/javascript-tip-remove-an-item-from-an-array-using-the-filter-method-249b2c720e02?source=rss-6bb3c9d1a1f4------2">Continue reading on JavaScript in Plain English »</a></p>
</div>

JavaScript Tip: Remove an Item From an Array Using the Filter Method

<div class="medium-feed-item">
<p class="medium-feed-image"><a href="https://blog.devgenius.io/guide-to-using-hooks-in-react-router-7d9aabd6ae0e?source=rss-6bb3c9d1a1f4------2"><img src="https://cdn-images-1.medium.com/max/2600/0*K-Pdz3rSZiPPZMWx" width="3681"></a></p>
<p class="medium-feed-snippet">Learn about the useHistory, useLocation, useRouteMatch, and useParams hooks</p>
<p class="medium-feed-link"><a href="https://blog.devgenius.io/guide-to-using-hooks-in-react-router-7d9aabd6ae0e?source=rss-6bb3c9d1a1f4------2">Continue reading on Dev Genius »</a></p>
</div>

Guide to Using Hooks in React Router

<div class="medium-feed-item">
<p class="medium-feed-image"><a href="https://betterprogramming.pub/how-to-add-internationalization-in-your-next-js-app-a038c9407a1b?source=rss-6bb3c9d1a1f4------2"><img src="https://cdn-images-1.medium.com/max/2600/0*r33rS2xGC3_68KPp" width="3840"></a></p>
<p class="medium-feed-snippet">Implement internationalized routing and localization in Next.js</p>
<p class="medium-feed-link"><a href="https://betterprogramming.pub/how-to-add-internationalization-in-your-next-js-app-a038c9407a1b?source=rss-6bb3c9d1a1f4------2">Continue reading on Better Programming »</a></p>
</div>

How to Add Internationalization in Your Next.js App

<div class="medium-feed-item">
<p class="medium-feed-image"><a href="https://levelup.gitconnected.com/optimize-images-from-an-external-website-with-the-image-component-from-next-js-aa104a1f78e0?source=rss-6bb3c9d1a1f4------2"><img src="https://cdn-images-1.medium.com/max/2600/0*CrYdlwSQ95QjgGL6" width="3500"></a></p>
<p class="medium-feed-snippet">An introduction to the image component in Next.js</p>
<p class="medium-feed-link"><a href="https://levelup.gitconnected.com/optimize-images-from-an-external-website-with-the-image-component-from-next-js-aa104a1f78e0?source=rss-6bb3c9d1a1f4------2">Continue reading on Level Up Coding »</a></p>
</div>

Optimize Images From an External Website With the Image Component From Next.js

<div class="medium-feed-item">
<p class="medium-feed-image"><a href="https://javascript.plainenglish.io/how-to-add-a-file-input-button-and-display-a-preview-image-with-react-2568d9d849f5?source=rss-6bb3c9d1a1f4------2"><img src="https://cdn-images-1.medium.com/max/2600/0*MnYS80XbHOkVSXrn" width="4589"></a></p>
<p class="medium-feed-snippet">Using the Material-UI library and the URL object</p>
<p class="medium-feed-link"><a href="https://javascript.plainenglish.io/how-to-add-a-file-input-button-and-display-a-preview-image-with-react-2568d9d849f5?source=rss-6bb3c9d1a1f4------2">Continue reading on JavaScript in Plain English »</a></p>
</div>

How to Add a File Input Button and Display a Preview Image With React

<div class="medium-feed-item">
<p class="medium-feed-image"><a href="https://javascript.plainenglish.io/how-to-add-validation-to-your-inputs-using-react-hook-form-425ee6de4114?source=rss-6bb3c9d1a1f4------2"><img src="https://cdn-images-1.medium.com/max/2600/0*g6gJ1DRnQ92A7GSG" width="5016"></a></p>
<p class="medium-feed-snippet">Create a better user experience by validating inputs on the client-side</p>
<p class="medium-feed-link"><a href="https://javascript.plainenglish.io/how-to-add-validation-to-your-inputs-using-react-hook-form-425ee6de4114?source=rss-6bb3c9d1a1f4------2">Continue reading on JavaScript in Plain English »</a></p>
</div>

How to Add Validation to Your Inputs Using React Hook Form

<div class="medium-feed-item">
<p class="medium-feed-image"><a href="https://javascript.plainenglish.io/javascript-tip-conditionally-add-an-item-to-an-array-5877a9d7c88b?source=rss-6bb3c9d1a1f4------2"><img src="https://cdn-images-1.medium.com/max/2600/0*bgmw-de-DqxIo1ur" width="4035"></a></p>
<p class="medium-feed-snippet">Using the spread syntax and conditional ternary operator</p>
<p class="medium-feed-link"><a href="https://javascript.plainenglish.io/javascript-tip-conditionally-add-an-item-to-an-array-5877a9d7c88b?source=rss-6bb3c9d1a1f4------2">Continue reading on JavaScript in Plain English »</a></p>
</div>

JavaScript Tip: Conditionally Add an Item to an Array

When I first moved to Japan from Hawaii, I had trouble finding public basketball courts to play on. This is an app to map public basketball courts in Japan. Users can create an account and contribute by adding court information to the database. This app was created using React, and Redux for state management. The backend is all handled by Firebase, including authentication, Firestore, and storage.

Learning to code is a challenge and I want to help other who are just starting out. I created this platform to help beginners to code getting started. There is an articles section of my recent blog posts, resources section, and a mentor section.

https://learn-code-teach-code.vercel.app/

Hello, my name is Chad

I'm a Frontend Developer living in Tokyo, Japan.

I enjoy building user-friendly websites and web applications.

Skills

JavaScript

TypeScript

React

Next.js

Redux

Git

GitHub

Firebase

Sass

Material-UI

Tailwind CSS

Storybook

HTML5

CSS

Projects

Japan Hoops

Learn Code, Teach Code

Recent Articles

TypeScript Narrowing Using Type Guards

6 Lessons I Learned in 6 Months Working as a Frontend Developer

Redux Toolkit: An Easier Way to Set Up Redux

JavaScript Tip: Remove an Item From an Array Using the Filter Method

Guide to Using Hooks in React Router

Get in Contact