A Simple MERN Full Stack Application

npx create-react-app simple_mern_app
  1. React-router-dom
npm i react-router-dom
npm i axios
  • 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.
  • 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

--

--

--

Full Stack Developer [Web | Mobile]

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to Build NodeJS REST API with Express and PostgreSQL

Track User’s Location and Display it on Google Maps

Javascript For…In Loops: Pt.2

Day 3/100daysofK8s

Array

My First Open Source Contribution

Conclude an auction

Difference between JavaScript array methods

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Aravind Kumar Vemula

Aravind Kumar Vemula

Full Stack Developer [Web | Mobile]

More from Medium

How to get started with MERN

Introduction to NodeJS & creating the first NodeJS application

Complex Payment Flows Using Stripe Payment Intents — A ReactJS & NodeJS Guide

Develop Full-Stack web application using MERN Stack