My Work at Datum:
Built nearly all of the front end, and heavy full-stack/back end of the website at my most recent employment Datum Technologies. Dozens of custom components with complex interactions and integrations. Dual collaboration on the back end LLM to return financial data points.
Features Include:
- Create/update/delete labels and labels picker
- Create/update/delete PDF tags
- Popup manual tag creation with highlighted text
- Search/select/remove tag names and filter
- Various context menus
- Theme toggling
- Detailed responsive navs and side navs
- Reusable custom toast components
- Drag and drop, nested drag and drop
- Reusable animations
- Custom emails styling
- Custom tagging
- Rent summaries
- Various Stripe features (creating Stripe account on sign up, add/remove/update credit card,
- Display/managing financial information, etc)
- Add/update/delete custom columns tables
- Drag reorder columns & resize cell height of tables
- Detailed custom modifications of tables (tables built with React Table and Ag Grid)
- Developed a LangChain pipeline that takes as an input a PDF file, then returns a PaymentTable as output. Created an API endpoint that runs this chain and returns the result. Implemented a prompt template that gave the LLM instructions and a data validation zodSchema that defined the correct shape of the output to guide the LLM and ensure accurate output.
Built nearly all of the front end, and heavy full-stack/back end of the website at my most recent employment Datum Technologies. Dozens of custom components with complex interactions and integrations. Dual collaboration on the back end LLM to return financial data points.
Features Include:
- Create/update/delete labels and labels picker
- Create/update/delete PDF tags
- Popup manual tag creation with highlighted text
- Search/select/remove tag names and filter
- Various context menus
- Theme toggling
- Detailed responsive navs and side navs
- Reusable custom toast components
- Drag and drop, nested drag and drop
- Reusable animations
- Custom emails styling
- Custom tagging
- Rent summaries
- Various Stripe features (creating Stripe account on sign up, add/remove/update credit card,
- Display/managing financial information, etc)
- Add/update/delete custom columns tables
- Drag reorder columns & resize cell height of tables
- Detailed custom modifications of tables (tables built with React Table and Ag Grid)
- Developed a LangChain pipeline that takes as an input a PDF file, then returns a PaymentTable as output. Created an API endpoint that runs this chain and returns the result. Implemented a prompt template that gave the LLM instructions and a data validation zodSchema that defined the correct shape of the output to guide the LLM and ensure accurate output.
SOME EXAMPLE FEATURES
TABLE FEATURES
Existing/saved table:
- Highlight column and row using Context Menu
- Hover cell to see tooltip of text
- Pinned left document name column
- Table Labels (individual table labels and global labels picker)
- "Last saved" date/time
- Highlight column and row using Context Menu
- Hover cell to see tooltip of text
- Pinned left document name column
- Table Labels (individual table labels and global labels picker)
- "Last saved" date/time
New Table:
- Default table columns
- Default 5 blank rows for new table
- Default table columns
- Default 5 blank rows for new table
PDF MANUAL TAGGING
Functionality to do manual tagging on PDFs:
- User highlighted text from PDF will show in the popup in the same location as the mouse location on "mouse up"
- "Fields" or "tag values" were retrieved from the API to be selected.
- Highlighted text value and tag names saved together in Firebase
- Close the popup by: 1. clicking out of the box, 2. clicking on the "x" button, 3. clicking on "Save" button
Included an initial search box (was redesigned):
- Highlights what text is typed in the "Search" input
- User highlighted text from PDF will show in the popup in the same location as the mouse location on "mouse up"
- "Fields" or "tag values" were retrieved from the API to be selected.
- Highlighted text value and tag names saved together in Firebase
- Close the popup by: 1. clicking out of the box, 2. clicking on the "x" button, 3. clicking on "Save" button
Included an initial search box (was redesigned):
- Highlights what text is typed in the "Search" input
TAG NAMES DROPDOWN
- Search tags (filtered to show available)
TAG NAMES FILTER
- Adds/removes tag name columns
- No duplicate tag name columns
- If the tag name already exists in the cells, it is not included in the dropdown list.
- If the tag name gets clicked/selected, the tag name is not available on the tag dropdown list and the column gets added to the table.
- If the column gets deleted, the tag name is available again on the dropdown.
- No duplicate tag name columns
- If the tag name already exists in the cells, it is not included in the dropdown list.
- If the tag name gets clicked/selected, the tag name is not available on the tag dropdown list and the column gets added to the table.
- If the column gets deleted, the tag name is available again on the dropdown.
TABLE CONTEXT MENU
- Add custom column (custom column header names and column cells)
- Sort ascending
- Sort descending
- Delete row
- Delete column
Added after:
- Highlight column
- Highlight row
- Change row height (small, medium, large, x-large)
- Sort ascending
- Sort descending
- Delete row
- Delete column
Added after:
- Highlight column
- Highlight row
- Change row height (small, medium, large, x-large)
"ADD DOCUMENT"
- No duplicate file uploads (input dropdown shows what are not uploaded yet)
- Adding document removes it from the input dropdown
- "Removing the row" from the table brings back the document to the input dropdown
- If there are no more documents to add, it hides the input to show “No Documents to Add” and a link to upload a lease for abstraction.
- Adding document removes it from the input dropdown
- "Removing the row" from the table brings back the document to the input dropdown
- If there are no more documents to add, it hides the input to show “No Documents to Add” and a link to upload a lease for abstraction.
TABLE BUILDER IMPROVEMENT FEATURES
- Drag columns to re-order (dnd-kit)
- Add new columns from available list from API
- "Custom" column cells (user-defined column names and cell values)
- Dropdown popup closes when clicking out of popup
- Drag hover styles: (Hover: shows hand, Click and drag: closed hand cursor)
- Resize columns
- Delete rows
- Add new columns from available list from API
- "Custom" column cells (user-defined column names and cell values)
- Dropdown popup closes when clicking out of popup
- Drag hover styles: (Hover: shows hand, Click and drag: closed hand cursor)
- Resize columns
- Delete rows
MY ROLE
- Nearly all of the front end of the entire website (and all of these features)
- All of the back end for these features and collaboration of other back end features on the website
- Design was done by the in-house designer and by a design agency
- Other work samples not included (non-visual back end and others not recorded)
- Nearly all of the front end of the entire website (and all of these features)
- All of the back end for these features and collaboration of other back end features on the website
- Design was done by the in-house designer and by a design agency
- Other work samples not included (non-visual back end and others not recorded)
TECHNOLOGIES
React, TypeScript, Next.js, Tailwind CSS, Daisy UI,
Cloud: GCP (Google Cloud Platform), Firebase,
React Query/TanStack Query (into Zustand), Stripe, Vercel, GitHub Actions, GitHub, LangChain, TanStack Table (React Table), Ag Grid, various libraries
Cloud: GCP (Google Cloud Platform), Firebase,
React Query/TanStack Query (into Zustand), Stripe, Vercel, GitHub Actions, GitHub, LangChain, TanStack Table (React Table), Ag Grid, various libraries