Check out a free preview of the full Rapid Development on AWS: React, Node.js & GraphQL course:
The "Trapper Keeper React Application Review" Lesson is part of the full, Rapid Development on AWS: React, Node.js & GraphQL course featured in this preview video. Here's what you'd learn in this lesson:

Steve introduces the next course demontration application, Trapper Keeper. Trapper Keeper is an application for keeping track of images in an S3 bucket.

Get Unlimited Access Now

Transcript from the "Trapper Keeper React Application Review" Lesson

[00:00:00]
>> Steve Kinney: We're not gonna worry too much about that, because it's kinda difficult to spin up an app that has a whole bunch of users and stuff along those lines. We're just gonna kind of look at the storage API kind of in isolation. I think it becomes fun. This is one of those ones where if you look at the database one, and you look at the storage one, you're like cool they're init.

[00:00:18] And then, I guarantee you a week from now you're I could store that stuff in the database, have the key and then have the file over in there. And then kind of have the lock and the key to go get it, and stuff along those lines. It's really hard to come up with a contrived use case.

[00:00:34] And also, in order to keep just learning the storage API kind of clear, we're kinda look at it in isolation. That does involve looking at a slightly different repo. So this one is under my GitHub and it's called trapper-keeper. So, we'll kinda look at it together.
>> Steve Kinney: I'm gonna check out a new branch called basic-implementation.

[00:01:20]
>> Steve Kinney: Cool, so again, this is kind of an excuse to play with this API, which I think is kinda init. So what is the first thing we need to do for a new awsmobile project?
>> Speaker 2: Init.
>> Steve Kinney: Init, awsmobile, init. You know what? Let's try something. -y, don't ask me questions, just do it, right?

[00:01:50] And so that once skips all the questions, right? Before it was, it detects all the things correctly. I purposely chose to use create react app not, I mean, I like create react app, I don't dislike it. But I also want it a bunch of sensible defaults in this case.

[00:02:04] So because I did that, I can just type -y, and it knew what to do with everything. It's going to install aws-amplify-react and aws-amplify and put those both in place as well. And then, we're gonna start our just turning on one API, we're gonna turn on the storage API, cuz that's the one we wanna play around with, right?

[00:02:26] And so, wait very patiently for this,
>> Steve Kinney: Cool.
>> Steve Kinney: One more. All right, so the storage API is gonna be called user-files, is the name of that one, until I turn on that API for us. So when this fires up, we're gonna type awsmobile user-files, and that will give us the ability to turn that on.

[00:02:51] So, awsmobile user-files.
>> Steve Kinney: And we gotta say enable or else it's not a thing. Cool, and so you can see we have analytics which I'm gonna turn off real quick.
>> Steve Kinney: All right, cool, so we have hosting and we have user files, and that seems like a good for a start.

[00:03:20] So we'll,
>> Steve Kinney: There won't be a lot to push in this case, because we are get ignoring the AWS stuff, and we actually haven't written any code yet. That was probably just a change to my package json for the AWS stuff in this case. All right, very cool, so he says that's what it was, he didn't look, but it's fine.

[00:03:49] So what we literally wanna do is let's fire up this app and take it for a spin. Again, we haven't set up AWS to find this one, so it's just gonna be the kind of app au naturel.
>> Speaker 3: Do you need to push to AWS first?
>> Steve Kinney: Likely, except that I haven't configured it in the application, at all, yet.

[00:04:10] So the application is completely agnostic, starting the development server.
>> Steve Kinney: Probably yep, I'm gonna have to do it in port 3001 in this case. Cuz I left the other one going.
>> Steve Kinney: All right, cool, it'll be up in one second.
>> Steve Kinney: Cool, as you can see, I'm very good at CSS.

[00:04:52] It's almost like I took the CSS from the previous project, and turned it to purple instead of pink. And all this does is allows us to choose a file from the desktop.
>> Steve Kinney: And eventually, do something with it.
>> Steve Kinney: [SOUND] So we can grab a picture, it's not gonna show up here.

[00:05:17] And hit Submit, and right now, it just logs into the console. But we chose a file, we log the file object to the console. I would love to be able to put that into the cloud. It seems like a good place to put this file. It's a picture of an Arduino or a Tesla board.

[00:05:33] It's pretty cool.