A simple records system using MongoDB, Express.js, React.js, and Node.js with real-time CRUD operations using Socket.io https://mern-crud-mpfr.onrender.com
  • JavaScript 56.9%
  • HTML 27.4%
  • CSS 13.4%
  • Dockerfile 2.3%
Find a file
Repository files (latest commit first)
Filename Latest commit message Latest commit date
Ceferino Jose II 00031a4488
Merge pull request #132 from cefjoeii/docker-fix
Fix Docker container startup
2026-09-18 03:11:46 +08:00
config Update config.js to fall back to localhost mongodb 2026-09-04 02:57:19 +08:00
models Update packages to their latest compatible versions 2026-09-04 02:57:37 +08:00
public Update front-end packages for housekeeping 2026-09-04 03:16:48 +08:00
react-src Merge branch 'develop' into fix-repo-mern-crud-cve-2026-9277-shell-quote 2026-09-11 23:32:58 +08:00
routes Changed from findByIdAndRemove to findByIdAndDelete, bcoz it was discontinued, in the newer version. 2026-09-03 01:33:08 +05:30
.dockerignore Update .dockerignore 2026-09-18 01:18:03 +08:00
.eslintrc.json Add ESLint config file 2017-07-25 17:28:42 +08:00
.gitattributes Initial commit 2017-07-18 01:37:49 +08:00
.gitignore Ignore .env file 2024-10-04 01:56:43 +08:00
CONTRIBUTING.md Add CONTRIBUTING.md and update instructions 2017-09-17 10:23:23 +08:00
docker-compose.yml Pin mongo version to fix docker compose 2026-09-15 03:46:17 +08:00
Dockerfile Add CMD to Dockerfile 2026-09-15 02:34:11 +08:00
LICENSE Add LICENSE 2017-07-24 20:10:58 +08:00
package-lock.json Update packages to their latest compatible versions 2026-09-04 02:57:37 +08:00
package.json Update packages to their latest compatible versions 2026-09-04 02:57:37 +08:00
README.md Add .env instructions 2026-09-02 02:40:21 +08:00
screenshot.png Add a screenshot 2017-07-26 21:00:03 +08:00
server.js removed io.connect() as it is removed in socket.io v3 & added cors policy for socket.io 2024-01-13 20:29:24 +05:30

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.

Demo: https://mern-crud-mpfr.onrender.com

MERN CRUD Screenshot

Support

Follow on GitHub GitHub Stars GitHub Forks GitHub Watchers

Instructions

Fork, then download or clone the repo.

git clone https://github.com/<your-user-name>/mern-crud.git

Back-end

Install the dependencies via the terminal.

npm install

Create a .env.local file with values like:

DB=mongodb://localhost/mern-crud
PORT=3000
CORS=1

Run the server.

node server

View http://localhost:3000 on the browser.

Front-end

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

cd react-src

Install the dependencies required by React.

npm install

Create a .env.local file with values like:

REACT_APP_API_URL=http://localhost:3000

Run the development server for React.

npm start

View http://localhost:4200 on the browser.

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

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

docker-compose up

Contribute

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

To Do

  • Create
  • Read
  • Update
  • Delete
  • Real-time broadcast using Socket.io
  • Deploy in Heroku
  • Front-end validation (HTML)
  • Unit Tests

License

MERN CRUD is available under the MIT license. See the LICENSE file for more info.