Letter template builder
Answered
Cantabrian Water Dog posted this in #help-forum
Cantabrian Water DogOP
I wish to develop a Next.js application that provides the administrator with the ability to create letter templates containing both static and variable sections. This application will allow regular users to select a template, customize the variable parts according to their needs, and then print the finalized letter.
I wonder there a open source project or tools or github project that could help me. Cause i dont know where to start ???
I wonder there a open source project or tools or github project that could help me. Cause i dont know where to start ???
Answered by B33fb0n3
so: render image/pdf whatever and add your clientside annotations on it. The imge/pdf file should be rendered serverside and also the annotations should be fetched serverside
25 Replies
Where is the question?
@B33fb0n3 Where is the question?
Cantabrian Water DogOP
I wonder there a open source project or tools or github project that could help me. Cause i dont know where to start ???
@Cantabrian Water Dog I wonder there a open source project or tools or github project that could help me. Cause i dont know where to start ???
you can go different ways:
1. [Docs](https://nextjs.org/docs)
-> Think about your project and what you need. Then take a look at the docs how to archive specific things. Build your app step by step
2. [NextJs Learn](https://nextjs.org/learn/dashboard-app)
-> Learn NextJs with the nextjs learn course. I guides you through all important things that nextjs provides
3. [Showcase](https://nextjs.org/showcase)
-> Take a look at big projects, that are made from very good developers and learn how they archive specific things
1. [Docs](https://nextjs.org/docs)
-> Think about your project and what you need. Then take a look at the docs how to archive specific things. Build your app step by step
2. [NextJs Learn](https://nextjs.org/learn/dashboard-app)
-> Learn NextJs with the nextjs learn course. I guides you through all important things that nextjs provides
3. [Showcase](https://nextjs.org/showcase)
-> Take a look at big projects, that are made from very good developers and learn how they archive specific things
I personally prefer and recommend you 1., because you learn the most
@B33fb0n3 I personally prefer and recommend you 1., because you learn the most
wish I did this, I just watched a tutorial (which was actually good) and then just started making projects and learning as I go which has been okay, but I'm starting to see gaps in my knowledge, which I know could have been avoided if I just read the docs. The nextjs ones are actually really good.
yea, of course it's harder to read through all the stuff and not just copying things, but learning IS hard.
@Cantabrian Water Dog solved?
Cantabrian Water DogOP
nono
@B33fb0n3 <@378912627914571786> solved?
Cantabrian Water DogOP
this something what im trying to do: https://www.jotform.com/sign/240095980927062
im a next dev since 1yr.
But for this projet i dont know what kind of library or module or anything that can allow me to create a template as admin and fill this template as client.
im a next dev since 1yr.
But for this projet i dont know what kind of library or module or anything that can allow me to create a template as admin and fill this template as client.
@Cantabrian Water Dog this something what im trying to do: https://www.jotform.com/sign/240095980927062
im a next dev since 1yr.
But for this projet i dont know what kind of library or module or anything that can allow me to create a template as admin and fill this template as client.
well... even for a next dev since 1 year that should be easy for you...
It's just a div that is centered with a flex inside and a imagine on top. Some texts under it and a button that redirects somewhere... so normally it should be easy for you. Or am I missing something? 🤔
It's just a div that is centered with a flex inside and a imagine on top. Some texts under it and a button that redirects somewhere... so normally it should be easy for you. Or am I missing something? 🤔
@B33fb0n3 well... even for a next dev since 1 year that should be easy for you...
It's just a div that is centered with a flex inside and a imagine on top. Some texts under it and a button that redirects somewhere... so normally it should be easy for you. Or am I missing something? 🤔
Cantabrian Water DogOP
lol right. wrong link my bad.
https://www.jotform.com/pdf-templates/e-sign/lease-agreement
choose "Simple One Page Lease Agreement"
https://www.jotform.com/pdf-templates/e-sign/lease-agreement
choose "Simple One Page Lease Agreement"
@Cantabrian Water Dog lol right. wrong link my bad.
https://www.jotform.com/pdf-templates/e-sign/lease-agreement
choose "Simple One Page Lease Agreement"
you can do nearly the same (take a look at my screenshot).
You can see (in red) that they using a canva to load the form (pdf or picture of the pdf). After you rendered it, you can set the annotations (in green) on the specific points on your page (save x and y position for example)
You can see (in red) that they using a canva to load the form (pdf or picture of the pdf). After you rendered it, you can set the annotations (in green) on the specific points on your page (save x and y position for example)
Cantabrian Water DogOP
owwkey i guess
what is annotation
@Cantabrian Water Dog what is annotation
in this case a annotation is the input field. In other projects for example in this 3d example annotations are points in a specific object, with that you can do special things: https://sbcode.net/react-three-fiber/house/
In the 3d example you can click on it and read text about the clicked annotation. In the jotform example annotations are also points that mark specific input fields, that have different variables and properties
In the 3d example you can click on it and read text about the clicked annotation. In the jotform example annotations are also points that mark specific input fields, that have different variables and properties
Cantabrian Water DogOP
they use a png. wow omg
haha yea... sometimes the web is easy 😄
think smart not hard 😉
@B33fb0n3 think smart not hard 😉
Cantabrian Water DogOP
suuuuuuuuuuuuure lol
so: render image/pdf whatever and add your clientside annotations on it. The imge/pdf file should be rendered serverside and also the annotations should be fetched serverside
Answer
Cantabrian Water DogOP
while (true) { console.log ("thannnk you so much 
" ) }
" ) }np, please mark solution 🙂
Enjoy the time with your project. I think it will be great for you ðŸ¤