Building a Full Stack App from a Figma Design with Locofy.ai & Hasura

The first step is to tag our designs. Tagging allows us to turn our designs into working components, for example, buttons, dropdowns, inputs, and more. 

You can also work with popular UI libraries such as Chakra, Ant, Material, and Bootstrap by tagging your elements. 

For this app, you’ll notice items like

1. Autocomplete dropdown for Arrival and Departure fields
2. Date & Time pickers
3. Buttons
4. Text Input fields
5. Radios
6. Popups with videos

Ensure that these elements are tagged for them to become working components in the final app. The Locofy plugin also has LocoAI which uses AI to scan the design and suggest tags, making it easier to quickly tag designs.

Now you can make your designs responsive by configuring the styles in the Styling & Layouts tab.

Select your components that need to be responsive. On the Locofy plugin, under the Styling & Layouts tab, you will find different media queries & states. Select the breakpoint you want to make your design responsive to and then change the styles and layout accordingly.

You can also use auto layout for your designs for responsiveness and use the Locofy plugin to take care of layouts on different screen sizes.

Next is adding actions to create user flows such as linking between pages, opening popups, scrolling to another part of the page, and more.

Now that our designs are tagged correctly and responsive, we can preview them.

To preview your design, select the frame or layer that you want to view, and click the “Preview” button.

Once you are satisfied with your preview, you can sync your designs to Locofy Builder to add more advanced settings, share your live prototype, and export code.

Click the “View Code” button at the bottom right corner of the plugin & select the frames. In our case, we’ll be syncing both frames.

Once the sync is complete, click on “View code in the Builder”.

We need to turn some of the code generated by Locofy into components inside the Locofy Builder.  

In our design, we need to make the search form container on the “Home page” a component because we might reuse it across multiple pages. Once done, we can go to the “Results page” and click on the search form container, and this time instead of creating a new component, we can reuse the existing search component we just created.

Next, we can turn the destination cards present in the ‘Most Popular Destinations’ section into components.

This time, for each card, we expect certain props such as location, image, and price. We can quickly add these props to components on the Locofy builder.

Before exporting, you can view and share a live responsive prototype that looks and feels like your end product would even before writing your code.

Once you've checked that the prototype matches your product vision, we can export the code.

Make sure to select all the screens you need, as well as the correct framework and project settings. Once done, you can download your code in a Zip File by hitting the “Download Zip File button” at the bottom right corner.

Log in to your Hasura account and if you don’t have one, you can quickly sign up by clicking here.

Click on the ‘Connect Database’ button, which will take you to a new page where you get two options: Connect to an existing database or create a new one.

Fill in the details of your database such as the URL, any connection parameters, and so on to successfully connect your database to Hasura.

Now that we have connected our database, we need to create tables or schemas. To do so, click on the ‘public’ button on the left side.

Let’s add our first table by clicking the ‘Create Table’ button. You can configure your tables here.

You can also insert rows, set relationships, and assign permissions to your database. For this tutorial, we have created a “popular_destinations” table and added columns for ‘code’, ‘image’, ‘name’ & ‘price’, making ‘code’ a primary key for the table. We have also created tables such as ‘airports’, ‘routes’, and ’airlines’ based on the data we need in our application.

Since the tables are ready now, the next step is to test them with the API explorer provided by Hasura. To open it, click on the ‘API’ tab, present next to the ‘Data’ tab.

Over here, you can run queries, subscriptions, and mutations against your database by hitting the URL provided by Hasura.

Now, we have everything configured here. Let’s move to our code to populate it with the data that Hasura will provide us.

Go to the page where you want to fetch the data. In our case, we will be starting with the ‘PopDestinationsSection.tsx’ file and fetching the data there.

We create a variable and then store the response we get from Hasura in it. 

Then we’ll pass this data to our component that will digest it. In our case, we will be getting an array as a response that we can map as shown below:

In the code snippet above, we are using the ‘destination card’ component we created using the Locofy Builder and since it is already configured to accept props, we just pass the data from our array into it.

In our app, we also want to pull in real-time data to show a list of recent bookings to help create urgency among our users to book a flight.

We can head back to the API explorer offered by Hasura, and this time, we need to use a “Subscription” instead of “Query”.

A subscription query helps us to pull live data from the database in real-time. We'll create a query named "getRecentBookings" to pull in the data we need to populate the card. Here's what the request body looks like:

We have used a batch size of 3, which means we are grouping 3 requests, combining them into one, and making a single request with the same data that all of the other queries would have made.

For our pagination, we are setting our cursor’s initial value to the “start_from” argument and sorting it in ascending order. We are then specifying all the data fields we need.

In our app, we will be creating a variable similar to last time, but instead, we’ll be using the subscription query above.

Different clients handle subscription & real-time data flow differently. Our client provides us with a “useSubscription” hook. 

The “useSubscription()” hook returns us two variables to check the loading state and data response. Note that this code has to be present inside our functional component.

We will be creating a variable called “bookings” to store the list of flights booked.

We’ll be using “useEffect” hook to monitor the lifecycle of the real-time data stored in our ‘data’ variable and based on that, updating the “bookings” variable.

Now that we have our data ready and subscribed, we can map them to our components.