This is intended for a desktop viewing experience.
Mert UzunogullariBack

datathere was built to be familiar at first look. I designed the foundational components as the first step to have an intuitive and clean interface.

mapping
hsl(249 90% 57%)
source
hsl(160 84% 39%)
destination
hsl(199 89% 48%)
autopilot
hsl(325 57% 46%)
Brand purple
hsl(249 90% 57%) · shadow-brand-glow
text-display
Map any source to any destination.
text-h1
Customers → Warehouse
text-h2
Mappings
text-h3
Section title
text-body
Body. The workhorse size for the product.
text-small
Small. Form labels and inline copy.
text-caption
Caption. Quiet meta beneath rows.
text-micro
MICRO · UPPERCASE · TABLE HEADERS

shadow-sm

0 1px 2px rgba(0,0,0,0.04)

Hairline lift for resting cards.

shadow-md

0 4px 12px rgba(0,0,0,0.06)

Hover elevation, popovers, dropdowns.

shadow-lg

0 8px 24px rgba(0,0,0,0.08)

Reserved for floating surfaces.

After foundations, I built improved versions of commonly used patterns. All improvements are very targeted and minimal to keep the intuitive nature of the app.

Add source

Connect a CSV, JSON, or API. Datathere will infer the schema on upload.

customer_id → user_id
string · primary key · 12,034 rows
Mapped
email → email
string · 12,034 rows
Mapped
total → revenue_usd
number · 4,280 rows · transform: round(2)
Review

Tooltip

Hover card

Dialog

Loading...
Loading...
Loading...

No sources yet

Connect a CSV, JSON, or API to start mapping.

The pipeline view is one of my more experimental builds. It is more colorful and has very dense information. I built it as a key visualized navigational starting point for most users. It has information on all steps and navigations built from each component. It's a real use case assembly of my foundations and primitives.

Diving deeper from the pipeline, the mapping detail page combines my principles. The goal is to visually clarify what is happening without having to describe or fill it with informational text.

Customers → Warehouse

8
Total Fields
6
Mapped Fields
2
Unmapped Fields
75%
Success Rate

Mapping Details

Created:Jun 22, 2026, 09:42 AM
Last Updated:Jul 6, 2026, 07:42 AM
Version:v1.0
Status:draft
Sources:
customers.csvorders.csvproducts.json
Destination:
warehouse.users

Mapped Fields

6
customersid
usersuser_id
98%

Direct integer primary key match.

customersemail
usersemail
95%

Email pattern detected in 99.7% of source rows.

customersfirst_name
customerslast_name
usersdisplay_name
89%

Joins first and last name into the destination's single display name.

customerscreated_at
userssignup_at
91%

Parses 12-hour source format into ISO 8601.

orderstotal
orderscurrency
userslifetime_revenue_usd
74%

Sums order totals per customer; non-USD orders converted at the current FX rate.

ordersstatus
orderscreated_at
usersis_active_buyer
69%

True if the customer has a COMPLETED order in the last 90 days.

Unmapped Fields

2
SOURCE
No source mapped
?
DESTINATION
userslast_session_at
0%

No source field tracks session activity. Consider adding a sessions source.

SOURCE
No source mapped
?
DESTINATION
usersreferral_source
0%

No source contains referral attribution data.

The Sankey diagram is a custom component I built outside of our component system. This is a simple way to show exactly where users started with source data and what happened to each row. It's a clear display of accountability with actions tied to each step.

25,031
8,902
2,916
Quarantined
1,417
Joined
23,105
Joined
8,218
Joined
2,692
Excluded
1,417
Joined Output
34,015
Transformed
34,015
Field Mapping Drop
170
Duplicate
612
Mapped
33,233

The relationship canvas is another custom component I built outside of our component system. It is an intuitive display of relational database-like relationships that are required to tie sources together. I modified it to show details provided by agents such as confidence logic and join conditions.