Giter Club home page Giter Club logo

mern-crud's Introduction

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

mern-crud's People

Contributors

cefjoeii avatar

Watchers

 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.