https://github.com/cefjoeii/mern-crud

A simple records system using MongoDB, Express.js, React.js, and Node.js with real-time CRUD operations using Socket.io
https://github.com/cefjoeii/mern-crud

express mern mongodb node react rest-api socket-io

Last synced: about 1 month ago
JSON representation

A simple records system using MongoDB, Express.js, React.js, and Node.js with real-time CRUD operations using Socket.io

• Host: GitHub
• URL: https://github.com/cefjoeii/mern-crud
• Owner: cefjoeii
• License: mit
• Created: 2017-07-17T17:19:07.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2025-03-25T20:44:13.000Z (3 months ago)
• Last Synced: 2025-04-06T08:09:42.740Z (3 months ago)
• Topics: express, mern, mongodb, node, react, rest-api, socket-io
• Language: JavaScript
• Homepage: https://mern-crud-mpfr.onrender.com
• Size: 3.69 MB
• Stars: 753
• Watchers: 36
• Forks: 516
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# MERN CRUD

A simple records system using MongoDB, Express.js, React.js, and Node.js with real-time Create, Read, Update, and Delete operations using Socket.io.

REST API was implemented on the back-end. Semantic UI React was used for the UI in the front-end.

![Node Version](https://img.shields.io/badge/node-v20+-green.svg)

![NPM Version](https://img.shields.io/badge/npm-v9+-blue.svg)

![MongoDB Version](https://img.shields.io/badge/mongodb-v7+-yellowgreen.svg)

![Mongoose Version](https://img.shields.io/badge/mongoose-v7+-red.svg)

Demo: [https://mern-crud-mpfr.onrender.com](https://mern-crud-mpfr.onrender.com)

![MERN CRUD Screenshot](screenshot.png)

## Support

[![Follow on GitHub](https://img.shields.io/github/followers/cefjoeii.svg?style=social&label=Follow)](https://github.com/cefjoeii)

[![GitHub Stars](https://img.shields.io/github/stars/cefjoeii/mern-crud.svg?style=social&label=Star)](https://github.com/cefjoeii/mern-crud)

[![GitHub Forks](https://img.shields.io/github/forks/cefjoeii/mern-crud.svg?style=social&label=Fork)](https://github.com/cefjoeii/mern-crud/fork)

[![GitHub Watchers](https://img.shields.io/github/watchers/cefjoeii/mern-crud.svg?style=social&label=Watch)](https://github.com/cefjoeii/mern-crud)

## Instructions

Fork, then download or clone the repo.

```bash

git clone https://github.com//mern-crud.git

```

The *config* folder contains a file named *config.js*. Before running locally, change the value of `db` as seen in the code below. *Make sure MongoDB service is running.*

```js

module.exports = {

  db: "mongodb://localhost/mern-crud",

  react_app_url: "http://localhost:4200"

};

```

## Back-end

Install the dependencies via the terminal.

```bash

npm install

```

Run the *main server*.

```bash

CORS=1 node server

```

View [http://localhost:3000](http://localhost:3000) on the browser.

## Front-end

If you want to modify the front-end, go to *react-src* folder via the terminal.

```bash

cd react-src

```

Install the dependencies required by React.

```bash

npm install

```

Run the *development server* for React.

```bash

REACT_APP_API_URL=http://localhost:3000 npm start

```

View [http://localhost:4200](http://localhost:4200) on the browser.

To make a production build, simply run on *react-src* folder via the terminal.

```bash

npm run build

```

It re-creates a folder named *public* on the root directory. This is where the production-ready front-end of the web application resides.

## Docker

```bash

docker-compose up

```

## Contribute

Feel free to help out as I may have other work/life commitments. See [CONTRIBUTING.md](CONTRIBUTING.md).

## To Do

- [x] Create

- [x] Read

- [x] Update

- [x] Delete

- [x] Real-time broadcast using Socket.io

- [x] Deploy in Heroku

- [x] Front-end validation (HTML)

## License

**MERN CRUD** is available under the **MIT** license. See the [LICENSE](LICENSE) file for more info.