A Simple MERN Full Stack Application

A simple MERN Full Stack application which will record and show the user Details.

This are the Output Screens for MERN application and you can also look at the MERN Full Stack website: React App (mern-full-stack-userinfo.netlify.app)

Get Started…

For creating a REST API for CRUD Operations, follow this page which helps you to create the backend part (REST API).

REST API using MongoDB, Express.js and Node.js

This page will help you to create a Cars details, But for this project we are creating User Details.

Just replace the schema file with the new one. From the above link we created like:

Need to Replace with:

And need to replace the names in get/post like:

Run the server and host the application in Heroku.

Now Lets start with React.Js

Lets create a react project:

npx create-react-app simple_mern_app

Lets install some packages

1. React-router-dom

npm i react-router-dom

2. Axios

npm i axios

Lets Start:

• In app.js add the router to your apps:

• In Home.js we are adding a Navbar, Add Details Button, UserDetails_info and also navigating to AddDetails screen when the user click Add Details button.

• In Navbar.js file just a simple underorder list with the title of app in list

• In Main.js file we are creating a table which will have the user details, which are retrieved from the API. This will shown the data in tabular form.

• In AddDetails.js file we are creating a form which will take the Name, Full Name, Address, Phone Number and Email and when the user click submit the data from the form will be pushed into the app using axios.post and after posting the it will need to redirect to Main Page.

Here e.target.{name}.value will be the value which we entered in form and {name} will be the name props in input type.

• Finally Styling the page make your own changes or keep this css file App.css
• Run the application by using:

npm start

• Which will start the server and project will be running in the browser.
• If you want to host the application you can do it in Netlify.
• For hosting the application we need to move our application to deployment for that we need to do:

npm run-script build

Which will create you a build file. Now open netlify and drag and drop the build file and after few minutes the application will we hosted and it will be public..

You can also look at page : React App (mern-full-stack-userinfo.netlify.app)

Thanks for reading the article…

That’s all for this application..
and you just created a simple MERN Full Stack Application……