A full stack (NextJS with Typescript) app where you will get free PDF templates make as many changes as you want and generate the PDF to download it!
🎬 Video Demo(In case you dont wish to download ,you can view my linkedin post to watch the demo there)
https://www.linkedin.com/posts/mainak-mukherjee1234_launching-pdfternity-v2-edit-there-activity-7219380702742536193-voZ_?utm_source=share&utm_medium=member_desktop
Technologies used in the project:
- NextJS
- TailwindCSS
- OneDoc API
- Google Analytics
Here're some of the project's best features:
- Built with latest technologies like NextJS , TailwindCSS , Typescript.
- Cool Landing Page made using Aceternity UI.
- Currently features three awesome PDF templates:Detailed CV, Airbnb, Receipt and Invoice
- Make as many changes as you want !
- Responsive app view the proper PDF layout even on mobile
- Use text editors to reproduce italics or bold text for highlighting key data
- Can generate both light and dark mode view of the pdf
- Finally generate the PDF and download it!
- Built on top of Onedoc API a super cool tool to convert code to PDF.
- Uses Google Analytics for website tracking.
* Now once the user is finished , Generate button will be clicked which will do two things:i) store the data and the template currently being used in the local storage of the browser ii) redirect the user to viewPDF page.
* As soon as the viewPDF page gets loaded , the useEffect hook runs (being made to run only intially when the component loads) , a POST call is made to the backend server's api (at "/api/v1/getPDF") where the template and data is passed as requestbody (server won't be able to access localstorage so we will need to pass it from the client side) .
* In the controller of the api , we call the OneDocPdf component and pass the data and template info to it.
* In the OneDocPdf Component we call that specific component which matches teh template and returns its JSX prepared using the data which was passed to it as props. The JSX gets wrapped with Tailwind from @onedoc/react-print so that the tailwind classes remain active in their server. The resulting JSX is compiled into html and css using compile function and it is sent to onedoc server for conversion into pdf data (this thing happens internally and implemented using onedoc.render. That data is sent back to the client .
* After the pdf data is received , the corresponding PDF gets displayed removing the loading screen.
1. Clone the project
git clone https://github.com/career-tokens/pdfGenerator
2. Go to the project directory
cd pdfGenerator
3. Install dependencies
npm install
4.Create .env file according to .env.example and make sure to put corresponding values to the environment variables. Collect OneDoc API from their website
5. Run the server:
npm run dev