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, , 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. DhiWise 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 , you do not need to run a local environment using Docker to connect the instance with the application. Appwrite Cloud Prerequisites Make sure to meet the following requirements to follow through this post: Understanding of JavaScript and React knowledge is essential Have installed on your operating system. The installation comes with the package manager, Node.js npm Create a DhiWise account. is completely free Sign-up 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 button. + Create project Navigate into the created project to create a database that holds the collections. On the left pane of the admin dashboard, click on the tab and create a database. Creating the database Databases From the previous step, click on the database created, and under the tab, click the button . Creating collections Collections + Create collection Next, navigate to the to create your data structure by adding attributes. Collections 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 , update the permissions under the tab with the Role set to and check permission: Collections Settings Any Create This step is necessary to prevent unauthorized apps from accessing your Appwrite project. Adding a platform to your project Click the tab, and scroll to the section to add a new platform.  From the dropdown, select the option. Overview Integrations Web app 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 from the dropdown button and choose from the category listed. Create from templates New application Next, click on Use template Enter your , select the as , and as . DhiWise also supports applications that use Application name Technology React web app Language JavaScript 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 and in the section as shown from the pop-up window: Without Storybook Vite Framework config is a build tool and development server commonly used in modern frontend frameworks like Vue.js and React. Vite Once the build process completes, click on which will present the code on a new tab that you can now sync onto . But before syncing, download the to manage your application code from DhiWise to VS Code. View code VS Code DhiWise VS Code extension On the bottom right of the code view, click on to copy your . Before pasting the value, create an empty folder. Sync or download code Application token 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 icon, click on , and paste the copied token. Now, wait for the boilerplate code to show. DhiWise Sync Code Developer Experience Let’s inspect the generated directory structure that DhiWise creates. It should look like this: Code Review .
├── 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. DhiWise intelligently generates every component containing the files and folders from a web template with its code developer friendly to read and understand. DhiWise generates all the classes for the styling and design of the page using Tailwind CSS. 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 . In your terminal, run this command to install the Appwrite Web SDK (Software Development Kit): Appwrite 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 file in the root of the application. Copy-paste these values: .env 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 prefix is a convention used by . VITE_ Vite Integrating Appwrite in the application code Initializing the Appwrite client Let’s create a file called in the directory. Copy and paste this code: appwriteConfig.js src 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 object import.meta.env Export the constants and assign the value with the data env creates a new instance of the Appwrite JavaScript SDK const client = new Client() After that, initialize the client with the endpoint and project ID , create a new instance of the service and allows you to interact with the Appwrite database export const databases = new Databases(client) Databases 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: in the folder Contact component pages The in the components folder Input component in the components folder Footer1 component in the components folder TextArea component Create this new file in the folder called . components InputEmail Follow the links for the different components above and replace the existing code. In the code snippets, we use the hook to access the child component DOM directly from the parent component. In contrast, the hook creates a to access the value from the and element. forwardRef createRef ref input textarea 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 , and you can try the demo . GitHub repo 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 now! sign up Resources Appwrite Databases API DhiWise documentation

This story contains new, firsthand information uncovered by the writer.

Building an Efficient Waitlist App with Next.js and Xata

Using Scraping Browser and GPT for Actionable Product Insights

Portfolio

Nominated for 2022 - HackerNoon Contributor of the Year - Data Visualization

Nominated for 2022 - HackerNoon Contributor of the Year - Heroku

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Frontend

Nominated for 2022 - Remote Work Warrior

Nominated for 2022 - No No No Nodejs

Technical content creator

Too Long; Didn't Read

Convert Design To code Integrating Appwrite Cloud With Dhiwise

Convert Design To code Integrating Appwrite Cloud With Dhiwise

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

2021: Reviewing and Kaizen-ing My Programming and Writing Life

Introduction to Appwrite and the Svelte SDK

Why Appwrite 0.8 Is A Great Open-Source Firebase Alternative

Let's Build a Real-Time Collaborative Document Editor Using My Web App Framework of Choice

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

2021: Reviewing and Kaizen-ing My Programming and Writing Life

Introduction to Appwrite and the Svelte SDK

Why Appwrite 0.8 Is A Great Open-Source Firebase Alternative

Let's Build a Real-Time Collaborative Document Editor Using My Web App Framework of Choice

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps