Dave’s not here, man

Note: this article begins after you’ve setup and coded an Express Router on a NodeJS server and written an API that connects to a mysql database

Now that we’ve got our sexy app up and running, we want to make it a little more sophisticated. We didn’t bother to include user-password encryption before, because who cares about hacking my demo app for school, right?

Everrryyyyyybbboooodddddddyyyyyy!!!!

We’re going to be using a package called bcrypt to encrypt our password and for the validation. Here’s what wikipedia has to say about bcrypt:

bcrypt is a password-hashing function designed by Niels Provos and…


It’s funny because it’s true!

Yay, Me!

This will be my last blog post for my enrollment at good ‘ol Austin Coding Academy. I submitted my final project, a puzzle game called Puzlr yesterday and this post is the last assignment.

Later they’ll make a video of its functionality for the graduation ceremony and I’ll get me a certificate certifying myself as a Full-Stack Web Developer. Which I was already, in php and mysql, but I wasn’t certified and I had never run into the tools they taught us how to use.

Now they’re preparing us for the job hunt. That’s what this article’s about.

Welcome to Your Nightmare

By now…


If only they had some kind of identification

Problem:

What we’re going to be running into today is what to do when you have an array of elements to map, but you want to do something to each one first.

The Example:

I’ve been making a React app called Swars out of the Star Wars API.

That’s an excellent API, btw, very helpful and fun for training. Here’s a version I made 6 months ago in PHP. I just checked and the API was down so neither example was working.

…but we don’t need ’em to for this…

As you know, the records come through like this:

{ "name": "Luke Skywalker"…

What you’ll need

Disclaimer:

I got involved in some new-feature development on my good ‘ol Capstone App for Austin Coding Academy this weekend. This left me inspirationally drained and intellectually worn out enough that I almost completely forgot I had a blog post to write as well.

I’m losin’ it, here…

I usually cover something I learned in class this week, but since we’re very near the end of the course our classes have been a lot of tying up concepts that we’ve already been familiarized with.

Some important concepts have been introduced and then left behind as we move on to other things…


We’re going to be building this thing

Abstract:

At some point by now you’ve probably signed up for a website and been automatically assigned an avatar as a “placeholder” until you supply your own.

Here’s an example if you don’t know what I’m talking about:


Introduction

So you’ve got your amazing app all refactored into components and you’ve set up react-router to provide you a path to all your different pages.

That’s great!

But then you find out that one of your pages needs to redirect the user to another page along with some props that they’ll need once they get there!

You don’t want to use a global state manager like Redux, because who knows why you do the crazy things that you do, but you still need a way.

I can tell by the amount of people I ran into with the same problem…


It’s easier than you might think

Intro:

Have you heard that old joke recently?

Q: “What does a programmer do while in quarantine?”

 6:00AM — wake up 6:30AM — Shower, breakfast, coffee 7:00AM — build the first Covid tracker of the day

I’m in this joke — and I like it!

So today, instead of just reading API data and spitting it out in pretty rows, let’s jazz it up with a little visual enhancement!

Let’s Get Started:

Go ahead and create your react app using npx create-react-app bestappever and get yourself to the App.js file.

Just like normal, we’re going to gut that file and replace it with our…


This doesn’t have to be a nightmare to build

I’m sure you’ve experienced the sudden nightmare when you make an API call and the data that gets returned contains an array in it with more data. Then you open that array and it’s filled with more arrays with more data. And then each one of those data elements is another array with more data!

Here’s the Pathetic News Network app from the picture above.

Here’s an example of the data we’re working with. It’s my project from last week to display articles and comments from the Hacker News API.

That link will display all the comments for one article…


Not Shown: Directory Structure

For today’s fun adventure we’ll be using ReactJS to fetch data from an API and output that data to the user. We’ll also test for how far the user has scrolled down the page and automatically load more data when they’ve reached the bottom.

The API data we’re going to use is from the fine folks at PunkAPI. They provide pictures, descriptions and recipes for craft beers. Soon we will, too!

What you’ll need:

— npm package manager

— VSCode

— create-react-app

— react/react-dom

The first thing we’re going to do is run a terminal, and from the command line…


Should a sexy form like this redirect you to another page?

Today we’re going to learn a fun little trick where we intercept the functionality of an HTML form so that instead of having it POST the form’s data to some other server-side process we can just immediately take control of it with our own javascripty goodness right in the current browser!

How’s that sound?!

Why would we want to do that in the first place? That’s simple; because there are so many primo form-generators online to build some really tight-looking forms, but maybe you don’t want to send the data off somewhere else for processing.

That’s as good a reason…

crashdaddy

4a 75 73 74 20 61 6e 6f 74 68 65 72 20 63 6f 6d 70 75 74 65 72 20 6e 65 72 64 20 77 69 74 68 20 61 20 62 6c 6f 67

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store