Convert Design To code Integrating Appwrite Cloud With Dhiwise
Tags: javascript, react, dhiwise, tutorial
Published: 2023-08-01 14:53:28

Have you ever wondered how to convert your design into code in a few clicks? There is one option out there that blew me away.

If you are Frontend Developer, [DhiWise](https://www.dhiwise.com/), as a programming platform, converts UI (user interfaces) from your design tools, such as Figma, Sketch, or Adobe XD, into production-ready code that developers can customize. It’s suitable for mobile or web applications.

Here I’ll show you how to use custom web templates in DhiWise and add an existing third-party technology like Appwrite to create, collect, and store user feedback through data collection in a form from the contact page of a web app.

## What is Appwrite Cloud?

Appwrite is an open-source backend as a service (BaaS) platform that abstracts the work in creating backend servers and provides the infrastructure, such as authentication, data, file storage, and more, to help build robust and scalable frontend applications.

Using [Appwrite Cloud](https://cloud.appwrite.io/), you do not need to run a local environment using Docker to connect the instance with the application.

## Prerequisites

Make sure to meet the following requirements to follow through this post:

- Understanding of JavaScript and React knowledge is essential
- Have [Node.js](https://nodejs.org/en/download) installed on your operating system. The installation comes with the package manager, `npm`
- Create a DhiWise account. [Sign-up](https://app.dhiwise.com/sign-up) is completely free
- Appwrite Cloud [account](https://cloud.appwrite.io/login)

## Setting up Appwrite Cloud

To set up a new project, head to your Appwrite Cloud admin console and create a new project. Click on the **+ Create project** button.


![create a new project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yqh7bqgcdl9i37ndu468.jpg)

**Creating the database**
Navigate into the created project to create a database that holds the collections. On the left pane of the admin dashboard, click on the **Databases** tab and create a database.


![create db](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t7mm0n8qzm5am9ju78ct.jpeg)

**Creating collections**
From the previous step, click on the database created, and under the **Collections** tab, click the button **+ Create collection**.


![creating a collection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nmqzhm3cbt95x78f2gko.jpeg)

Next, navigate to the **Collections** to create your data structure by adding attributes.


![attributes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wpvqcmick4boqkkobwds.jpeg)

Here’s what the attributes will look like:

| Attribute key | Attribute type | Size | Default value | Required |
| ------------- | -------------- | ---- | ------------- | -------- |
| name          | string         | 255  | -             | Yes      |
| email         | string         | 255  | -             | Yes      |
| message       | string         | 1000 | -             | Yes      |


Still, within the **Collections**, update the permissions under the **Settings** tab with the Role set to **Any** and check **Create** permission:


![update permissions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/smxh8wa90mkurx0bxj5k.jpeg)


![update permissions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ry3l8b0iwrnpeqf8510x.jpeg)

**Adding a platform to your project**
This step is necessary to prevent unauthorized apps from accessing your Appwrite project.

Click the **Overview** tab, and scroll to the **Integrations** section to add a new platform.  From the dropdown, select the **Web app** option.


![platform](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7u7fadhycdccl9t6b90c.jpeg)


The asterisk (*) within the Hostname input field represents access from any domain locally and in production.


![name and hostname](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nk58ovi2umqwaoc2mb9p.jpeg)

## Generating ReactJS code from a template
There are three options to create a new React application in DhiWise. For this project, we will make use of web templates. Using web templates, DhiWise offers an extensive range of pre-designed screens and templates to choose from if you don't have a design file. Their library has 39 templates and around 1000 screens.

- On your dashboard, click **Create from templates** from the **New application** dropdown button and choose from the category listed.



![oracle template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qaan062a6qhw23vpuvvc.jpeg)

- Next, click on **Use template**
- Enter your **Application name**, select the **Technology** as `React web app`, and **Language** as `JavaScript`. DhiWise also supports applications that use `TypeScript`
- Click on **Create app**


![choose the infra](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2jrcgh05lqnglam9kkp8.jpeg)

## Syncing DhiWise code view locally
The next thing to do is to get the code locally on your system. Click on the Build app.


![template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hzboveaqcpspdd1dz53b.jpeg)

Choose the following configuration, select `Without Storybook` and `Vite` in the `Framework config` section as shown from the pop-up window:



![code config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r7m1ndkfkkpok5xdkog4.jpeg)


**Vite** is a build tool and development server commonly used in modern frontend frameworks like Vue.js and React.

Once the build process completes, click on **View code** which will present the code on a new tab that you can now sync onto [VS Code](https://code.visualstudio.com/download). But before syncing, download the [DhiWise VS Code extension](https://marketplace.visualstudio.com/items?itemName=dhiwisepvtltd.dhiwisecodesync&ssr=false#overview) to manage your application code from DhiWise to VS Code.

![sync code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bzdbdfxtmxbp61xr4px8.jpeg)

On the bottom right of the code view, click on **Sync or download code** to copy your **Application token**. Before pasting the value, create an empty folder. 

Run this command:

```
mkdir nexus
```

After that, navigate into the directory and open it in VS Code:

```
cd nexus

code .
```

In your VS Code app, click on the installed **DhiWise** icon, click on **Sync Code**, and paste the copied token. Now, wait for the boilerplate code to show. 

## Developer Experience
**Code Review**
Let’s inspect the generated directory structure that DhiWise creates. It should look like this:


```json
.
├── package.json
├── postcss.config.js
├── vite.config.js
├── index.html
├── public
│   ├── assets
│   │   └── images --------- All Project Images
│   ├── favicon.ico
│   ├── manifest.json
│   └── robots.txt
├── README.md
├── src
│   ├── App.jsx
│   ├── assets
│   │   └── fonts ---------- Project fonts
│   ├── components --------- UI and Detected Common Components
│   ├── constants ---------- Project constants, eg: string consts
│   ├── hooks -------------- Helpful Hooks
│   ├── index.jsx
│   ├── pages -------------- All route pages
│   ├── Routes.jsx ---------- Routing
│   ├── styles
│   │   ├── index.css ------ Other Global Styles
│   │   └── tailwind.css --- Default Tailwind modules
│   └── util
│       └── index.jsx ------- Helpful utils
└── tailwind.config.js ----- Entire theme config, colors, fonts etc.
```

1. DhiWise intelligently generates every component containing the files and folders from a web template with its code developer friendly to read and understand.
1. DhiWise generates all the classes for the styling and design of the page using Tailwind CSS.
1. Like every React project, the code generated by DhiWise maintains the structure and reusability of component code.


## Installing dependencies

The only package that we need is **Appwrite**. In your terminal, run this command to install the Appwrite Web SDK (Software Development Kit):

```js
npm install appwrite 
```

## Creating environment variables

Environment variables are the application code secret keys and credentials not shared or pushed to GitHub and only accessible in a runtime environment.

Create a `.env` file in the root of the application. Copy-paste these values:

```
VITE_APPWRITE_PROJECT_ID="<PROJECT_ID>"
VITE_APPWRITE_DATABASE_ID="<DATABASE_ID>"
VITE_APPWRITE_COLLECTION_ID="<COLLECTION_ID>"
```

You can replace the values in the quote with the actual values from your Appwrite Cloud project dashboard. The `VITE_` prefix is a convention used by `Vite`.

## Integrating Appwrite in the application code
**Initializing the Appwrite client**

Let’s create a file called `appwriteConfig.js` in the **src** directory. Copy and paste this code:

`src/appwriteConfig.js`
```js
import { Client, Databases } from "appwrite";

const projectID = import.meta.env.VITE_APPWRITE_PROJECT_ID;
const databaseID = import.meta.env.VITE_APPWRITE_DATABASE_ID;
const collectionID = import.meta.env.VITE_APPWRITE_COLLECTION_ID;

export const PROJECT_ID = projectID;
export const DATABASE_ID = databaseID;
export const COLLECTION_ID = collectionID;

const client = new Client();

client.setEndpoint("https://cloud.appwrite.io/v1").setProject(projectID);

export const databases = new Databases(client);
```

The code above does this:
- Import the Appwrite package
- Access the environment variables using the `import.meta.env` object
- Export the constants and assign the value with the `env` data
- `const client = new Client()` creates a new instance of the Appwrite JavaScript SDK
- After that, initialize the client with the endpoint and project ID
- `export const databases = new Databases(client)`, create a new instance of the **Databases** service and allows you to interact with the Appwrite database

## Working on the UI

Since this is a pre-built template from DhiWise, we’ll only work on some code segments by updating them and creating a file where required.

These are the components we would work on as follows:

- [Contact component](https://github.com/Terieyenike/business/blob/main/src/pages/Contact/index.jsx) in the **pages** folder
- The [Input component](https://github.com/Terieyenike/business/blob/main/src/components/Input/index.jsx) in the components folder
- [Footer1 component](https://github.com/Terieyenike/business/blob/main/src/components/Footer1/index.jsx) in the components folder
- [TextArea component](https://github.com/Terieyenike/business/blob/main/src/components/TextArea/index.jsx) in the components folder

Create this new file in the **components** folder called [InputEmail](https://github.com/Terieyenike/business/blob/main/src/components/InputEmail/index.jsx).


Follow the links for the different components above and replace the existing code. 


In the code snippets, we use the `forwardRef` hook to access the child component DOM directly from the parent component. In contrast, the `createRef` hook creates a **ref** to access the value from the **input** and **textarea** element. 

Also, to ensure sending an empty field without any value to the Appwrite server, JavaScript error validation takes care of such occurrences.

The contact page of the app should look something like this:


![error validation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p9o7pmynm86cgh44h80l.jpeg)


![contact form successfully sent](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f7wsh74w9zqaaynnfbzq.jpg)


The complete source code is in this [GitHub repo](https://github.com/Terieyenike/business/tree/main), and you can try the demo [here](https://nexus-brand-tau.vercel.app/).

View the saved documents in Appwrite from the form data in the client.


![appwrite cloud](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/93j3rzhsnfduryxt0rna.jpeg)

## Conclusion

Now that you have seen how to pair Appwrite and DhiWise together to build a full-stack React application, it is time to try it out and see how effective these tools are in improving your developer experience.

One thing that is sure with DhiWise is that you reduce the time to build for your users as this platform translates design to code most efficiently and can modify the generated code to suit the business needs.

Find out more about DhiWise and [sign up](https://app.dhiwise.com/sign-up?utm_campaign=blog&utm_source=seo&utm_medium=website&utm_term=education&utm_content=convert-design-to-code-in-web-and-mobile-apps) now!

## Resources

[Appwrite Databases API](https://appwrite.io/docs/client/databases?sdk=web-default#databasesCreateDocument)
[DhiWise documentation](https://docs.dhiwise.com/)