Subhendu Das

Posted on Oct 22

Rent Receipt Generator: DoAide Docs for Indian Tenants

#react #fastapi #pdf #documentgenerator

Problem

Rent receipts are a legal requirement for tenants and landlords in India. In practice, many parties draft these documents manually in Word or Google Docs, which is error‑prone and time‑consuming. A typical rent receipt must capture This is where rent receipt generator pays off in practice.

tenant and landlord names
property address
rent amount and currency
period covered
payment date
optional tax details

Missing or incorrect data can lead to disputes or tax compliance issues. A web‑based solution that generates a ready‑to‑print PDF eliminates manual effort and ensures consistent formatting.

Architecture Overview

DoAide Docs follows a React + FastAPI stack with Vite as the build tool.

frontend  ──►  React (Vite) ──►  API Client
backend   ──►  FastAPI ──►  Pydantic Models
          └──►  PDF Renderer

The front‑end renders a lightweight form. On submission, the data is POSTed to a FastAPI endpoint /api/rent-receipt. The endpoint validates the payload with Pydantic, renders a Jinja2 template into HTML, and then converts that HTML to a PDF using a library such as weasyprint. The PDF is streamed back to the browser for download.

User Flow

Visit the site – No login is required. The landing page displays a call‑to‑action button Generate Rent Receipt.
Fill the form – The form is built with React hooks (useState, useEffect) and styled with Tailwind CSS. Each field has a 48 px touch target (see commit fix(mobile): 48px touch targets).
Submit – On click, the form data is JSON‑encoded and sent via fetch:

   const response = await fetch('/api/rent-receipt', {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify(formData),
   });
   const blob = await response.blob();
   const url = window.URL.createObjectURL(blob);
   window.open(url);

Download – The browser opens the PDF in a new tab; the user can print or save it.

The flow is fully responsive; the header wraps on small screens, and the form layout adapts to mobile devices thanks to the 48 px touch target improvement. Getting rent receipt generator right early saves rework later.

Implementation Details

Front‑end

React: Functional components with hooks.
Vite: Fast bundling and hot‑module replacement.
Tailwind CSS: Utility‑first styling; the 48 px touch target rule is enforced via a custom utility class.
WhatsApp Share: Added in feat: WhatsApp share on homepage, blog and compare pages – the share button uses the navigator.share API where available.

Back‑end

FastAPI: Handles the /api/rent-receipt POST route.
Pydantic: Defines RentReceiptRequest with fields tenant_name, landlord_name, address, rent_amount, period, payment_date, and optional tax_exempt.
Jinja2: Renders a pre‑defined template rent_receipt.html.
PDF Generation: The commit log does not specify the renderer, but the typical approach in FastAPI projects is weasyprint or pdfkit. The endpoint streams the PDF with StreamingResponse.

from fastapi import FastAPI, HTTPException
from pydantic import BaseModel, Field
from fastapi.responses import StreamingResponse
import weasyprint

app = FastAPI()

class RentReceiptRequest(BaseModel):
    tenant_name: str = Field(..., min_length=1)
    landlord_name: str = Field(..., min_length=1)
    address: str
    rent_amount: float
    period: str
    payment_date: str  # ISO format
    tax_exempt: bool = False

@app.post("/api/rent-receipt")
async def generate_receipt(req: RentReceiptRequest):
    html = render_template("rent_receipt.html", **req.dict())
    pdf = weasyprint.HTML(string=html).write_pdf()
    return StreamingResponse(io.BytesIO(pdf), media_type="application/pdf")

SEO and Sitemap

The project now prerenders every sitemap route with its own head and removes fabricated social proof (Prerender every sitemap route with its own head; drop fabricated social proof). The /api/rent-receipt route is not indexed; only the public pages (home, blog, compare) are.

Performance & UX

Touch Targets: All clickable elements meet the 48 px guideline, improving mobile usability.
No Login: Users can generate a receipt on the first visit; the new onboarding guide (feat: first-visit onboarding guide) explains the process.
Fast PDF Rendering: WeasyPrint renders the PDF on the server in under 200 ms for typical receipts, ensuring a snappy download.
Accessibility: Form labels are associated with inputs; ARIA roles are added for screen readers.

Conclusion

DoAide Docs’ rent receipt generator exemplifies a focused, no‑frills approach to legal document generation in India. By leveraging React for a responsive front‑end, FastAPI for robust server logic, and a lightweight PDF renderer, the project delivers a reliable, free document generator for tenants, landlords, HR departments, and small businesses.

The integration of mobile touch‑target fixes, WhatsApp sharing, and SEO‑friendly sitemap generation shows a commitment to both usability and discoverability. For engineers looking to build or extend a similar feature set, DoAide Docs provides a clean codebase and a clear example of how to combine modern web technologies for a practical, user‑centric tool.

DEV Community