The Ruoth Recipe Card Application is a full-stack web application designed to generate, edit, and download printable recipe cards in high-quality PDF format. Built using React (frontend) and Flask (backend), this system allows users to customise recipes, apply professionally designed templates, and securely access their purchased designs. The backend ensures secure authentication and processes PDF generation using WeasyPrint, while the frontend leverages HTML2PDF.js for local PDF creation.

🔹 Frontend Development:

• Built the React-based UI for editing and formatting recipe cards.
• Integrated HTML2PDF.js for local PDF generation.
• Optimized form state management for a smooth user experience.

🔹 Backend Development:

• Developed a secure Flask API for user authentication and recipe template retrieval.
• Implemented JWT authentication & rate limiting for security.
• Integrated WeasyPrint for high-resolution PDF generation.

🔹 Performance & Optimisation:

• Ensured smooth UI by reducing re-renders and optimising asset loading.
• Used lazy loading for images to speed up the interface.

🔹 Security & Data Protection:

• Implemented secure authentication (JWT tokens).
• Ensured access control for purchased recipe card designs.

1. Scaling Issues with WeasyPrint

   • One of the primary challenges was ensuring that WeasyPrint correctly rendered the recipe card layout without scaling issues.
   • The issue arose from inconsistencies between CSS-based dimensions and WeasyPrint’s PDF rendering engine.
   • Solution: Defined explicit @page size settings and used precise CSS units (px instead of percentages) to ensure pixel-perfect rendering.

2. Handling User State in React During PDF Generation

   • React’s useState hook was used to store user-inputted recipe details dynamically.
   • When generating a blank template, the UI needed to reset all fields while preserving user data.
   • Solution: Implemented a backup state system that saves data before clearing the form and restores it after PDF generation.

3. Performance Optimisation for PDF Creation

   • Generating high-resolution PDFs with HTML2PDF.js or WeasyPrint was CPU-intensive, leading to UI lag.
   • Solution: Optimised performance by preloading assets, reducing re-renders, and leveraging background processing on the backend.

4. Ensuring Secure and Seamless Access to Purchased Designs

   • Since users buy different recipe card templates, the system needed to securely authenticate and grant access to only purchased designs.
   • Solution: Implemented JWT-based authentication and a design retrieval API, ensuring that users can access only their licensed designs.

• Mastered WeasyPrint for Scalable PDF Generation

  • Learned how CSS settings directly impact PDF rendering.
  • Understood the differences between browser rendering vs. print rendering.

• Developed Advanced React State Management for Forms

  • Built a temporary backup system for user input preservation.
  • Ensured smooth UI updates during and after PDF generation.

• Gained Expertise in Secure API Authentication

  • Implemented JWT authentication to restrict unauthorised access to purchased designs.
  • Strengthened security with rate limiting to prevent brute-force attacks.

• Improved Performance with Optimised PDF Processing

  • Reduced frontend rendering delays by optimising HTML-to-PDF conversion.
  • Used lazy loading for images to speed up UI interactions.