What We’ll Build

A User Management Interface that lets you:

• Submit a form to create a new user

• View all users in a list

 Step 1: Create React App

Open your terminal and run:

npx create-react-app mongodb-users-client
cd mongodb-users-client
npm install axios

 Folder Structure

mongodb-users-client/
│
├── src/
│   ├── App.js
│   ├── components/
│   │   ├── UserForm.js
│   │   └── UserList.js

 Step 2: Create Components

src/components/UserForm.js

import React, { useState } from 'react';
import axios from 'axios';

const UserForm = ({ onUserAdded }) => {
  const [form, setForm] = useState({ name: '', email: '' });

  const handleChange = e => {
    setForm({ ...form, [e.target.name]: e.target.value });
  };

  const handleSubmit = async e => {
    e.preventDefault();
    try {
      await axios.post('http://localhost:5000/api/users', form);
      onUserAdded(); // refresh list
      setForm({ name: '', email: '' });
    } catch (err) {
      alert('Error adding user');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <h2>Add User</h2>
      <input
        type="text"
        name="name"
        value={form.name}
        onChange={handleChange}
        placeholder="Name"
        required
      />
      <input
        type="email"
        name="email"
        value={form.email}
        onChange={handleChange}
        placeholder="Email"
        required
      />
      <button type="submit">Add</button>
    </form>
  );
};

export default UserForm;

 src/components/UserList.js

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const UserList = ({ refresh }) => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:5000/api/users')
      .then(res => setUsers(res.data))
      .catch(err => console.log(err));
  }, [refresh]);

  return (
    <div>
      <h2>All Users</h2>
      {users.map(user => (
        <div key={user._id}>
          <strong>{user.name}</strong> — {user.email}
        </div>
      ))}
    </div>
  );
};

export default UserList;

 src/App.js

import React, { useState } from 'react';
import UserForm from './components/UserForm';
import UserList from './components/UserList';

function App() {
  const [refresh, setRefresh] = useState(false);

  const triggerRefresh = () => setRefresh(!refresh);

  return (
    <div style={{ padding: '20px' }}>
      <h1>MongoDB User Manager</h1>
      <UserForm onUserAdded={triggerRefresh} />
      <hr />
      <UserList refresh={refresh} />
    </div>
  );
}

export default App;

 Step 3: Run the Frontend

In the React project directory:

npm start

Then open: http://localhost:3000

 Handling CORS

To allow frontend (port 3000) to access backend (port 5000), modify your server.js:

const cors = require('cors');
app.use(cors());

Install it:

npm install cors

 You Now Have:

• A working Node.js + MongoDB backend

• A React frontend to interact with it

• Full CRUD basics ready to expand (update/delete next)