Convert Design To code Integrating Appwrite Cloud With Dhiwise

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, 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, 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 installed on your operating system. The installation comes with the package manager, npm
• Create a DhiWise account. Sign-up is completely free
• Appwrite Cloud account

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.

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.

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

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

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:

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.

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

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.

• 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

Syncing DhiWise code view locally

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

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

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. But before syncing, download the DhiWise VS Code extension to manage your application code from DhiWise to VS Code.

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:

.
├── 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.
2. DhiWise generates all the classes for the styling and design of the page using Tailwind CSS.
3. 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):

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

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 in the pages folder
• The Input component in the components folder
• Footer1 component in the components folder
• TextArea component in the components folder

Create this new file in the components folder called InputEmail.

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:

The complete source code is in this GitHub repo, and you can try the demo here.

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

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 now!

Resources

Appwrite Databases API
DhiWise documentation