Bionesia

About DataGenetik

DataGenetik, built for Bionesia, is a collaborative platform for biodiversity genetic information that supports conservation, research, and sustainable ecosystem management. Indonesia sits at the centre of the Coral Triangle, one of the richest regions of marine life on Earth, yet many of its species still lack genetic reference data.

The challenge

Genetic records are dense scientific data: species, sample IDs, sampling locations, and research details. Researchers need to find the right records quickly, see where samples were collected, and contribute new data, while the platform stays understandable for partners and the public. The audience is bilingual too, so every screen needs Indonesian and English.

My role

At Sawala Technology, I built the front end with Vue.js and Nuxt, working against the backend team’s REST API.

What I built

Exploring the database

• Searchable, filterable views that turn complex scientific records into readable tables and detail pages.

• An interactive map that plots genetic records by sampling location, with clustering so dense areas stay readable.

• Data export for signed-in researchers.

Contributing and managing data

• Guided submission forms that walk researchers through adding new records.

• An admin area to manage records, import data in bulk from Excel, publish stories, and manage users.

Accounts and access

• Sign-up with email verification, followed by an account review before researchers can open the database.

• Three levels of access: public pages for everyone, the database for approved users, and full management for admins.

• Indonesian and English across the whole platform.

Architecture overview

A high-level view. One Nuxt front end serves every audience. Sign-in is handled by Clerk, and all records come from the platform’s REST API, cached on the client so tables and the map stay responsive.

flowchart LR
  accTitle: DataGenetik platform overview
  accDescr: Visitors, researchers, and admins use one Nuxt front end. Clerk handles sign-in, and records come from the platform’s REST API.
  visitor([Visitor]) --> publicPages
  researcher([Researcher]) --> auth
  adminUser([Admin]) --> auth
  subgraph web["Nuxt front end"]
    publicPages["Public pages<br/>about, stories, contact"]
    auth{"Sign-in and<br/>account review"}
    explore["Database explorer<br/>search, filters, map, export"]
    submit["Data submission"]
    manage["Admin area<br/>records, Excel import, stories, users"]
    auth --> explore & submit & manage
  end
  auth -.- clerk["Clerk"]
  explore & submit & manage --> api[("Platform REST API<br/>backend team")]

Researcher accounts

stateDiagram-v2
  accTitle: Researcher account lifecycle
  accDescr: A new account confirms its email, waits for a review by the team, and gets database access once approved.
  state "Registered" as Registered
  state "Email verified" as Verified
  state "Under review" as Review
  state "Approved" as Approved
  [*] --> Registered: Signs up
  Registered --> Verified: Confirms email
  Verified --> Review: Waits for review
  Review --> Approved: Team approves
  Approved --> [*]

Keeping tables and the map in sync

sequenceDiagram
  accTitle: Keeping tables and the map in sync
  accDescr: After an admin changes a record, the related cached queries are refreshed so tables and the map show the new data.
  actor Admin
  participant UI as Nuxt app
  participant Cache as Query cache
  participant API as REST API
  Admin->>UI: Updates a record
  UI->>API: Saves the change
  API-->>UI: Confirms
  UI->>Cache: Invalidates related queries
  Cache->>API: Refetches tables and map data
  API-->>Cache: Fresh data
  Cache-->>UI: Re-renders with the update

Tech stack

Nuxt, Vue.js, TypeScript, Tailwind CSS with shadcn-nuxt, Clerk, TanStack Query and TanStack Table, Leaflet, Highcharts, and Nuxt i18n.

Result

DataGenetik is live in public beta at datagenetik.id, with 200+ genetic records from 5+ partner institutions.