DEV Community

Fortune Ikechi
Fortune Ikechi

Posted on

Building a contact management system with Fauna and React

Building a Contact Management System with Fauna and React

Written in connection with the Write With Fauna program.

Contact management systems are a very good way of mastering a particular technology, they also afford a way of managing a user’s contacts in one location. There are several ways of building a contact management system, in this post we’d be building a serverless contact management system where users can add contacts information and also delete contact information, the contacts will be added to our Fauna database.

FaunaDB is a database as a service (DBaaS) that helps to save time by using a preexisting infrastructure to build web applications without setting up a custom API server.

What we are building?

Fauna Contact manager

Prerequisites

To take full advantage of this tutorial, make sure you have the following installed on your local development environment:

  • Node.js version >= 12.x.x installed
  • Have access to one package manager such as [npm](https://www.npmjs.com/) or [yarn](https://classic.yarnpkg.com/en/) create-react-app CLI installed as a global package or use npx
  • Access to FaunaDB dashboard
  • Basic knowledge of React Hooks

Why FaunaDB?

Below are some points on why you should use FaunaDB

Getting started with FaunaDB

To get started with Fauna, first register a new account either using email credentials or using a GitHub account. You can register a new account here. Once you have created a new account or signed in, you are going to be welcomed by the dashboard screen:

fauna dashboard

Creating a new FaunaDB instance

To create a new database instance using FaunaDB services, you have to follow some simple steps. On the dashboard screen, press the button New Database:

![fauna instance for dashboard]https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p1n6r2dmsjlaz71icsk5.png)

Next, enter the name of the database and save. Once a database instance is set up, you are ready to access key. Fauna’s access keys is used to connect authorization and a connection to the database from a single page application. To create your access key, navigate to the side menu and go to the Security tab and click on the New Key button.

Fauna Security keys

Creating a Collection

Navigate to your Fauna dashboard and click on Collections tab from the side menu and press the button for New Collection, input your desired name for the new collection and save.

Creating a collection

Creating Indexes

To complete our Fauna setup, let’s create indexes for our application, Indexes are important because searching documents are done using indexes in Fauna by matching the user input against the tern field.

To create an index, navigate to the Indexes tab of our Fauna dashboard and click on Indexes.

Fauna indexes

Now, we are ready to build our React app and connect it to our FaunaDB application.

Initializing a new React app and installing dependencies

In this section, we are going to initialize a new React app, integrate it using a node-package-manager, To make it easier, I’ve prepared a frontend application that you can clone and add your fauna access keys to an env file. Let’s do that below:

git clone https://github.com/iamfortune/contact-manager
cd contact-manager 
yarn install 
Enter fullscreen mode Exit fullscreen mode

The above command clones the github application and installs the necessary packages. Next let’s add our access keys to an .env file we will create below

// .env
DB_KEY={your fauna access keys go here!}
Enter fullscreen mode Exit fullscreen mode

If you’ve done this, we can start our application development server using the command below

yarn start 
Enter fullscreen mode Exit fullscreen mode

Our application should look like the image below

Fauna Contact manager

Conclusion

Congratulations!

I hope you’ve learned more about Fauna and serverless application. The combination of Fauna and React is great for single page applications. You can extend the application to be able to add contacts emails and even update a customer’s message in real time.

Here is a list of some resources that you might like after reading this post:

Discussion (0)