Blogs
Integrations

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

In this guide, we will create a full-stack Next.js app with authentication, a database, and also a proper CI/CD pipeline.

In this blog, we'll build a course marketplace from a Figma design using Locofy.ai to generate the frontend code, Supabase for authentication and database, and Prisma to easily query & migrate the database.

We’ll explore a much refined designer-developer handoff process and how to keep your design and code in sync with Locofy’s deep GitHub integrations.

Prerequisites:

  1. You will need your design ready in Figma.
  2. You will need a Locofy.ai account and have the plugin up and running on your Figma file.

Turn your designs into frontend code with Locofy.ai

This is the design for the app that we’ll be building. It is split into 2 user flows: one for the content creators and the other for the students. In total, it consists of 7 pages – including the standard auth screens, creating and viewing published courses screens, and finally, the student’s homepage and a page to download the course.

Image of the Figma designs
  1. 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.

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

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

    Image of design optimiser
  4. 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
  5. 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.

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

    Image of actions
  7. 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.

    Image of 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.

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

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

    Image of the components feature
  10. You can also add the props quickly in the Locofy builder so you can easily extend it.

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

Exported Code Overview

After extracting the zip file you downloaded, you can see how the Next.js project is structured.

Image of the file structure

You can see the components you created in the Locofy builder have been placed inside the “components” folder and you have got our screens as pages inside the “pages” folder.

  1. To run the app, you need to first install the packages running the "npm i" command in your terminal. 
  2. Once the dependencies are installed, you can run the project in the development environment using "npm run dev".

Adding Supabase Authentication

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

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

  3. Now you need to install the following packages:

  4. 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:

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

Connecting Database & Using Prisma

The next step is to connect the PostgreSQL database offered by Supabase with our app and easily query it with Prisma.

  1. To install Prisma, run the following: 

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

  3. 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:

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

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

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

Keeping Your Design and Code in Sync

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

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

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

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

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

And that’s it!  In this guide, we not only saw how to create a course marketplace but also saw how to keep your designs and code in sync.

By following the steps above, you can also turn your designs into production-ready Next.js code with the ability to authenticate users & easily store data thanks to Prisma and Supabase.

With the Locofy.ai plugin, you will be able to generate pixel-perfect frontend code that can be broken down into components that can accept props and pages. 

Generate pixel-perfect Next.js code today with Locofy.ai.

Keep your loco mode on!
Stay updated on the latest Locofy announcements and product updates

© 2024, Locofy Pte Ltd. All Rights Reserved.