#Mern stack architecture diagram install#
#Mern stack architecture diagram code#

#Mern stack architecture diagram code#

You're using find() here and getting a success code of 200. To get the data from the database, create a GET endpoint to /dating/cards. If it is successful, you will be assigned status 201 otherwise, you will be assigned status 500. The load is sent to MongoDB via req.body. Create a POST request to the /dating/cards endpoint in Card.js. In the routes folder, make a folder called routes. When you browse through the posts in Dev.to, for example, a GET request is sent to the endpoint, which retrieves all posts from the Dev.to database. The GET endpoints retrieve all database data. If you write an article on Dev.to and then hit the POST button, your article is saved in the Dev.to database once the POST request is made. Then, use a POST request to send any data from the user to the database. MVC pattern is followed here it is the traditional flow of a web application. You now use the schema to create the endpoint that adds data to the database. Make a Cards.js file with the following content. It consists of a named object and imgUrl keys. It describes how fields in MongoDB are stored.Ĭards are regarded as a collection name in this context, and a value such as cardSchema is stored in the database. You create the schema file that MongoDB requires. MongoDB stores data in JSON format rather than the traditional table structure found in traditional databases such as Oracle. You must create a database user and grant network access in MongoDB.

#Mern stack architecture diagram install#

Install Express and Mongoose in the API folder using the terminal. Then, in the terminal, type npm init -y to create a package.json file.Īfter that, you must install two packages before proceeding. Let's get started with the Node.js code on the back end. The following step is to style the buttons, and the code for doing so is provided below. It must also be included in the App.js file. Inside the components folder, create two files: Swipe.jsx and Swipe.css. Because it is a simple app, they will not function. These buttons complement the app's design.

Let's now make the Swipe component, which is the footer button. Use the imgUrl background image and display the name in the h3 tag when looping through each person. The functions swiped and outOfFrame are required. The props mentioned in the react-tinder-card documentation are used here.

Import DatingCard and use it as a component next. You store the names and images of four people inside a people state variable. The commands to accomplish this are as follows:Įnter fullscreen mode Exit fullscreen modeĪfter that, paste the content into DatingCards.js. To make a new app called dating-app-frontend, use create-react-app. Let's start with the front end of React and then move on to the back end.Ĭreate a dating-app-mern folder in your terminal. In the following section, we will talk about the technologies we are going to use. Sound knowledge of JavaScript ,Reactjs and Nodejs. The following are required to complete this tutorial: In the following section, we will look at some of the prerequisites for this tutorial. We will use MongoDB to store users & messages, Express to build the API, ReactJs for the web app, and Socket.IO to enable real-time communication between users. It is fast, efficient, and can be used to build complex and responsive user interfaces.įor the Backend side, we will focus on building it using Node.js. React.js is a popular JavaScript library for building user interfaces.

In this article, we will build the front end of our dating app using React.js. We're going to build a dating app with the MERN stack the web app has simple functionality (see below for a screenshot of the finished app) all data comes from a MongoDB database, with API endpoints set up in Node.js.