Build a Contact Form Directory with User Avatars

A contact form directory is simply a list of contacts with details such as name, phone number, email, and in our case user avatars. In this post we will be building a contact form directory using React, Cloudinary tags and Chakra UI. Cloudinary is a platform on which we can upload, store, manage, transform, and deliver images and videos for web and mobile applications. Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

Pre-requisites

To follow along with this tutorial, you’ll need the following:

Knowledge of JavaScript and React
Nodejs >=v14 installed
A code editor (VS Code preferably)
A Cloudinary account. Signup is free!

The complete code and demo to this tutorial is on Codesandbox.

Creating user avatar tags with Cloudinary

Let’s go ahead and create the user avatars on Cloudinary. Follow these steps:

Login to cloudinary
Click on Media Library
Navigate to the samples folder
Open the animals folder or chose any folder/images of your choice. You should be presented with this screen:
Hover over the first image, click the check box, and click on the Metadata on the far right sidebar
Like in the image above, add email, phone, and username as keys and give them values of your choice.
Save and repeat the steps with other images.
Now select all the images and click on the tag icon. Name your tags user-avatars and click on Update.

Now we have created our tag, let’s extract the JSON object.

Extracting the JSON object

Cloudinary automagically creates a REST API endpoint from our tags. Let’s extract the user-avatar tag. https://res.cloudinary.com/<your-cloud-name>/image/``*list/user-avatars.json*. Replace your-cloud-name with your cloudinary cloud name and paste the url on your browser. You should see something like this:

If you’ve gotten to this point, you’re Awesome! Now we have our REST API object, let’s implement our UI with React and Chakra UI.

Implementing the UI and consuming the API

Let’s go ahead and setup the React project. Run this command on your terminal:

1#bash
2npx create-react-app contact-directory

When it’s done installing, change directory to the project directory and run the React app with npm run start. Go ahead and delete all the files in the src directory except App.js and index.js.

Let’s now install Chakra UI. Run this command on your terminal:

1npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

When it’s done installing, update the index.js to look like this:

1#src/index.js
2
3import React from 'react';
4import ReactDOM from 'react-dom/client';
5import App from './App';
6import { ChakraProvider } from '@chakra-ui/react'
7    
8    
9const root = ReactDOM.createRoot(document.getElementById('root'));
10  root.render(
11    <ChakraProvider>
12      <React.StrictMode>
13        <App />
14      </React.StrictMode>
15    </ChakraProvider>
16  );

Here, we’ve added ChakraProvider over App so we can use Chakra UI anywhere in our project. Go ahead and clear the content of App.js and add these lines of code to flesh out our UI.

1#src/App.js
2import {
3  Box,
4  Text,
5  Avatar,
6  Table,
7  Thead,
8  Tbody,
9  Tr,
10  Th,
11  Td,
12  TableCaption,
13  TableContainer,
14} from '@chakra-ui/react'
15    
16function App() {
17  return (
18    <Box>
19      <TableContainer>
20        <Table variant='simple'>
21          <TableCaption>Animal Farm contact list</TableCaption>
22          <Thead>
23            <Tr>
24              <Th>Avatar</Th>
25              <Th>Name</Th>
26              <Th>Email</Th>
27              <Th>Phone number</Th>
28            </Tr>
29          </Thead>
30          <Tbody>
31            <Tr>
32              <Td>
33                <Avatar
34                  alt="user-avatar"
35                />
36              </Td>
37              <Td>
38                <Text> Chris </Text>
39              </Td>
40              <Td>
41                <Text>chris@gmail.com</Text>
42              </Td>
43              <Td>
44                <Text>09087654321</Text>
45              </Td>
46            </Tr>
47          </Tbody>
48        </Table>
49      </TableContainer>
50    </Box>
51  );
52}
53export default App

Navigate to your browser and you should be presented with this screen:

Awesome! Let’s now integrate the cloudinary API. Add the following lines of code

1function App() {
2  const [userInfo, setUserInfo] = useState(null);
3  const baseURL = "https://res.cloudinary.com/sammy365/image";
4    
5  const getUserAvatar = async () => {
6    const res = await fetch(
7      `${baseURL}/list/user-avatars.json`
8    );
9    const data = await res.json();
10    setUserInfo(data);
11  };
12    
13  useEffect(() => {
14    getUserAvatar();
15  });
16  return()
17}

Here, we create a userInfo variable that will hold our user info data. We also fetch the JSON data from the cloudinary url we constructed earlier. Let’s now use our data in the templates. Update your code to look like this:

1#App.js    
2...
3
4<Thead>
5  <Tr>
6    <Th>Avatar</Th>
7    <Th>Name</Th>
8    <Th>Email</Th>
9    <Th>Phone number</Th>
10  </Tr>
11</Thead>
12
13<Tbody>
14    {userInfo &&
15    userInfo.resources.map((info) => {
16    const { format, public_id, version, type, } = info;
17    
18    return (
19      <Tr key={version}>
20        <Td>
21          <Avatar
22            src={`${baseURL}/${type}/v${version}/${public_id}.${format}`}
23            alt="user-avatar"
24          />
25        </Td>
26        <Td>
27          <Text>{info.context.custom.username}</Text>
28        </Td>
29        <Td>
30          <Text>{info.context.custom.email}</Text>
31        </Td>
32        <Td>
33          <Text>{info.context.custom.phone}</Text>
34        </Td>
35      </Tr>
36    )
37    })}
38</Tbody>

Save and head to your browser. You should see something like this:

If you’ve followed to this point, you’re Awesome! That’s our contact form directory.

Conclusion

You can go ahead and add more images and Metadata to the user-avatars tag and your app will receive the updates. In this post, we learned how to create a contact form directory with React, Cloudinary tags and Chakra UI.

Happy Coding!