Git Product home page Git Product logo

mongodbexpressreactnodejsreference's Introduction

MongoDB Express React NodeJS (MERN) Reference Implementation

This is an example implementation of a restaurant review application using the Express, Node.JS, React and MongoDB (MERN) stack.

The following technologies are used:

  • MongoDB Atlas for the database
  • Express and Node.JS for the backend API
  • React for the client

Prerequisites

The following are required:

  • MongoDB Atlas account with the sample dataset loaded onto a cluster (includes database sample_restaurants)
  • Node.JS (tested with v12.18.0)

The backend and frontend are setup with npm and npx

Backend

Create with npm

$ mkdir backend
$ cd backend
$ npm init -y

The following modules can then be installed

$ npm install express cors mongodb dotenv
$ npm install -g nodemon

Configure the .env file with the MongoDB Atlas connection URL. This should point to the example sample_restaurants database that is available to install when a cluster is setup.

The URL can be obtained within the MongoDB Atlas UI. Select the cluster > Connect > Connect your application.

RESTREVIEWS_DB_URI=mongodb+srv://[username]:[password]@[cluster]/sample_restaurants?retryWrites=true&w=majority
RESTREVIEWS_NS=sample_restaurants
PORT=5000

Frontend

Create with npx and install the necessary frameworks.

$ npx create-react-app frontend
$ npm install bootstrap
$ npm install react-router-dom
$ npm install axios

Running this Implementation

Start the NodeJS and Express Backend

Run

$ nodemon server

Nodemon will listen for file changes and automatically update the application without needing to restart. The server starts on port 5000.

Start the React Frontend

Run

$ npm start

File changes will be picked automatically without the need to restart. The application starts on port 3000.

Visit http://localhost:3000.

mongodbexpressreactnodejsreference's People

Contributors

drm317 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.