Build a PDF Invoice Generator with Next.js 14, TypeScript, and Directus

[wisdomekpotu]

What is your idea?

This post will teach readers how to build a PDF Invoice Generator with Next.js 14, TypeScript, and Directus.

What are the key takeaways from your post?

Key Takeaways:

• Integrate Directus with Next.js 14
• Set up Directus with Directus Cloud
• Authentication with Directus
• Storing and retrieving data with Directus
• Working with Directus Javascript SDK
• Using Directus Extension

Outline:

• Introduction
• Project Demo
• Prerequisites
• Setting up the Backend
  • Creating a Directus Project
  • Setting up a collection for invoices
  • Setting up Roles and Permissions
• Scaffolding a Next.js 14 project with TypeScript
• Adding TailwindCSS
• Building the frontend
  • Creating the invoice interface
  • Get values from our invoice fields
  • Add invoice items functionality
  • Remove Invoice item functionality
  • Invoice price computation
• Connecting to Directus via SDK
• Saving Invoice data to Directus
• Generating Invoice pdf with the TextToAnyThing API.
• Fetching Data from Directus
• Handle PDF download
• Setting Up Authentication
• Create user dashboard with saved invoices
• User-to-invoice Relationship
• Deploying App
• Conclusion

What type of post is this?

Full Project Build with Directus

Country of residence

Nigeria

Terms & Conditions

• [X] You understand that submitting this form does not mean we accept your proposal. We will accept proposals at our discretion.
• [X] You understand that to be paid you will need to generate an invoice with a 30 day payment term and send it to us once the final draft of your work is accepted (we will share how to do this once finished).
• [X] You understand that you will require either a bank account in one of the countries listed here (https://help.bill.com/direct/s/article/360007172671) or a PayPal account.
• [X] You understand that you will grant us an unlimited license to post and promote your work as part of this program. You may repost, but using our copy as the canonical source.
• [X] You are aged 18 or over.

[github-actions[bot]]

Thank you for submitting an idea for our guest blog.
We work through new ideas every few weeks as we put together our content schedule. This means you may not get an immediate response as to whether your idea has been accepted, or any follow-up questions we have to clarify your idea.
If your idea is accepted, we will provide a deadline for first draft and how much we can pay you for the post. You will have a few days to confirm whether you are still able and willing to write the post.
If you have any questions in the meantime, feel free to add a comment to this issue.

[phazonoverload]

Is your intention to generate the PDF inside of your Next.js application, or inside of Directus itself?

[wisdomekpotu]

@phazonoverload It will be within Directus through the TextToAnyThing API. I have updated the outline.

[phazonoverload]

This is good - I just don't want to use Tailwind. I'd rather a more minimal set of styling but standard CSS usage please.

Based on the agreed scope we can pay $500 for this post and the accompanying repository which you can create in your account and we will fork.

This post will be included as part of our July content schedule. The first draft is due on June 24 so we have time to properly review it and you have time to respond.

If interested and you’re happy to commit to the deadline, please let me know in the next few days and I will mark this issue as Approved.

The process is detailed in the README of this repo 😄

[wisdomekpotu]

Hi @phazonoverload I am interested and will commit to the deadline.

[BB-Loft]

Hi @wisdomekpotu, please can I get an update on when the first draft is going to be shared? It was due June 24.

[wisdomekpotu]

Hi @BB-Loft sorry for the delay, had a little roadblock but its all good now. The draft will be ready by Friday 5th. Thanks

[BB-Loft]

Hi @wisdomekpotu, is there an update on this? We'll need to receive the draft by this Wednesday 10th July to be able to continue or we'll have to close this issue as no longer planned.