How to Create a React.js Support Ticketing System Using MongoDB

How to Create a React.js Support Ticketing System Using MongoDB  #mongodb

  • const TicketSchema = new Schema({ name: { type: String, required: true }, email: { type: String, required: true }, status: { type: String, required: true }, message: { type: String, required: true } }, { timestamps: true });
  • Make sure that your action types have the appropriate actions available and import them so that your action can dispatch it.
  • Our API endpoint is going to point to a function inside a controller file that will save the data received from our client into our mongoDB. Go ahead and create a controller for our tickets, controllers/_ticket-control.js .
  • Creating a form and sending the data to an action
  • The Axios post request sends an object containing the name, email, and message.

What this tutorial will do is show you how to use Mongoose to save information into a MongoDB and use Axios to send information from your client to your API

@scalegridio: How to Create a React.js Support Ticketing System Using MongoDB #mongodb

09 August 2016 on tutorial, api, mongodb, react, axios

In the last article I wrote we talked about how to create a Redux-Form inside a React/Redux application. Now I want to put that form to work for us, and create a simple support ticketing system using a Node.js/Express server and Mongoose to talk to a MongoDB. This will get us some good working knowledge of how to use Redux-Form, but more importantly, we’ll work with Mongoose and API’s in general.

Warning: This tutorial only covers specific elements of the MERN stack process. As such it won’t go into much detail on actions, action types, reducers, or even Redux and React. What this tutorial will do is show you how to use Mongoose to save information into a MongoDB and use Axios to send information from your client to your API. If that’s alright with you, let’s get buckled in!

You’ll be able to view the entire tutorial at this gist.

What do we need to get started?

You’re going to need both an API and a Client side application for this project. You can get started with creating your first API with this tutorial and you can also break into a simple “hello world” React app with this one.

You are also going to need a MongoDB to work with. You can set one up locally, but I would recommend heading over to mLab where you can create a free sandbox to play with.

. Inside this file, we want to import some basic dependencies, define them, and then export the TicketSchema.

property for things like the user’s email and their message. I’ve gone ahead and populated a schema for this tutorial:

parameter I specified at the end is a nifty little tool that will store information like when the ticket was created, and when it was modified. It’s all handled directly inside MongoDB.

data that we received by saving what we anticipate being in them to variables for later use.

You’ll notice that you then incorporated some error handling to make sure that the client is sending all of the information that is going to be needed. Should these conditions fail to be met, it will simply stop the function and return a 422 error and describe what was missing.

to save it into our document. Some more error handling follows this if something should go wrong, but if it’s a success we send the 201 and a success message.

file.

Also be sure that you’re installing and importing mongoose:

, and call the proper function from there:

And with that, our API is all set up to receive our new ticket from a troubled user!

next.

file (or wherever you’re storing your action creators) let’s build out a post request with Axios. Make sure that your action types have the appropriate actions available and import them so that your action can dispatch it.

and directing it to the route we created earlier we are able to pass data to the function that will save this data in our database. The Axios post request sends an object containing the name, email, and message. Then when it receives the 201 response from our server it dispatches the action type and passes the payload to our reducers to update the app state with the success message.

All done!

This tutorial covered a lot of topics pretty quickly. You created a schema that defined what your support tickets were going to look like, then you allowed an API call to save a new ticket into your Mongo database. You also created a connection between your client and your server with Axios that sends your Redux-Form properties. All in all a pretty good day!

This concept can be manipulated in a number of ways to handle various situations, like saving just about anything to your database. Using this method to save user information is not recommended though as it does not include any encryption for their passwords. It is nonetheless an efficient way to handle simple (nonreal-time) messages, events, contacts, or support tickets.

Thanks for reading, if you have questions don’t be afraid to ask below. Your feedback is appreciated as well so that I can continue to improve these tutorials. If you have any suggestions for topics, please leave those as well!

Until next time, happy coding!

You can view the source code for this entire tutorial at this gist.

How to Create a React.js Support Ticketing System Using MongoDB