Refactor qrcoder

[ArtemLazarchuk]

QR Code Generator

Created Using Ivy

Web application created using Ivy-Framework.

Ivy - The ultimate framework for building internal tools with LLM code generation by unifying front-end and back-end into a single C# codebase. With Ivy, you can build robust internal tools and dashboards using C# and AI assistance based on your existing database.

Ivy is a web framework for building interactive web applications using C# and .NET.

Interactive Example For QR code generation

This example demonstrates QR code generation using the QRCoder library integrated with Ivy. QRCoder is a pure C# Open Source.

What This Application Does:

This specific implementation creates a Profile Creator application that allows users to:

• Create User Profiles: Fill out a form with personal information (name, email, phone, LinkedIn, GitHub)
• Generate vCard QR Codes: Automatically creates contact cards (vCard format) encoded in QR codes
• Share Contact Information: Users can scan the generated QR code to automatically add the contact to their phone
• Real-time Form Validation: Validates email format and URL patterns for LinkedIn/GitHub profiles
• Interactive UI: Split-panel layout with form on the left and QR code preview on the right

Technical Implementation:

• Uses QRCoder's vCard payload generator for structured contact data
• Generates Base64-encoded PNG images for web display
• Implements form validation with custom rules
• Creates resizable panel layout for optimal user experience
• Handles form submission with loading states and error display

One-Click Development Environment

Click the badge above to open Ivy Examples repository in GitHub Codespaces with:

• .NET 9.0 SDK pre-installed
• All Ivy Examples available for exploration
• Navigate to qrcoder folder to run this QR Code Generator
• Ready-to-run development environment
• No local setup required

How to Run

1. Prerequisites: .NET 9+ SDK
2. Navigate to the example:

   cd qrcoder

3. Restore dependencies:

   dotnet restore

4. Run the application:

   dotnet watch

5. Open your browser to the URL shown in the terminal (typically http://localhost:5010)

How to Deploy

Deploy this example to Ivy's hosting platform:

1. Navigate to the example:

   cd qrcoder

2. Deploy to Ivy hosting:

   ivy deploy

This will deploy your QR code generation application with a single command.

For more details, see the Ivy Documentation

[Copilot]

Pull Request Overview

This PR refactors the QR coder example by renaming the project from "QrCodeProfile" to "QrCoderExample" and relocating files for better organization. The refactoring improves naming consistency and adds enhanced documentation.

• Renamed project files and namespaces from "QrCodeProfile" to "QrCoderExample"
• Added comprehensive README documentation with usage instructions and technical details
• Enhanced the ProfileApp UI with footer text describing the demo and libraries used

Reviewed Changes

Copilot reviewed 7 out of 12 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
qrcoder/README.md	Added comprehensive documentation with project overview, technical details, and deployment instructions
qrcoder/QrCoderExample.sln	Updated solution file to reference the renamed project file
qrcoder/QrCoderExample.csproj	Updated root namespace from QrCodeProfile to QrCoderExample
qrcoder/GlobalUsings.cs	Updated namespace declaration to match new project name
qrcoder/Dockerfile	Updated all project file references to use the new naming convention
qrcoder/Apps/ProfileApp.cs	Added footer text with demo description and library attribution links
qrcodeprofile/README.md	Removed old README file as part of the reorganization

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[ArtemLazarchuk]

The Codespaces badge will work properly once the .devcontainer folder is added to the repository. If you want to see how this works, you can click the button and manually add the .devcontainer folder with its contents, or I can demonstrate it for you.

[ArtemLazarchuk]

Now, when the button is clicked, only a single folder opens, and a feature has been added so that the user does not need to enter any commands - everything runs automatically

[rorychatt]

Card's content get's cropped here.

For given example code

var formContent = new Card(
            Layout.Vertical().Gap(6).Padding(2)
            | Text.H2("Create Your Profile")
            | Text.Block("Fill in your information to create a shareable profile")
            | formView
            | Layout.Horizontal()
                 | new Button("Create Profile").HandleClick(new Action(HandleSubmit))
                    .Loading(loading).Disabled(loading)
                | validationView
            | Text.Small("This demo uses QRCoder library to generate vCard QR codes for contact sharing.")
            | Text.Markdown("Built with [Ivy Framework](https://github.com/Ivy-Interactive/Ivy-Framework) and [QRCoder](https://github.com/codebude/QRCoder)")
            | new Html(@"
                <div >
                    <a href=""https://github.com/codespaces/new?hide_repo_select=true&ref=main&repo=Ivy-Interactive%2FIvy-Examples&machine=standardLinux32gb&devcontainer_path=.devcontainer%2Fqrcoder%2Fdevcontainer.json&location=EuropeWest"">
                        <img src=""https://github.com/codespaces/badge.svg"" alt=""Open in GitHub Codespaces"" />
                    </a>
                </div>
            ")
        ).Height(Size.Full());