Skip to content

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

License

Notifications You must be signed in to change notification settings

TanawutWatthana/mern-crud

 
 

Repository files navigation

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.

Demo: https://mern-crud.herokuapp.com/

MERN CRUD Screenshot

Instructions

Download or clone.

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

Make sure MongoDB service is running.

The config folder contains a file named db.js. Before running locally, change the value of db as seen in the code below.

module.exports = {
  db: 'mongodb://localhost/mern-crud'
};

For the back-end, install the dependencies once via the terminal.

npm install

Run the main server. It listens on port 3000.

node server

View it on the browser.


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

cd react-src

Install the dependencies required by React once.

npm install

Run the development server for React. It listens on port 4200.

npm start

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

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.


To Do

  • Create
  • Read
  • Update
  • Delete
  • Real-time broadcast using Socket.io
  • Deploy in Heroku

Future Plans

  • Search
  • Front-end validation; Pure back-end validation is expensive
  • Routing / redirecting / whatever
  • Learn Redux
  • Learn creating tests

License

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 91.6%
  • HTML 7.1%
  • CSS 1.3%