SuperCrud – [MERN] Node React Crud Builder

Introduction to SuperCrud - MERN Node React Crud Builder

SuperCrud is a powerful and versatile tool that allows you to quickly build CRUD (Create, Read, Update, Delete) applications using the MERN (MongoDB, Express, React, Node.js) stack. With SuperCrud, you can create complex data-driven applications with minimal code and maximum efficiency.

In this tutorial, we will take you through the process of setting up and using SuperCrud to build a complete CRUD application. We will cover the installation process, setting up the database, creating the API, and building the React frontend.

Prerequisites

Before you start, make sure you have the following installed on your system:

• Node.js (version 14 or higher)
• MongoDB (version 4 or higher)
• npm (package manager for Node.js)
• Yarn (optional, but recommended for package management)

Step 1: Install SuperCrud

To install SuperCrud, run the following command in your terminal:

npm install supercrud

This will install SuperCrud and its dependencies.

Step 2: Create a new project

Create a new directory for your project and navigate to it:

mkdir mycrudapp
cd mycrudapp

Initialize a new Node.js project using npm:

npm init

Follow the prompts to set up your project.

Step 3: Set up the database

Create a new MongoDB database and collection. You can use the MongoDB Compass tool to create a new database and collection.

In your project directory, create a new file called database.js and add the following code:

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost/mycrudapp', { useNewUrlParser: true, useUnifiedTopology: true });

const db = mongoose.connection;

db.on('error', (err) => {
  console.error(err);
  process.exit(1);
});

db.once('open', () => {
  console.log('Connected to MongoDB');
});

This code sets up a connection to your MongoDB database.

Step 4: Create the API

Create a new file called api.js and add the following code:

const express = require('express');
const app = express();
const supercrud = require('supercrud');
const mongoose = require('mongoose');

app.use(express.json());

const User = mongoose.model('User', {
  name: String,
  email: String,
});

supercrud(app, User, {
  // Define the CRUD operations
  create: {
    fields: ['name', 'email'],
  },
  read: {
    fields: ['name', 'email'],
  },
  update: {
    fields: ['name', 'email'],
  },
  delete: {},
});

app.listen(3000, () => {
  console.log('API listening on port 3000');
});

This code sets up an Express.js API that uses SuperCrud to handle CRUD operations for the User model.

Step 5: Build the React frontend

Create a new file called index.js and add the following code:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

Create a new file called App.js and add the following code:

import React, { useState, useEffect } from 'react';
import { Link, useHistory } from 'react-router-dom';
import { SuperCrud } from 'supercrud';

const App = () => {
  const [users, setUsers] = useState([]);
  const [user, setUser] = useState({});
  const history = useHistory();

  useEffect(() => {
    const fetchUsers = async () => {
      const response = await fetch('/api/users');
      const data = await response.json();
      setUsers(data);
    };
    fetchUsers();
  }, []);

  const handleCreate = async (user) => {
    const response = await fetch('/api/users', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(user),
    });
    const data = await response.json();
    setUsers([...users, data]);
  };

  const handleUpdate = async (user) => {
    const response = await fetch(`/api/users/${user._id}`, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(user),
    });
    const data = await response.json();
    setUsers(users.map((u) => (u._id === user._id? data : u)));
  };

  const handleDelete = async (user) => {
    const response = await fetch(`/api/users/${user._id}`, { method: 'DELETE' });
    setUsers(users.filter((u) => u._id!== user._id));
  };

  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map((user) => (
          <li key={user._id}>
            {user.name} ({user.email})
            <Link to={`/users/${user._id}/edit`}>Edit</Link>
            <button onClick={() => handleDelete(user)}>Delete</button>
          </li>
        ))}
      </ul>
      <button onClick={() => history.push('/users/create')}>Create New User</button>
    </div>
  );
};

export default App;

This code sets up a React frontend that uses SuperCrud to fetch and display the list of users, and handle CRUD operations.

Step 6: Run the application

Run the following commands to start the API and React frontend:

node api.js
npm start

Open your web browser and navigate to http://localhost:3000 to see the list of users. You can create, read, update, and delete users using the CRUD operations.

That's it! You have now set up and used SuperCrud to build a complete CRUD application using the MERN stack.