MERN Stack CRUD Operations

This project demonstrates CRUD (Create, Read, Update, Delete) operations using the MERN stack (MongoDB, Express.js, React.js, Node.js). The application allows users to manage data (such as a list of items, users, etc.) by performing these operations through a user-friendly interface.

Table of Contents

• Introduction
• Tech Stack
• Features
• Prerequisites
• Installation
• Usage
• File Structure
• API Endpoints
• Screenshots
• Contributing
• License

Introduction

This is a basic MERN stack application to demonstrate CRUD operations with a simple example (e.g., managing a list of users or products). The backend is built using Node.js and Express.js to create RESTful APIs, and MongoDB is used as the database. The frontend is developed with React.js to display and interact with the data.

Tech Stack

• MongoDB: NoSQL database to store the data.
• Express.js: Web framework for Node.js, handling routing and middleware.
• React.js: Frontend library for building user interfaces.
• Node.js: Runtime environment to execute JavaScript on the server side.
• Mongoose: Object Data Modeling (ODM) library for MongoDB and Node.js.
• Axios: Promise-based HTTP client for the browser and Node.js.

Features

• Create: Add new items to the database.
• Read: Retrieve and display a list of items.
• Update: Edit existing items.
• Delete: Remove items from the database.

Prerequisites

Before you begin, ensure you have the following installed on your local machine:

• Node.js (v12+)
• MongoDB (either installed locally or via MongoDB Atlas)
• Git

Installation

Follow these steps to set up and run the project locally:

1. Clone the repository:

   git clone https://github.com/yourusername/mern-crud.git
   cd mern-crud

2. Backend Setup:

   • Navigate to the backend directory and install dependencies:

     cd backend
     npm install

   • Create a .env file and add your MongoDB URI (if using MongoDB Atlas) or local MongoDB configuration:

     MONGO_URI=mongodb://localhost:27017/yourdatabase
     PORT=5000
     

3. Frontend Setup:

   • Navigate to the frontend directory and install dependencies:

     cd ../frontend
     npm install

4. Run the Application:

   • Start the backend:

     cd ../backend
     npm run server

   • Start the frontend:

     cd ../frontend
     npm start

   The application should now be running at http://localhost:3000 (frontend) and the API server at http://localhost:5000 (backend).

Usage

Once the app is running, you can perform CRUD operations through the frontend interface:

1. Add New Item: Fill out the form and submit to add a new item to the list.
2. View Items: Items stored in the database will be displayed in a table or list.
3. Edit Item: Click the "Edit" button next to an item to update its details.
4. Delete Item: Click the "Delete" button to remove an item from the database.

File Structure

The project is divided into two main folders: frontend and backend.

Backend (Node.js + Express)