> For the complete documentation index, see [llms.txt](https://docs.obto.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.obto.co/apps/sample-apps/user-management-app.md).
# User Management App
In this article we will show you how to use OBTO platform for development purpose by creating a basic CRUD application where we can create user, read , update users, basically manage users.
Below is the Image of what we will be building
For that we will create a new app named 'userprofile'. In order to that follow below steps :-
* Login to "\.obto.co"
* On left navigation, click on Home > IDE. The IDE will open up
* Click on Create New Button
* A modal popup will open. Enter the name as "userprofile" and Provide some description of the app
* Your app will open on the left side of the IDE in file explorer
#### CREATING THE DATABASE
* We need database to store our users, so lets create the Table for storing the user information.
* To create a table, click on DB icon on top right corner of the IDE.
* A drawer will open up. Click on "Create Table" button.
* A modal will open up. Enter the name of the table.
* Now we will need to add column to our table. Click on DB icon on top right corner of the IDE, same drawer opens up. Search tablename we just created. Click on "Add New Column" Button
* A modal opens up asking for the details of the column we want to add. Enter the necessary details and submit. A column will be added.
* To view the table we just created, click on 'View'
* A new tab will open up rendering the table view. Here you can see the field we created, rest of the fields are provided by the platform that required by every table, so they are common.
* Similarly you can add rest of the fields like Email, Last Name.
### BUILDING THE FRONTEND
* To Edit HTML, Expand the app > UI Template > userprofile
* Lets write some HTML. We will render root React Component.
* Now you must be thinking from where the component will be mounted in this container. So now we will write some React Js code. In order to do so, Expand the app > Policy Client > userprofile.
* Now we will create this UserProfile Component. In order to do so click on hamburger icon on top of the file explorer > Select Client Script > Modal will open up > Enter the name of the Component as UserProfile > File will open up in editor. Below is the code for the root component.
```
const { useEffect } = React;
const {
CaretRightOutlined,
FormatPainterOutlined,
CodeSandboxOutlined,
ClearOutlined,
DatabaseOutlined
} = antdIcons;
const { Menu, Layout, theme, Tooltip, Button, Drawer, Space, Table, Input, Tag } = antd;
const { Column, ColumnGroup } = Table;
const { Header, Content, Sider } = Layout;
const UserProfile = React.forwardRef((props, ref) => {
const CreateUserModal = ob.M.CreateUserModal;
const UpdateUserModal = ob.M.UpdateUserModal;
const [open, setOpen] = React.useState(false);
const [users, setUsers] = React.useState([]);
const [usersCopy, setUsersCopy] = React.useState([]);
const [inputTypes, setInputTypes] = React.useState(false);
const showDrawer = () => {
setOpen(true);
};
const onClose = () => {
setOpen(false);
};
const columns = [
{
title: 'First Name',
dataIndex: 'first_name',
},
{
title: 'Last Name',
dataIndex: 'last_name',
},
{
title: 'Email',
dataIndex: 'email',
},
{
title: 'Status',
dataIndex: 'status',
render: (text, row) => {
return (
{row.active ? 'Active' : 'Inactive'}
)
}
},
{
title: 'Update',
dataIndex: 'update',
render: (text, row) => ,
},
];
const getAllUsers = () => {
return http.get(`/ms/getuserprofiledata`, {
headers: {
"Content-Type": "application/json"
}
});
};
useEffect(async () => {
const response = await getAllUsers();
setUsers(response.data);
setUsersCopy(response.data);
}, []);
const handleSearchChange = e => {
const value = e.target.value.toLowerCase();
const newTableData = users.filter(user => {
let userName = user.first_name ? user.first_name.toLowerCase() : "";
return userName.startsWith(value);
});
setUsersCopy(newTableData);
};
return (
