In this section, we're gonna build out the portfolio manager feature of the application. Up until now, we used DevCamp Space in order to add all of our records, and then we pulled that data in using an Axios API call, and that was good for then, but in a real-life application, you're usually going to want to be able to manage the data.

So you're gonna wanna be able to create your own portfolio records directly in your application. So that's what we're gonna be walking through. So let's kinda go through a prototype for what we're gonna be building. We're actually gonna do a little bit more than what I'm gonna show you, but this should give you at least a good starting point, and a good frame of reference.

So right here I have the prototype application, and if I go to Portfolio Manager, you can see that we have a form, we have some image upload elements, and then we also have all of the portfolio items right here.

So I'm gonna show you just a demo one. So, I could say my Demo App, and it's gonna have a URL of, it doesn't matter, and then a position of 13 and then you can pick out from this dropdown any of these categories, and then put in any kind of content that you want here. We're also going to be building out an image uploading functionality, where we can grab a thumbnail image, a banner image, and then a logo, and then from there, it's going to wrap all that data up, and it's gonna push it to the API.

So if I come here, hit save, you can see it automatically, without doing any page refresh or anything like that, it automatically populated on the top right-hand side here, so it added to our list of portfolio items, and then, if you come here and hit refresh in DevCamp Space just to look at the data, you can see our demo app is here with our description, our URL, our category, our position, and then each one of the images, and then, I do not want this one, so I'm going to remove it from here so it doesn't populate my own homepage, but that's what we're gonna be building.

So, we're gonna learn quite a bit of new material. So, we're gonna learn how to make POST requests in order to create records in an API. So far, we have used the POST request before, but just to create a session. Now, we're going to be wrapping up a full set of form data, including images, and as you're gonna see, there are a few tricks you need to learn in order to upload images in React, so we'll walk through all of that.

We'll walk through some pretty cool libraries like Dropzone, that's how you're able to build in this kinda functionality, so I'll even show you right now, if I open up the Finder, and let me pull in some images here, so I could pull in, actually, any image, and you see, if I pull this, and drag it down, it automatically generates a preview of whatever image that I have right there, and I can do things like remove the file.

And these are all some pretty cool techniques that you'll most likely need to build into your own application. So we're gonna be learning a lot, and there's also going to be a decent amount of review, such as creating new components, working with forms, and communicating with APIs. So it should be a really fun section, and now that you know what we're gonna build, let's get started.