CRUD in React & Node

A simple full-stack CRUD (Create, Read, Update, Delete) application for managing user records — built with a React frontend and a Node.js/Express backend, using MongoDB as the database.

Overview

This project demonstrates a basic user management system where you can add, view, edit, and delete users. It's split into two independent parts that run separately:

• backend-logic/ — A REST API built with Express and MongoDB (Atlas), responsible for all data operations.
• reactcrud/ — A React (Create React App) frontend that consumes the API and provides the user interface, styled with Bootstrap and React Bootstrap.

Tech Stack

Backend

• Node.js, Express
• MongoDB (via the official mongodb driver)
• Nodemon (for development auto-reload)

Frontend

• React 18
• React Router DOM v6
• Axios (API calls)
• React Bootstrap / Bootstrap
• React Data Table Component (for the user list)

Project Structure

crudinreactnode/
├── backend-logic/        # Express + MongoDB API
│   ├── controllers/       # Request handling logic
│   ├── models/            # Database models
│   ├── router/            # Route definitions
│   └── main.js            # App entry point
└── reactcrud/             # React frontend
    └── src/
        ├── components/     # UI components (Users, common layout)
        └── routes/         # App routing

Getting Started

Prerequisites

• Node.js and npm installed
• A MongoDB connection (Atlas or local)

1. Backend Setup

cd backend-logic
npm install

Create/update the .env file with your configuration:

PORT=5000

Start the server:

npm start

The API will be available at http://localhost:5000.

2. Frontend Setup

In a new terminal:

cd reactcrud
npm install
npm start

The app will open at http://localhost:3000 (or the next available port).

Note: Make sure the backend is running before starting the frontend, since the UI calls the API directly at http://localhost:5000.

API Endpoints

Method	Endpoint	Description
GET	/user_list	Fetch all users
POST	/add_user	Add a new user
POST	/find_user	Find users by field(s)
POST	/delete_user	Delete a user
PUT	/update_user	Update an existing user

Requests are expected in application/x-www-form-urlencoded format.

Available Scripts

Backend (backend-logic/)

• npm start — Starts the server with Nodemon (auto-restarts on file changes)

Frontend (reactcrud/)

• npm start — Runs the app in development mode
• npm test — Runs the test suite
• npm run build — Builds the app for production

Author

Rohit Yadav