Create a Course Marketplace with Locofy.ai, Figma, and Supabase

The Locofy.ai plugin offers a step-by-step process to convert your designs into responsive, extensible code. The first step is to make our designs responsive and clean the structure. For this, we need to apply an auto layout to our frames.

First, create the project by clicking on “Select project” and selecting “Create new”. Our project uses Next.js with JavaScript & TailwindCSS.

After this, you will notice the first widget is the Design Optimiser feature to generate responsive and clean code by cleaning the structure of your app and then applying auto layout. Click on the toggle to run the design optimiser.

The next 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 Material and Bootstrap by tagging your elements.

For this app, you’ll notice items like:

1. Buttons
2. Input fields
3. Bottom tabs
4. Modal

Now you can manually make your designs responsive as well by configuring the styles in the Styles & Layouts tab.
Select your components that need to be responsive and on the Locofy plugin, under the Styles & 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.

You can trigger actions to build fully featured apps and websites. You can head over to the ‘Actions’ tab and assign actions for click events.
You can scroll into view and open popups and URLs amongst other actions.

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”.

You need to turn some of the code generated by Locofy into components inside the Locofy Builder for easier maintenance and fewer duplicate code.

In our design, since the cards for courses are being repeated, we should convert it into a reusable component. We can do that either by using the Locofy Components Wizard which scans our designs and gives us recommendations for components & adds props automatically or we can add components manually as shown below.

You can also add the props quickly in the Locofy builder so you can easily extend it.

Once the prototype matches the product vision, you can view the live responsive prototype that looks and feels like your end product. Then you can export, deploy or sync the code. In this blog, we are pushing our code to GitHub and cloning it to our system with the GitHub CLI.

To work with the auth service provided by Supabase, you need a Supabase account. You can sign up by clicking on this link and creating a new project.

From your projects dashboard, you can copy the anon key and URL and paste it into a new file called “.env” which you can create at the root of your project.

Now you need to install the following packages:

These packages provide us with some helper functions and React hooks with which we can easily manage authentication and access services provided by Supabase. But before using them, we have to wrap the pages/_app.js component with the SessionContextProvider component:

Now we can check & manage the authentication state anywhere with the helper functions & hooks. To learn more about this, you can refer to the official guide by Supabase.

To install Prisma, run the following: 

We need a “DATABASE_URL” variable to store our database connection string in our “.env” file. For this, you can go to Supabase project settings and click on “Database” to find it.

You must have noticed a new folder named “prisma” has been created in your root folder containing a schema file. The file actually contains your database’s table and schema details.

We can easily configure our database table properties and alter them by changing the value on this schema file and running the following command:

For the course marketplace, we are using this schema:

Now we can set up our Prisma client by running the following command:

This will generate a type-safe client for us that we can use to safely query our database.

Finally, we are using this to extend our code and add logic to our app. We are using Prisma in conjunction with Supabase to protect our routes by checking the auth state and also the user details on the server side and redirecting them to a different page accordingly.

Thanks to Locofy.ai, we were able to create components with relevant props which makes code extension a piece of cake.

It is quite straightforward to implement a database with Prisma & pass props to our components so we won’t be covering this in greater detail however, you can find the full source code here.

Once you have extended your code, you can commit the changes to GitHub.

Now you can go back to Figma and edit your designs and sync the project again with Locofy.ai. Finally, click on the “View code in builder” button to hop onto our Locofy Builder.

Click on “Export/Deploy” present at the top right corner of the Builder. Choose the “Push to GitHub” option from the dropdown menu and select the same repository we used earlier to push the code.

Now you can select the same branch and resolve the conflicts(if any) just as you would do on GitHub.

Finally, run the following command on your terminal and you will see the updated code generated by Locofy.ai on your local machine.