How to build an AI powered QR Generator app in 5 mins | Builderkit

Introduction

In this article, we'll guide you step-by-step on how to configure and run the QR code generator app using Builderkit. This quick tutorial assumes you have access to the GitHub Pro repository to download the project.

Step 1: Project Setup

1. Clone the Project
   Open your terminal and navigate to your desired directory (in this example, the desktop). Run the following command to clone the project:

   git clone [GitHub Repository URL] QRCodeGenerator
   

   This command will download the QR code generator project from GitHub to your local system.

2. Open the Project
   Use a code editor like VS Code to open the project folder. Navigate to the newly created QRCodeGenerator folder.

3. Switch Branch
   Switch to the QR code generator branch using the terminal:

   git checkout qr-code-generator
   

4. Install Dependencies
   Now, we need to install the required dependencies. We are using pnpm for package management. Run:

   pnpm install
   

   Wait for a few seconds while the required packages are installed.

5. Create Environment Variables
   Create an .env file for environment variables using the command:

   touch .env
   

   Configure the variables, setting the app URL to http://localhost:3000, as this is our default port.

Step 2: Set Up Supabase

Since the Supabase setup has already been completed in previous tutorials, we skip to database configuration.

1. Create QR Code Generations Table
   Access your Supabase project, head to the SQL editor, and run the following SQL script to create the QR code generations table:

   CREATE TABLE qr_code_generations (id serial PRIMARY KEY, url text, created_at timestamp DEFAULT current_timestamp);
   

2. Sync Supabase Types
   Sync the Supabase types to ensure the local project has the updated table schema. Copy this command:

   supabase gen types typescript --project-id your-project-id --local
   

   Replace your-project-id with your actual project ID, which can be found in the Supabase project's URL. Run the command to sync the types.

Step 3: Run the App

1. Start the Application
   Clear the terminal and run:

   pnpm run dev
   

   The application will start successfully and will be accessible at http://localhost:3000.

2. Generate QR Code
   Navigate to the QR code generator dashboard. Enter any URL that you wish to convert into a QR code. For this example, use the Builderkit URL. After entering the URL, click on "Generate QR Code."

3. Download QR Code
   After a brief moment, a QR code will be generated and displayed on the page. You also have the option to download the QR code using the provided button.

Congratulations! You have successfully built and tested an AI-powered QR code generator app using Builderkit.

Thank you for following this tutorial. Happy coding!

Keywords

• QR code generator
• Builderkit
• Supabase
• Localhost
• GitHub Pro
• PNPM
• Environment variables
• SQL database

FAQ

Q1: Do I need access to GitHub Pro?
A: Yes, you need GitHub Pro access to download the project repository.

Q2: What package manager do you recommend?
A: We recommend using pnpm for managing project dependencies.

Q3: Can I run the app on a different port?
A: Yes, you can change the port in the environment variables file if you prefer a different port.

Q4: How do I create a table in Supabase?
A: You can create a table by accessing the SQL editor in your Supabase project and running an appropriate SQL script.

Q5: What URL should I input for generating the QR code?
A: You can input any valid URL that you want to be embedded in the QR code, such as a website link or any online resource.