Forem: Manifest

Develop a Simple PDF Invoicing App for your Business with CASE

Bruno Pérez — Mon, 02 Oct 2023 15:14:11 +0000

In our example, we want to develop a simple invoicing web app as fast as possible for our business. 💰💰💰

For that motive, we are going to use CASE, a simple tool to quickly generate dashboards and add our own custom logic.

This simple guide will follow 4 steps:

Install CASE
Generate entities
Add properties
Generate a PDF on invoice creation

1. Install CASE

Let's start generating the app with this simple command ✨✨

npx create-case-app my-invoicing-app

This will launch your invoicing app on your browser. You can go to the my-invoicing-app folder and open the folder with your favorite IDE.

That's it for the install.

2. Generate entities

Our project will need 2 entities: a Customer and an Invoice. Invoices belongs to Customers, and a Customer can have many invoices.

The command to generate a new entity is straightforward:

npm run case:entity customer

and the second one:

npm run case:entity invoice

You should see that the customer.entity.ts and the invoice.entity.ts files have been created ! Check out the UI to see those entities in action.

3. Add properties

By default, entities only come with a name property. We are going to add more to it. Let's start with the customers:

// entites/customer.entity.ts

@Entity({
  nameSingular: "customer",
  namePlural: "customers",
  propIdentifier: "name",
  slug: "customers",
})
export class Customer extends CaseEntity {

  // Customer logo.
  @Prop({
    type: PropType.Image,
  })
  logo: string;

  // Customer name.
  @Prop({
    type: PropType.Text,
    seed: () => faker.company.name(),
  })
  name: string;

  // Customer address with a nice seeder for the dummy data.
  @Prop({
    type: PropType.Text,
    seed: () =>
      faker.location.streetAddress() +
      ", " +
      faker.location.city() +
      ", " +
      faker.location.state() +
      " " +
      faker.location.zipCode(),
  })
  address: string;
}

The @Prop decorator is getting:

The type of the property
The seed function that generates the dummy data

Let's go with the invoices now:

// entities/invoice.entity.ts

@Entity({
  nameSingular: "invoice",
  namePlural: "invoices",
  propIdentifier: "label",
  slug: "invoices",
})
export class Invoice extends CaseEntity {
  @Prop({
    type: PropType.Text,
  })
  label: string;

  @Prop({
    type: PropType.Date,
    label: "Issue Date",
  })
  issueDate: string;

  // Represents the relation with the Customer entity.
  @Prop({
    type: PropType.Relation,
    options: {
      entity: Customer,
    },
  })
  customer: Customer;

  // PropType.Currency accepts all currencies, default is USD.
  @Prop({
    type: PropType.Currency,
  })
  amount: number;

  @Prop({
    type: PropType.Currency,
  })
  taxes: number;

  // This prop will store the path of the generated PDF file.
  @Prop({
    type: PropType.File,
    options: {
      isHiddenInCreateEdit: true,
    },
  })
  path: string;
}

Now that our props are filled, we can add some dummy data to see it in action:

npm run seed

This will generate a bunch of customers and invoices with the dummy properties. As you can see, we did not specify a seed function for all of those props, by default CASE tries to generate a mock data that corresponds to your type.

4. Generate PDF on insert

Last but not least, we need to generate a PDF on save and store its path as the invoice.path.

We are going to use the @BeforeInsert() decorator that triggers a function just before our item is inserted to the database:

// entities/invoice.entity.ts

@BeforeInsert()
generatePDF() {
  // We need a feature that generates a PDF based on our values and that stores it in the disk and returns the path.
  this.path = generateInvoiceInPDF({
      reference: this.reference,
      label: this.label,
      issueDate: this.issueDate,
      customerName: this._relations.customer.name,
      customerAddress: this._relations.customer.address,
      amount: this.amount,
      taxes: this.taxes
  })
}

Let's create that generateInvoiceInPDF() function !

We are going to use the jspdf package to create the PDF files. Let's create a utils/pdf.ts file with this content:

// utils/pdf.ts

import { jsPDF } from "jspdf";
import * as fs from "fs";

export const saveInvoiceInPDF = (content: {
  reference: string;
  label: string;
  issueDate: string;
  customerName: string;
  customerAddress: string;
  amount: number;
  taxes: number;
}): string => {
  var doc = new jsPDF();

  // Title.
  doc.setFontSize(28);
  doc.text(`Invoice: ${content.reference}`, 20, 25);

  // Other content.
  const fontSize: number = 14;
  const x: number = 35;
  doc.setFontSize(fontSize);

  doc.text(content.label, 20, x);
  doc.text(content.customerName, 20, x + fontSize);
  doc.text(content.customerAddress, 20, x + fontSize * 2);
  doc.text(content.issueDate, 20, x + fontSize * 3);
  doc.text(`Amount: ${content.amount}`, 20, x + fontSize * 4);
  doc.text(`Taxes: ${content.taxes}`, 20, x + fontSize * 5);

  var data = doc.output();

  const storagePath = "./public/storage";
  const path = `/invoices/${content.reference}.pdf`;

  fs.writeFileSync(storagePath + path, data, "binary");

  return path;
};

This code is producing a basic PDF will the invoice information. I am not digging to much on that part in this tutorial but if you want to create a nice PDF, checkout jspdf doc or you can even get directly invoice templates for it.

You can find all that code in the Github repo of this project, Enjoy your coding !

Wanna give some ❤️ ?

If you enjoyed this tutorial and developing with CASE, Star us on Github and like or share this post ! We are actively looking for CASE testers and users to improve our project !

Build an AI-powered NFT generator with TS, GPT, Polygon and CASE (Part 1/2)

Bruno Pérez — Thu, 07 Sep 2023 15:00:53 +0000

Let's build an instant NFTs generator! ✨✨

We will create a web app that will let users mint a NFT in one click: creating an AI art from a prompt, storing it on IPFS and mint the unique NFT in Polygon so you can see it on OpenSea. Pretty cool right ?

The source code is available on this Github repo.

Steps summary

Part 1

A. Create a dashboard with a "create NFT" form
B. Generate AI Art with OPEN AI Image generation
C. Store it on IPFS

Part 2

A. Create NFT contract
B. Deploy it to Polygon
C. Mint an NFT on the flow with image and metadata

Part 1

A. Create a dashboard with a "create NFT" form

First let's generate our dashboard with CASE by running this command:

npx create-case-app my-nft-app

This will create a CASE CRUD app where you can add your NFT entity.

Then from the root of the project run:

npm run case:entity nft

This command will create the nft.entity.ts file in the entities folder. You should see in your browser that you have a new NFT link in the sidebar.

You can click on it and you will see that the NFT entity has already one "name" property: a simple text field. Let's add 2 more:

The owner of the NFT that will receive the wallet address of the owner
The image that will receive the url of the image on IPFS (hidden in the form as it will be automatically filled)

  // entities/nft.entity.ts
  [...]
  @Prop({
    type: PropType.Text,
  })
  owner: string;

  @Prop({
    type: PropType.Link,
    options: {
      isHiddenInCreateEdit: true,
    },
  })
  image: string;

And one more thing, we can add a function below the @BeforeInsert() decorator to hook our custom logic right before the moment where the entity gets stored in the database:

@BeforeInsert()
async mintNFT() {
  console.log("Before Insert...");

  // Mint that NFT !
}

B. Generate AI Art with OPEN AI Image generation

It is now the time to call the OPEN AI Image generation API to generate an image based on our prompt: the name field of the NFT entity.

We are going to use axios to make the HTTP requests. Let's install it:

npm i axios

Then you can create the file that will call the API to generate our AI art. Let's call it generate-ai-art.ts You will need to generate your OpenAI API key and store it in the .env file at your project root as OPENAI_API_KEY

// utils/generate-ai-art.ts
import axios from "axios";

export const generateAiArt = async (prompt: string): Promise<string> => {
  const response = await axios.post(
    "https://api.openai.com/v1/images/generations",
    {
      // We pass the prompt as the prompt argument.
      prompt,
      // Smallest size available, let's limit our footprint.
      size: "256x256",
    },
    {
      headers: {
        // Get your own key and at it to the .env file
        Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,
      },
    }
  );

  // Get the image URL from the API response.
  return response.data.data[0].url;
};

Back to our nft.entity.ts file, we can import the function and trigger it:

import { generateAiArt } from "../utils/generate-ai-art";
[...]

@BeforeInsert()
async mintNFT() {
  console.log("Before Insert...");

  // "This" refers to the NFT entity we are creating.
  this.image = generateAiArt(this.name);
}

If you go back to your CASE dashboard and create a new NFT, you will see that the submission loads a bit and once done, the image field is field with a link to the AI generated image like my "red bear". Cheers !

C. Store it on IPFS

IPFS is a great way for storing NFT related data: it is decentralized and resilient. If your NFT image url points out to your server, it looses some of its value as you can change it whenever you want.

We will use Pinata as a gateway for IPFS. Once again you will need to create an accout to get your secret token for API authentication.

npm i @pinata/sdk

We are going to create a new file called pin-to-IPFS.ts to hold the script.

I recommend to create a storage folder in order to store your temporary files. Indeed we are downloading the file first and the we will pin it to IPFS.

In this script, we are using a basic download function to get the image from the OpenAI servers and the we use the Pinata SDK to upload it to IPFS.

// utils/pin-to-IPFS.ts
const axios = require("axios");
const fs = require("fs");
const pinataSDK = require("@pinata/sdk");

export const pin = async (url: string): Promise<string> => {
  const imagePath: string = await downloadFile(url, "storage/file.png");

  // Init the SDK.
  const pinata = new pinataSDK({ pinataJWTKey: process.env.PINATA_JWT });

  // Read the downloaded file.
  const stream = fs.createReadStream(imagePath);

  // Push it to the IPFS network.
  const pinataRes = await pinata.pinFileToIPFS(stream, {
    pinataMetadata: {
      name: "NFT art",
    },
  });

  // Delete local file.
  fs.unlinkSync(imagePath);

  // We return a link with the hash.
  return "ipfs://" + pinataRes.IpfsHash;
};

// Simple download file function.
const downloadFile = async (url: string, path: string): Promise<string> => {
  const res = await axios.get(url, { responseType: "stream" });

  return new Promise((resolve, reject) => {
    res.data
      .pipe(fs.createWriteStream(path))
      .on("error", reject)
      .once("close", () => resolve(path));
  });
};

And now we just need to connect the dots too have the full experience:

// entities/nft.entity.ts
  [...]
  @BeforeInsert()
  async mintNFT() {
    console.log("Before Insert...");

    const generatedImage: string = await generateAiArt(this.name);
    this.image = await pin(generatedImage);
  }

Conclusion

That's it for the first part ! Then we will use Hardhat to deploy our Solidity Contract on the Polygon testnet, and then overload our mintNFT() function with the actual minting. If you want to see the Part 2 quickly, give us some love and we will execute ! ❤️❤️❤️

And if you thought that CASE is pretty cool to build your CRUD apps (it really is), ⭐ star us on Github to follow the project. The product has so much room to improve, we are really looking to create a great community around it. 🫶

CASE V2 Proof of Concept launch

Sébastien Conejo — Tue, 11 Jul 2023 09:39:20 +0000

Dear CASE Community,

Let's celebrate the release of the PoC CASE V2 and see what's next!

Context

CASE aims to enable developers to quickly and easily create CRUD applications such as dashboards, administration panels, ERP or CRM.

In April 2023, we released CASE V1. Since then, we've asked you to use it and give us your feedback.

CASE V1 was a fail

10 days after the launch of CASE V1, we made the following disappointing assessment:

Developers complained that it was just another framework.
only a few dozen downloads of CASE
An obvious lack of enthusiasm from developers

Indeed, like many other existing tools, CASE offered no real added value. It was just another framework with a very specific stack. It was hard to adopt.

From then on, we questioned the product. We put out a questionnaire to developers who had already built CRUD applications, to understand their expectations.

The most important thing for you when developing a CRUD app!

Your feedback was unanimous!

The features you're looking for when creating CRUD applications:

Quick setup ✨;
Key basic features 🛠️;
A clear and up-to-date documentation 📄.

What you want to avoid:

Learning new things;
Spending too much time on configuration;
Using proprietary solutions.

We decided to swap the whale for a clownfish

Thanks to your feedback, we have defined a new version of CASE, more agile and simpler. Finally, a version that lives up to its promise.

CASE V2 will enable junior or senior developers to deliver CRUD applications in minutes. Installation, development and deployment will be a breeze.

CASE V2 is scheduled for release in mid-September!

Enjoy the PoC

In the meantime, we're proud to provide you with a PoC of this V2. It includes some V2 features:

One-line command installation
Frameworkless: No need to learn new stuff
Easy config, development and deploy
Ready-to-go UI for end-users
Possibility to hook a custom logic to entity events

What's next ?

We're looking for a few developers who'd be willing to take part in the PoC individually during a video-call.

Our aim is to confirm that CASE does indeed make it possible to develop a crud app quickly and easily.

We'll be taking this work into account for the release of V2.

If you're interested, contact us via our Discord, in public or by PM.

CASE v1 released. The fastest way to build CRUD apps

Bruno Pérez — Tue, 04 Apr 2023 09:14:10 +0000

Hello dear colleagues ! 👩🏻‍💻

We are very happy to launch the v1 of CASE 🚀

CASE is a full stack framework combining Angular and NestJS.

CASE's purpose it to ship very fast CRUD apps like dashboards, admin panels and ERP without having to trade-off any of your freedom 🏖

Here a few specs:

CLI based on Angular/Nest syntax to create Resources and Props in 1 command
RBAC system with roles, permissions
50+ UI elements with logic and validation (inputs, filters...)
file upload/download system and Word/PDF/Excel generation,
Total control of your code

We are currently looking for BETA testers to give us feedback and advice on the direction to take 🙏🙏🙏

If you are interested go try the CASE Framework and contact us through our Discord.

mnfst / manifest

A shadcn/ui library for building ChatGPT Apps

Warning

Looking for the Manifest 1-file backend? See this repo instead.

Production-ready UI blocks for ChatGPT apps, built on top of shadcn/ui

Why Manifest?

Manifest helps developers create their agentic applications like ChatGPT or MCP Apps by giving them a set of components made for this format.

Each block and component is a production-ready asset that you can customize and extend to adapt to your project.

All elements are Open source and hosted in this repository.

Getting started

Make sure you have shadcn/ui installed in your project and install a block with your CLI:

# Using npx
npx shadcn@latest add @manifest/table

Community & Resources

Chat with us on our Discord
Report bugs on GitHub issues
Suggest new features on GitHub Discussions

Want to help Manifest grow? 💗

Here is a few small things you can do:

Star the Manifest repository
Give us your feedback on Discord
Sponsor Manifest through Github

…

View on GitHub

Forem: Manifest

Develop a Simple PDF Invoicing App for your Business with CASE

1. Install CASE

2. Generate entities

3. Add properties

4. Generate PDF on insert

Wanna give some ❤️ ?

Build an AI-powered NFT generator with TS, GPT, Polygon and CASE (Part 1/2)

Steps summary

Part 1

Part 2

Part 1

A. Create a dashboard with a "create NFT" form

B. Generate AI Art with OPEN AI Image generation

C. Store it on IPFS

Conclusion

CASE V2 Proof of Concept launch

Context

CASE V1 was a fail

The most important thing for you when developing a CRUD app!

We decided to swap the whale for a clownfish

Enjoy the PoC

What's next ?

Links

CASE v1 released. The fastest way to build CRUD apps

mnfst / manifest

A shadcn/ui library for building ChatGPT Apps

Why Manifest?

Getting started

Community & Resources

Want to help Manifest grow? 💗