Building a Phoenix LiveView Invoice Management App with Runner H

#devchallenge #runnerhchallenge #ai #machinelearning

What I Built

I used Runner H to generate a comprehensive, step-by-step guide for building a Phoenix LiveView application to manage invoices. This workflow showcases how Runner H can assist developers by instantly producing detailed technical documentation and code instructions, saving significant time on research and planning.

Demo

Here is the output generated by Runner H based on my prompt:

Creating a Phoenix LiveView Application to Manage Invoices

This guide provides a comprehensive, step-by-step process for building a Phoenix LiveView app to manage invoices, including setup, context/schema generation, migrations, LiveView modules, and deployment.

Prerequisites

Install Elixir: Ensure Elixir is installed (elixir -v).
Phoenix Framework: Install Phoenix (mix archive.install hex phx_new).
Database: Make sure PostgreSQL is running.

Step 1: Set Up the Phoenix Project

mix phx.new invoice_manager --live
cd invoice_manager

Configure your database credentials in config/dev.exs, then run:

mix ecto.create

Step 2: Generate the Context and Schema

Generate the context and schema for invoices:

mix phx.gen.context Billing Invoice invoices \
  customer_name:string item:string quantity:integer price:decimal due_date:date

Review the generated files:

Context: lib/invoice_manager/billing.ex
Schema: lib/invoice_manager/billing/invoice.ex
Migration: priv/repo/migrations/*_create_invoices.exs

Step 3: Define the Database Migrations

Edit the migration file to define your table:

defmodule InvoiceManager.Repo.Migrations.CreateInvoices do
  use Ecto.Migration

  def change do
    create table(:invoices) do
      add :customer_name, :string
      add :item, :string
      add :quantity, :integer
      add :price, :decimal
      add :due_date, :date
      timestamps()
    end
  end
end

Run the migrations:

mix ecto.migrate

Step 4: Create LiveView Modules

Generate the LiveView for invoices:

mix phx.gen.live Billing Invoice invoices \
  customer_name:string item:string quantity:integer price:decimal due_date:date

Review the generated files:

LiveView Modules: lib/invoice_manager_web/live/invoice_live/index.ex and show.ex
HTML Templates: lib/invoice_manager_web/live/invoice_live/index.html.heex and show.html.heex
Test Files: Associated test files for LiveView

Step 5: Implement Invoice Management Features

Define the routes in lib/invoice_manager_web/router.ex:

scope "/", InvoiceManagerWeb do
  pipe_through :browser

  live "/invoices", InvoiceLive.Index, :index
  live "/invoices/new", InvoiceLive.Index, :new
  live "/invoices/:id/edit", InvoiceLive.Index, :edit
  live "/invoices/:id", InvoiceLive.Show, :show
  live "/invoices/:id/show/edit", InvoiceLive.Show, :edit
end

Start the Phoenix server:

mix phx.server

Access the app at http://localhost:4000/invoices.

Step 6: Customize and Test

UI Customization: Enhance with CSS or Tailwind CSS for a responsive, attractive UI.
Testing: Add test cases for your LiveViews and ensure all CRUD operations work from the UI.

Step 7: Deployment (Optional)

Compile assets:

MIX_ENV=prod mix assets.deploy

Run the production server:

MIX_ENV=prod mix phx.server

This guide outlines the basic steps for creating a Phoenix LiveView app for managing invoices. Customization and further scalability depend on your specific requirements.

How I Used Runner H

I provided Runner H with a single prompt asking for a detailed guide to build a Phoenix LiveView invoice management app. Runner H generated a complete, structured tutorial including commands, file locations, and explanations. This shows how Runner H can streamline developer workflows by producing technical content quickly and accurately without needing any local development setup or coding.

Use Case & Impact

This approach benefits Phoenix developers, especially beginners, by offering instant, easy-to-follow guides to complex topics. It saves time normally spent searching documentation and writing instructions, allowing developers to focus on coding and experimentation. Runner H empowers developers by automating knowledge work and accelerating project planning.