All work
Mediawave · Reporthink.ai Internship · 2024

ReporthinkTemplate Editor

Static templates, made editable.

Reporthink.ai offers ready-made report templates: sustainability reports, annual reports, company profiles. Users could pick one, but they couldn’t change a word of it. I built the editor that lets them edit the text and colours, swap the photos, rearrange the pages, save, and export an A4 PDF, all in the browser.

Try the editor How it’s built
Template 71 · Brown Green Yellow
A template’s page in the editor: a large preview of a brown, orange and yellow sustainability report cover, a Use template button, and a grid of its Template Parts
My role
Design & full-stack development
Context
Front-end internship, Mediawave · my thesis at Prasetiya Mulya
Timeline
July – December 2024
Stack
Django · Tailwind · JavaScript

01The problem

A template you can’t edit is just a picture of a report.

Before

Pick a template. Then you’re on your own.

Users could choose a layout from Reporthink.ai’s library, but they couldn’t add their own text, change a colour or replace a photo. The report they needed was right there, and none of it was editable.

BrowsePickCustomiseExport

After

Edit it in the browser. The design holds.

Text, colours, photos and pages are all editable, while the structure the designers built stays locked in. Save it, come back to it later, and export a print-ready A4 PDF.

PickEditSaveExport PDF

02Try it

The editor, in miniature.

A working slice of the real thing, rebuilt for this page. Click any text to rewrite it, recolour the template, drop in your own photo, and drag the pages into a new order.

Sustainability Report · Page 1 of 4 · Cover Saved
Hands planting a seedling in dark soil

Sustainability Report

2024
2025

Growing a greener tomorrow

How we cut our energy use, protected water and planted for the future, 2024–2025.

01

Performance at a glance

38%less energy per unit produced
12Ktrees planted with local communities
4.2Mlitres of water recycled
96%of suppliers assessed

A message from our director

— The Director, for the Board

Thank you!

hello@company.com
www.company.com

Cover
Highlights
Message
Thank you

Rebuilt for this page. The real editor runs on Django and exports with html2canvas + jsPDF; this one skips the download.

03The real editor

The real thing, annotated.

Template Editor · Template 71
The editor: the document title with a Download as PDF button and a save button above page one of three, a cover with a logo placeholder and a photo of hands planting a seedling

  1. Pages are Template Parts

    Every page, from the cover to the director’s message to the closing page, is a part from the template’s library. Add one, reorder them, or delete what you don’t need.

  2. Colour and type, per element

    A real-time colour picker restyles the selected element. Text gets fonts, bold, italic and alignment.

  3. Click or drop to replace

    Placeholder photos and logos are swapped by clicking them, or by dragging a new file straight onto the canvas.

  4. Download as PDF

    html2canvas renders each page and jsPDF assembles them into a print-ready A4 PDF.

  5. Save, come back later

    Your work is saved as your own document. The master template stays untouched, and your edits wait in your dashboard.

04How it’s built

Masters stay masters.

The whole data model protects one rule: a template is never edited. Using one creates a UserDocument, your own copy, so the originals stay untouched for every other user.

Back endPython & Django, on Django’s MVT architecture.
Front endTailwind CSS via django-tailwind, and vanilla JavaScript for the editor’s DOM work.
DatabaseSQLite in development, PostgreSQL-ready through the Django ORM.
PDF exporthtml2canvas + jsPDF, rendered in the browser to A4.
AdminDjango admin to manage templates and their parts.

Template master

  • id PK
  • name text
  • category SR · AR/QR
  • description text
  • thumbnail image

TemplatePart page

  • id PK
  • template_id FK
  • name text
  • html text
  • order int

User auth

  • id PK
  • username text
  • email text

UserDocument your copy

  • id PK
  • user_id FK
  • template_id FK
  • title text
  • content json
  • updated_at datetime
Simplified from the project’s ERD. Field names are illustrative.

05Screens

From gallery to PDF.

Templates
The template gallery: a search field, filters for all, SR and AR/QR templates, and cards for four report covers
The gallery: search, and filter by report type.
Template 71
A template’s page: the cover preview, a Use template button and the grid of its Template Parts
A template, with all the parts it comes with.
Template Editor · Parts
A Select Template Parts dialog over the editor, offering eight page layouts to add
Adding a page from the Template Parts library.
My documents
The dashboard: Welcome, adrian, and a grid of saved documents with Edit and delete buttons
Saved documents, ready to pick up again.
New document
Create New Template: a single name field and a Create Template button
Naming a new document before editing.
Django administration
Django admin listing template parts such as covers, vision and mission pages and closing pages for each template
Django admin, where templates and their parts are managed.

06My role

What I built.

I joined Mediawave’s Reporthink.ai team as a front-end intern. Alongside the team’s template work, I designed and built the Template Editor end to end.

  1. 01

    End-to-end build

    Built the back-end logic in Django, and the editor’s interactive front end in JavaScript and Tailwind CSS.

  2. 02

    System design

    Designed the database schema (ERD) that keeps users, master templates, their parts and each user’s edits apart.

  3. 03

    UI/UX

    Designed the wireframes, high-fidelity mockups and the final responsive interface, in Reporthink.ai’s branding.

  4. 04

    Testing & QA

    Wrote unit tests for authentication and the database models, and ran user acceptance testing to refine the flow.

~80

HTML/CSS templates, alongside the editor.

The rest of the internship: converting report designs into clean, design-accurate HTML/CSS with the team, and supporting front-end work on the main website under a senior developer. Several of those pages went into the live site.