Remix and Strapi Crash Course – Full Stack Development

Key Takeaways

learn how to build projects using remix and strappy in this course you'll discover how to harness the power of remix a modern react framework to create Dynamic userfriendly front-end interfaces and you'll learn how to integrate strappy a flexible open- Source headless CMS to efficiently manage and deliver your content Paul Brett sofsky developed this course he'll teach you essential concepts best practices and practical tips to help you create seamless scalable web applications hello you want ful people at free code Camp I'm excited for this new tutorial that I'm going to share with you we're going to learn about remix strappy and how to combine both of them together to build things quickly we first going to start by learning about what remix is getting started with the basics then we're going to add strappy to our remix applications to see how you can use remix and strappy together so what is remix remix is a full stack web development framework created by the same team that brought us react router it is also backed by Spotify so you know it'll be around for a long time more importantly it allows you to build amazing user experiences while embracing the web standards since it's a fullstack framework you're able to build both your front end and backend together but as a new developer or someone who's just starting out or you just don't have a lot of time and you want build applications even faster this is where strappy comes in strappy is a headless CMS that allows you to create a API in minutes it gives you this amazing admin panel area to manage your data and more importantly you have a functional API that comes in with authentication user management and other great functionality so to empower us to build cool things for our clients we going to leverage remix and strappy together so let's take a look on what we're going to build during this tutorial we're going to cover the basics of remix everything you need to know to get started with remix quickly once we learn the basics of remix we're going to jump in and add our strappy back end to our remix application we're going to cover full CR functionality from creating deleting updating and getting our data and you'll be able to visually see your data within your strappy application which is pretty cool so let's take a look at all the things we are going to learn about we're going to cover remix routing we're going to take a look at nested routes and Outlets we're going to also look at how to create Dynamic routes we're going to cover how to use loader and action functions to get data from our strappy API which will cover full C functionality including create read update and delete we also going to take a look at form validation with side which is pretty cool and we're going to learn how to submit forms using remix including use fetch a function as well as how to handle errors via error boundaries and few additional things as well I hope you're excited about this tutorial as I'm as much teaching it to you so with that being said let's jump right into it and finally before we start how can you get help well one of the main ways that you could ask me questions is actually go to the project repo that I'm going to have in the description of the video and you could click on issues and you could create a new issue with your question and then I will be able to see it and give you any help that you need also if you're looking for the code snippet that we reference in the course you will find them all below here in the readme file we just have couple of SN that you will want to have access to while doing this course and more importantly while doing this tutorial you'll be able to ask questions in the comments for the video on free Cod cam Channel as well as I'm going to create a thread on their Forum to be able to answer questions there as well so let's jump to it and build cool things before we get started let's go over some of the prerequisites although I made this course with beginners in mind you should have some basic understanding of basic programming like a HTML CSS and JavaScript also you should feel comfortable around your computer like opening a terminal and being able to install basic packages you should have node installed and that should be enough with that being said the focus of this course is to really improve our understanding of remix and strappy and that's what we're going to do with that out of the way let's get started let's navigate to remix run and click the get started button we're going to navigate to this tutorial we're going to start here because I want everybody to start with the basics of remix we're going to do this tutorial together and then I'll show you how to hook up strappy to this project the reason why I'm using documentation is because I want everybody to feel comfortable that documentation is your friend and whenever you get stock these are the resources that you have available for you to help you get unstuck so we're going to work through this together but if you run into any issues you can always reference the documentation it is amazing but with that being said back in our remix tutorial let's now navigate to the bottom here where we could see this generate basic template command and this is what we're going to use to get started so I'm going to go ahead and copy it inside my terminal I already created a folder for my project I'm going to go ahead and paste that command and click enter this is going to go ahead and start creating our project I'm just going to keep this the same click enter and it's going to go ahead and create your project it's going to ask you if you want to initialize a new git repository you could say yes install dep pendy 1 npm Click yes and it's going to go ahead and create your project once your project is installed you could type LS to see the newly created folder we could CD into that folder and we could open our project inside vs code by running code period and here you are you have your remix project the most important part to keep in mind is that we're going to be working inside this app directory we have our basic app CSS we have our data file that came with this template to allow us to simulate that we are connected to the database when we're making our basic requests and our project starts from this route and here you see all the basic jsx that will render our pages and this is just a starting point and we'll learn more about this as we continue and we could run our project by running npm run def this is going to start our project in development environment so let's take a look and see what we have so far so what do we have here not much because this is just the beginning of our project but we have our basic input form and a button to submit our form with a list of few items and this is coming from our root. DSX file which is the entry point to our application and we'll talk more on this later but right now as you could see inside our body element we have our input and we have our Button as well as our list items so now that our app is setup let's take a look at the root route and adding our link to link to our stylesheet root. TSX is our root route and it's typically what is rendered first and this is where you would put your layout if you wanted to so here's our root route and this is where we have our sidebar we could add additional elements such as a header or a footer and an outlet component that would render all other routes which we'll talk a little bit more about it but for now let's take a look how we could add CSS to our project to import our CSS into our remix application we're going to use the links tag you could read more about it in the documentation we're also going to need to get its types and then finally we want to import our stylesheet that we want to use and we're going to use our links function to inject it inside our HTML so now let's add these changes in our app we are already importing our links so in the top let's import our links function types now let's import our stylesheet that's found in the app under app.css file this is where you could find all the styles used in this application and finally let's use our links function to import our Styles now let's refresh your application beautiful and now you could see our stylesheet is being applied now that our application taken shape we probably want to navigate to other pages so let's give it a try let's click on your name oh my gosh it is throwing a 404 but notice that we're going to a URL contacts1 so inside our application if you scroll down we see our anchor tags when we click on the anchor tag it changes our URL to contacts SL1 the reason why it's not found is because we don't have any routes that represent that so let's go ahead inside our app folder create a new folder called routes and inside our routes let's create a new file and we're going to call it contacts. TSX and now let's create a very basic component here and I'm going to call it contact route and now let's go back to our application and notice when I go to/ contacts I don't see anything well the reason that we don't see anything is because we don't have a way to tell remix hey go ahead and show that route so the way you would fix this is by using Outlet so in order to make this work we're going to go ahead and import outlet from remix then we're going to use our Outlet by creating a div where we're going to pass all of our children routes so now let's make these changes in the code and see if we could see our newly generated route So within our root. TSX file let's go ahead and import our outlet and finally let's scroll to the bottom and after the sidebar div we're going to add another div with ID of detail and inside here we're going to add our Outlet let's refresh our application and noris you're now able to see our contact route we are making some excellent progress why don't you go make yourself some cup of coffee take a little break or tea or water whatever it is you like to drink and then when you're back we going to take a look at how to create Dynamic routes and use the link component to navigate see you in a bit all right let's jump back into it currently in our application we have two anchor tags which are our links so when we look at our application we have your name your friend these are the links that we just saw in code when I click them we still fail because we don't have a route that matches the URL route that we're looking to get so to fix this in our code we're going to create two addition routes so here I'm going to create a new file called contacts. one we'll use number one. TSX and then we're going to create another one new file called contacts. 2. TSX so looking at our link we are navigating to contact SL1 contact SL2 and that's exactly what we did here we Define our routes whenever you use the dot separator the routes that basically means contact SL one so that's what you want to go and let's go ahead add some basic jsx here so we could see it here so I'm going to say contact one route and then I'm going to copy this same example I'm going to go here and I'm going to say contact 2 route so now when we go back into our example and we click your name we get contact route contact two route it doesn't fail anymore but notice that we only see the contact route here and so the way we could fix this is two ways we could either remove it and then we'll either match contact one contact two or we could use this as a layout route and to make this a layout route I'm just going to say layout contact route and in order for us to render the items from our children routes we would need to use an outlet and let's put this under H1 just like so so now when we go back Norris we have our layout route and then we see both our your name contact one and your friend contact two so Norris when we are matching contacts and one we are matching the contacts that's why we're able to render this layout and then we're also matching one and that's why we would see contact one route inside there now for instance if you did not want to have a layout route you could just remove this and this is what we going to do for now so now when we go to your name we're just going to see just those routes for contact one and contact 2 but the issue is that this could be contact one this could be contact 32 this could be 57 and so the idea is like we don't want to continue to make routes from 1 to 50 or 70 however many items we might have so this case we want to use a dynamic route and the way we create a dynamic route is that we instead of passing a one we could signify a dynamic parameter by using dollar sign and we going to say contact ID and now when we do this we could remove this one and delete and I'm going to refactor this to say contact Dynamic route just so we could clearly know what route we're in and I'm going to say contact Dynamic route and so now when we go back to our application regardless if you go to your name your friend they're both going to render now that we know how Dynamic routes work and remix let's go ahead and set up our contacts ID TSX file by importing this existing code now if you're following via this documentation you could paste it from here but I'm also going to create these gist just with the code Snippets that you need and I'll make sure to have them in the link in the description below so make sure you copy the code and let's inside vs code in our contact id. TSX file and now let's go ahead and paste that Boiler code here and we'll go through it in a little bit but first let's check it out and see if it worked so now if we refresh our appc application norise for our Dynamic route we now see this boiler plate that we will update as necessary but before we could update it we need to learn how to load data so let's first review how you can use a loader function to add data to your remix application that you could get from either external API or from making a direct call to your database or in our case in this example application our dummy data in remix we have a load function that allows you to load your data so let's take a look at a basic implementation before we continue with this tutorial we can access a loader function by exporting it in our application so for instance here we're going to export a sync function call it loader and inside the return we could return the data that we want and right now we are returning this dami data but this loader function runs on the server and we could make an API call or call to the database to retrieve the data that we need once we declare our loader function next we're going to import our use loader data hook that allows us to get our data from the loader so notice how we are using use loader data hook and saving it to a data variable which will have our data so let's see how this is going to look in our code so inside our root. DSX file we're going to first import use loader data from remix then we're going to Define our basic loader function and in order for us to get that data we are going to use our use loader data hook and we're going to give it a type of loader so typescript doesn't complain and now let's go ahead and console.log our data and nor we get our data that we are passing from our loader function so now let's see how we could load all of our users to populate our left sidebar here so inside our root. TSX file first we're going to import get contacts from that data this is available in your application if you go inside that data and you search for g contacts you're going to see this function and what it's doing it's getting our data to populate our users and currently this data is stored in our app application but as we continue we'll show you how to get this data from our strappy API so now inside our loader function let's go ahead and use our get contact function so we're going to say const contacts and we're going to await our get contacts and we're going to go ahead and return now whenever you're returning items from the loader function it actually returns as a response so remix has a helpful function for us that allows us to return this response with all the appropriate headers within so that's what we're going to do we're going to say return contacts now when we take a look at our console log notice we get an array of all of our users so now let's update our return code to allow us to visualize the data that we just received you could find the code snippet inside the remix tutorial here and we're going to copy the contact next H code snippet here and we're going to paste inside of our application now if you're not following this tutorial which you should use it as reference I'm also going to have these gists that I'm going to put in the description below as well just so you could find the code Snippets if for some reason you can't find them so inside my application I am going to scroll down to our navigation here and I'm going to replace the code within the UL and I'm going to paste it in and we just have to rename our use load of data that we're getting here instead of data we're going to call it contacts and we could remove this console log and now when we navigate back to our application notice we have all of the items coming from our fake database which is pretty awesome so let's do a quick recap before we move on so to recap we imported our loader function that allows us to call a method that either connects to our database or makes an API request to get our data then we return our data using the Json method which allows us to return it as a response with all the appropriate headers you could learn more about it on the remix documentation but it is being imported from at remix dasr note package once we get that data back we're using the use loader data hook to save that data into contacts and then we iterating through those contacts mapping through them and rendering our links and this is what we see here so next we're going to take a look how we could click on any one of these individual links and notice as we click them the URL changes so in order to be able to display the items here in our Details page which we're going to create too we need to figure out how we could access the URL prams to allows to do that and that's exactly what we're going to do in the next section so from our root. TSX file let's go ahead and copy our loader function inside our contact id. TSX file which is our Dynamic route after line five let's go ahead and import our loader now if we take a look inside our data. file you're going to see that we have get contact method that expects an ID which is a string which will return one item for based on the ID that we pass so inside our context. id. TSX let's first go ahead and import our our get contact from data now let's refactor this to reflect that we're only getting one item now it's complaining that we did not import our Json method so let's go ahead and import it from remix and now we need to provide an ID so you're wondering where do we find the ID so the ID is based on this Dynamic attribute that we have so in the loader we have access to the params and typescript is going to complain because we need to import the pramps and you could import them from remix so we say we need type of loader function arcs and let's make sure that we add it here perfect so now typescript is not complaining and finally if we take a look at our params I'm just going to console log for now notice that we have an object and the key and the key is contact ID and then it has the name name of the item that we are searching for and if you're wondering where that name was defined it was defined here so anytime in our application when our URL pams change notice how they're changing here for instance I'm going to go to me Paul Browski right here if we take a look in our code notice the Pam that we get is Paul broslovski so now I'm able to access that so we're going to go ahead and here just going to do const contact ID equals param and we're pulling that contact ID and we're going to pass that contact ID to our method to get our data now right now it's complaining what if contact ID is not defined so we probably should do a check to see if it exists first you could find this package on npm and read more about what it does but it makes it an easy way for us to check if an item is falsy or not and if so it will throw an error so let's go ahead copy the install script in my terminal I'm going to paste the script in and install once the script installed I'm going to restart my project by running yarn Dev and now we could add a check to see if the params exist so we're going to use the invariant method we're going to pass the pam. contact ID if it doesn't exist we're going to return an error message and if so we're going to continue and notice how the error goes away whenever we return our contact Maybe we don't have any contacts so we should do a check so we're going to do if no contact found let's throw a new response with not found and return 404 some people like to do the if statement with the brackets but for me it just makes my brain feel much easier when I remove the brackets for on liners and in my mind it's just easier to read should you do this I don't know but this is what I'm going to do here and now that we are getting our contacts we're going to import our use loader data and inside our component we're going to go ahead and say cons contact equals use loader data type of data loader and we're going to remove this dummy text that we have here so now let's do a quick recap we are using our loader we calling our get contact method where we passing our ID that comes from our params if we don't have a contact we're going to throw a not found and if we do have a contact we're going to return it here inside our contact that we're going to pass to our code below so now let's navigate to a browser and see if it worked great look at this this works we are able to get all of our data coming from our phony data API so in the next video before continuing with this tutorial let's actually go ahead and set up strappy to show us how we could get data from an actual API endpoint this way you're going to have your front end with remix and you're going to have strappy as your back end so before we install strappy go ahead and grab another cup of coffee or tea or whatever you like to consume take a little breather take a little break think about all the things that we've done and then come back and we'll be ready to set up strappy to set up our API and you'll see it's going to go so quick because strappy allows you to create your API in minutes and I'm really really excited to show you how to do that all right and welcome back today we're going to take a look on how to set up strappy strappy allows you to create an API in minutes but what's awesome it's easy to get started but also if you need additional customization if you want to dive deep add additional functionality add extra middleware controllers policies you are able to do that but what's awesome for beginners you could get started with it right as it is to create an amazing backend for your project that's going to have this amazing admin area so just like we've been using our remix documentation strappy has amazing documentation as well so you could always reference it when you get stuck but we're going to jump right into it so it's very easy to get started we going to use the npx create strappy app at latest to get our project going so inside my terminal currently I'm in My remix folder so I'm going to move one level down into the root of my project and notice how we have our My remix app so now I'm going to use npx create strappy at app at latest and we're going to call it my strappy app just to stay consistent with our naming are they good names I don't know and you could choose quick start but I'm not going to do it just to show you some of the options that you'll see so this is going to ask do you want to get started yes sure yes let's download the following packages and install them once the process is all set you have the quick start option but you also have the custom options so let's take a look custom options allow you to choose if you want to use JavaScript or typescript in that case we're going to stick with JavaScript for the moment and here you have your options of different databases you could use sqlite postgress or MySQL I'm going to stick with sqlite yes that sounds good for the database uh that where to save the files locally and it's going to go ahead and create our strappy application now that our application has installed I'm going to to CD into my strappy project and I'm going to run yarn develop so because this is our first time starting our strappy application we have to create our first admin user so I'm going to do Paul Bratz from coding after 30@gmail.com let's do password monkey1 234 since this is running locally that sounds secure enough no one's going to guess monkey 123 forever let's click Start and now we we set up our strappy application and the dashboard so let's do a quick tour on content manager this is where you're going to see all your content types and collection types that you have created currently we have just the user collection type that has no users yet and if we take a look at the content type Builder this is where you actually are able to create new collection types content types which we'll learn more as we continue through this tutorial you could see that our user collection type here's some of the fields that it has username text email and so on and we will create a new collection shortly but first let's just finish up this quick little exploration of strappy admin area here we have our media library all your files that are stored in strappy will show up here afterwards we have our plugins if you have any additional plugins installed you're going to see them here and an example of a plugin for instance if you wanted to extend function on strappy and store your files in Cloud andary you could install strappy cloud andary plugin that allows you to do that and if you're trying to figure out where where to find these awesome plugins you could always check out the marketplace and if I say search for cloudinary and it's going to be a provider and here you could see the cloud provider and if you want to install you could copy the command and install it and then we going to take a look under settings we have our general overview all the details about our application a couple of different options the the ones that we're going to use most this tutorial is under rolls under rolls you are able to Define which endpoints have permissions and you could either say they're publicly meaning there's no authentication required or you could make them authenticated and this is something we'll dive into deeper with that being said let's go ahead and create our first collection type so in our current application if we go into Apps and we take a look at our data. file we're going to see our types for our contacts so we know that we need to have an ID a first name which is a string last name is a string we have an avatar which is a string which represents the URL for where we going to store the image then we have Twitter and notes and favorites is a Boolean so what we could do is we could actually create our strappy collection type for our users So within strappy application let's navigate to content type Builder and we're going to create a new collection if you have like many users many products you would create a collection type if you have let's say a single item like a settings page or what have you you could use create new single types but we're going to start here click create new collection type and we're going to call it contact and click continue and now you'll see all these different fields that you have available to structure your data for instance you have your text which is a string you have your Boolean you have your different editors available to you we have your Json data you could represent emails passwords numbers dates media enums UI ID different relationships and we have a markdown text editor as well as you could create components and Dynamics notes which we will talk uh much later when we work on our Cornerstone project after we are done with this remixes traion introduction so for this we're going to use text and for our first name we're going to say first and let's click another do another text field it's going to be last for the last name add another field let's take a look at what we have here so we did first we did last we have Avatar which is going to be for our image URL so let's do text say Avatar add another field uh we need Twitter let's copy Twitter um text also going to be for the Twitter feed and then we have notes so we're going to do text we're going to call it note I think it's notes or notes we have notes okay let's say we call it notes and it's going to be long text and let's see do we need anything else and yes we do so add another field and we going to have a bullion to signify that this is something that we favored it and I think that is all we need so check this out we're going to click finish click save and now when we take a look at our content manager we now see our newly created collection type contact so if I click on it create a new entry I'm able to add my information I'm going to say Paul Bratz I have a URL here for my image and I'm going to go ahead and say hello from strappy and we'll say true for our Boolean click save and publish so now if we want to give permission to users to be able to get this data we are going to go into settings under roles and we're going to say it's publicly available and now you're going to see all the different available API endpoints that we have and this is our newly created contact endpoint so if I click on it we're able to give permission for create delete find find one and update so we're going to go for both find and find one and click save and noise now that if we navigate to our strappy application endpoint / API contacts because we gave the permission we are going to see our API response so we literally created our back end and we now have a working endpoint that allows us to get our data so now let's see how we could get this data inside our remix application inside our data. s file we're going to make all the changes by the way in remix you could Define if your files run on the server or on the client for our data fetching file we want it to all run on the server so I could be specific by renaming this file data. server. TS and this is going to go ahead and it's going to run all this code server side which is awesome so now within our data. server. TS file let's refactor it a little bit we're going to delete this top part we're going to keep the type definition here for now and then let's scroll down to get contacts and let's delete everything from get contacts to the export type Here and Now within all of these functions that are getting that fake data we're actually going to delete all the code inside and just leave them as placement functions to make our changes to reflect getting data from strappy and I'm going to do it for update context as well and we're going to do it for delete as well and this array here we're going to save to our variable which we'll use later as reference and if you scroll all the way down to the end you're going to see that we have this dot for each we don't need it just remove it nice now that we have refactored our data. serts file we could start implementing our new code So within get contacts function we're going to go ahead and create a try catch block and if there's an error we're just going to cons log that error nice and within the tri block we're going to do cons three response and it's going to equal to await and we're going to use fetch once we fetch the data we going to get the Json so you're going to do data equals await response. Json and inside our fetch we're going to pass our strappy app URL and to that we're going to pend our endpoint which is going to be API SL contacts to get our data now let's add our URL variable basically I'll check do we have a strap URL andv parameter if we do use that if not default to Local Host which is perfectly fine and when we get this data from strappy if you look at the structure we have data ID attributes and so on but what I want to do is I want to flatten this response so we have the data object and instead of attributes we just have the attributes and this is helpful that if we were getting nested data it would also have data attribute data attribute and so on and so by flattening it it makes a little bit much more easier to use an our response I also like this idea of having an intermediary function that allows us to define the structure of our return so that way when we make changes in our API instead of having to redo our whole frontend we could just rewrite our transform function and I already have this flatten attribute function that I wrote that I'm going to share either in this gist or in a accompanying uh blog post which you could use when doing this tutorial as well as the final project and let's go ahead and paste this function above our URL here and we're going to minimize it so it doesn't act like a big eyesore and now here we going to do another variable called const Flat attributes data and that that's going to come from our flatten attributes function that we imported and it's going to get our data and this data object is going to have our data and our meta information so we just want the data and finally we're going to return our flattened attributes data response now because we updated this file to be called data. server. TS we need to navigate to root. TSX and make sure that we make that change we also did the same thing inside our contact ID TSX file so make sure that we rename the Imports accordingly so server and same thing do server so now let's see if we're able to get our strappy data I'm going to restart my strappy application by running yarn develop once your strappy instance is running go ahead and restart your remix app by running yarn Dev great now we're getting our data and where is this data coming from it's coming from our strappy application so check this out if I go to my strappy instance under contacts I click Paul and I'm going to change to my full last name and we're going to take the starway by setting this to false click save and when we go back to our application and refresh notice we have our changes so next let's fix us being able to get our single entry because right now if we click Paul rowski we get not found because currently we brought our application because instead of getting our dummy data we are now looking to pull data from strappy so let's go into the code and fix this first but first inside our strappy application let's go under settings roles public and click on contact whenever we found all of our items we use the find endpoint and that's found by going to API SL contact whenever we pass a parameter like one the ID of our contact it's going to look for that single entry and notice that instead of returning a array it returns an object so that's the endpoint we're going to look to use so if we could take a look here we need to go to API context and provide the ID so let's click save and within our code editor and navigate to data. server. TS file our endpoint code is going to be similar to this code that we have here so I'm going to copy it let's go to the get cont Texs by ID here I'm going to open this code block and I'm going to paste in our code and I must have missed the closing bracket there so let's go and add that we are going to be making a request to contact and the only difference is we now have to append our ID which we're going to get from this parameter everything else should be the same so now let's go ahead and navigate to our single uh contact ID page here and we we're still getting our params using our param attribute in our loader function and we're passing that ID to get contact so that should have been an easy fix we should now see the data now let's see if it worked so back in our app which originally was throwing a 404 let's refresh and notice now we are able to get our data so now before handling edit delete or start our user we want to have the ability to add the users so let's connect the behavior to our new button if we currently click our new button we get 405 method not allowed that's because we're going to use strappy to allow us create users and save them to our database so let's get started inside our code inside the app folder under root navigate to the submit button here instead of using a button here we're just going to have a link to a new form that we're going to create so we're going to say link to and we're going to link to contacts SLC create and we're going to say create currently this route doesn't exist so let's go ahead and make it inside our routes folder let's create a new file and we're going to call it contacts. create. TSX we're going to create a very simple placeholder component and we going to call it create route we could remove this react import since we're not using it and now that we have this place holder route we could test it so let's go back so in our application if I click new now we'll fix the styling in a little bit but let's check it out if we click create Norris now it takes us to a create route so let's add a class to our link here we're going to say class name equals button link and we're going to navigate to our app.css file found inside the app folder and we're going to copy some of these styl Lings for our new button link class so I'm going to say button link and we're going to copy all of this button code as well as this color and font weight now that we have our new button link class this should apply these changes to our new link component so notice that our create button looks pretty good it's almost done the last thing we need to do is remove the styling and under font weight let's do text decoration and it will be none and no our button now looks normal and when whenever we click create again it takes us to our create page so in our project let's navigate to our routes contact. create. TSX file here's where we had our placeholder text what we're going to do now just to make it easier for ourselves we're going to paste a snippet all the Snippets I will make sure to link in the description of the video to All the gists that I'm using and in this case it is a remix create form starter I'm going to click raw do contrl a copy all to select select all the code and contrl + C to copy and then let's navigate back to our code editor and paste it in all this does is paste our basic boiler plate that we need for this form I created a form input component and basically is just a flexible component to allow us to quickly Define our input elements but the part that you want to focus on is the our input is using the name attribute that's very important if you notice we don't have any use state or use effect or any react ways to create a controlled form where we passed a unchange so you're wondering where well how are we getting our form data well we're using standard web form API so whenever you submit a form it's going to pass the values in the URL so we'll have the name plus the value that we have in the form so let me just show you what I mean before implementing the Code remix handles form submission similar the way it is done traditionally using the form tag this may be unfamiliar to some newer developers but HML form causes navigation similar to link the only difference is that you have the ability to change the request method get via or post so let's take a look at what this means here's a simple form example and this is using the classical way of just submitting the form and the action refers to an endpoint which is going to do something with the data in this case they're using get the form data can be sent either as a URL variable when using method get or as a HTTP post transaction when using method post when using the get request and this is the example we're going to take a look at the form data will be appended to the URL if we were to make a post request that form data would be appended to the body of the HTTP request so if we take a look at this example when I put Paul Bratz and click submit notice that in the URL our form data is being passed inside our code if I do action equals test and Method equals get let's try submitting our form so within our application we're going to do Paul Bratz and click create since this test standpoint does doesn't exist we see four or four not found but you could see that we have our first name Paul and last name Bratz remix has a form component that basically does the same thing the only difference is except of sending the request to the server it uses the client side routing and sends it to the routes action function which we're going to talk about in a little bit so let's take a look at this quick remix example whenever you want to create delete or update data on your website we will be making a post request so we have our basic form already set up so the next thing we need to do is create an action in this case they're defining an action in a separate file but we're actually going to Define our action inside the same file that we're working so in order to create a function we just need to export a sync function called action so let's go ahead and do that inside my code I'm going to type export uh sync function and it's going to be called action and we have the request available to us and we do need to import action function arcs type so let's go ahead and do that we're going to say request and let's import type action function arcs now we're able to access our form data from our request object so we're going to say await request. form data there's multiple ways to get the data but we're going to use the simplest one we're going to say cons data equals and we're going to use object. from entries and we're going to pass in our form data and all we're going to do is just return our data in order to see the response from our action we need to use a hook and the hook is called use action data so under navigate I could do const form data equals use action data and let's con log it so currently it's going to be undefined because we don't have any submissions to our form so let's import form and here we're going to replace the HTML element with the remix form method is going to be post and we're not going to Define an action whenever you don't Define an action wherever the form is submitted it's going to go ahead and look for the nearest declared action that we have in the same file so now let's give this a test so my application I'm going to say Paul Bratz at Twitter HTTP some image. JPEG and hey so now that we click create we don't visually see anything here but let's check out our conso log notice that we have the output for our data first name Paul last name Brad Twitter Avatar and our note and that's all coming from our form and so the recap quickly before we continue whenever submitting forms and remix we're literally using the traditional method of submitting forms we Define what type of request we want in this case is post when we're using the post request as we learned the data will be appended to our body of the htttp request and we have access to it in our request so in remix when we were submitting the form we were able to get the data using the form data method on the request and save it so now that we're able to get our form data to our action we will be able to make an API call to save the data to DB using strappy and that's exactly what we're going to do next so taking a look at a strappy application if you go to settings under roles take a look under public permissions we're going to look at contacts and we're going to enable create and basically in order to post data to strappy we just need to make a post request to this API endpoint so let's save to enable our ability to create posts and before we add the code let's check the strappy docs you could navigate to strappy website click get started and it's going to take you to the docs we're going to scroll down to apis and click on rest API introduction and here you can get more information on how all the different endpoints work for instance if you want to make a get request post request to create an item that's what we're going to look at now how to make get requests put requests and delete so let's create create entry here it's going to take us to an example to take a look what we need to do and basically we need to make a post request to the endp that we specified in our case is going to be API contacts and noise how we need to wrap it in data object and pass our attributes inside there and that's exactly what we're going to do and when the data is submitted correctly you are going to get a response that we could check if we successfully submitted the form or return some errors that we're going to take a look in a little bit so now let's go back into our code and let's navigate to our data. server. TS file and the good news we're going to follow very similar pattern here so I'm going to go to the get cont conts and I'm going to copy this whole try and catch block because it's going to be very similar and we're going to navigate to uh create empty contact and this is actually going to be renamed to create contact because we're not going to create an empty contact we're going to create actual contact and so what we're going to pass inside here is our data and our data is going to be any right now we'll come back and add typing later uh but for now let's just get stuff to work and it's going to be a post request to our API cont contact so if you don't pass any second parameters on fetch it will automatically make a get request but we want to make a post request so we going to add an additional object where we going to pass the information that we need so we're going to say method is going to be post then we have to Define headers it's going to be an object so now let's define the content type I can't speak and type at the same time it's okay and it's going to be application Json and finally the last thing we need to do is pass our body and we're going to wrap our data within a data object just like we saw in the docs and we're going to D structure our data that we're passing into our form and then the most important thing we need to wrap this in json. stringify to stringify our data being sent and then this is complaining here no big deal we're going to change it to response data and then we going to change this to response data perfect and then everything else should be all set so basically what we're going to do we're going to make a post request to our API conts endpoint to allow us to send data that we get from our form to make a new entry so now let's go ahead and add it to our contact create form so we're going to remove our con log here and we're going to say const new entry is going to await create contact and into our create contact we're going to pass our data object and now let's import create contact import create contact from our data. server.js file and finally we're going to just return new entry and we're going to cons selct the response after our data is created and currently right now there's a couple of things we do need to add for instance we should probably have form validation which we'll do next and probably if there's a successful entry creation we should probably redirect but for now we're just going to test that it works to see that we're posting data to our strappy endpoint and just make sure that we're able to get the conso logged in the response so let's go ahead to our front end application we're going to navigate to our create form I'm going to say test test test and that's fine for now we'll leave the other one blank it's no big deal right now we click create so noris it posted our data uh because we were able to create it and let's just check inside our strappy instance navigate to content manager to contacts and notice that we are able to post and what I hope that you really appreciate it is the fact that when we added a new item without doing anything remix was smart enough to be able to automatically refresh your sidebar we didn't have to store anything in context or state it just smart enough to do it so if we create a new entry let's say test two we say create boom it's right there so notice that we're able to get our data and so norce we didn't pass a image maybe we should check that passing image is required so we run into erors like this so next we're going to take a look on form validation to improve our create form form all right we're making amazing progress so next let's add some form validation to our form and to to do this we're going to simplify the process by using Zod Zod is a library that allows you to add form validation very very easily or object validation so we're going to go ahead and first install it so I'm going to click on copy and paste the command in my terminal inside our remix app we're going to run the command and install it then let's restart our application by running yarn Dev next inside our application let's go ahead and import Zod fantastic and now we able to use it so let's navigate to Zod homepage from our npm and let me make this bigger and then we're going to get to uh basic usage here and here just shows you kind of like the basic uh thing that we're going to do here we import side and then we're going to create a basic uh schema that's going to Define our structure for our form data and here we could take a look all the different checks we could do we could