All projects02 / Case study

CRM / Career tracking / Everyday organization

Bingo
CRM.

Less scattered.
More organized.

One workspace for job applications, professional relationships, tasks, and the habits behind everyday progress.

Launch site
Bingo CRM companies workspace with search, filtering, sorting, and controls to add a company
Bingo CRM / Companies workspace

A place for the bigger picture.

Bingo CRM brings job tracking and personal organization into a single workspace. Companies, contacts, and applications sit alongside projects, daily tasks, notes, documents, and learning progress, making it easier to keep work and routines organized.

Career pipelineDaily routinesOrganized records

Connected work.
Clear boundaries.

Bingo CRM calendar showing the November month view, event filters, and Asia/Rangoon time zone selectorOpen full size

Calendar

Events, agenda, and reminders with a time zone selector.

Bingo CRM appearance settings with the dark Forest theme selected and a live component previewOpen full size

Appearance

Light, dark, and system modes with workspace theme palettes.

Bingo CRM sign-in screen with its welcome message and email and password formOpen full size

Sign in

The welcome screen for a personal career workspace.

01

Companies

Keep organization records together and easier to find.

02

Contacts

Give professional relationships a place in the workspace.

03

Applications & pipeline

Organize job applications and follow their progress through the pipeline.

04

Projects & activities

Keep project work and its related activities in context.

05

Tasks & calendar

Plan daily work, follow-ups, and the routines that keep things moving.

06

Notes

Capture ideas with a formatting toolbar and Markdown-ready content.

07

Documents

Organize the documents that support applications and project work.

08

Learning tracker

Track learning alongside career goals and everyday habits.

09

Analytics

Bring workspace activity into view to understand progress.

Version 2 / Scaffold-ready

Interviews

A domain scaffold prepared for the next version of the application.

A modular API.
A focused client.

API & database

A TypeScript API organized into domain modules, backed by relational data.

  • Node.js
  • Express
  • TypeScript
  • PostgreSQL
  • Prisma

Client & interface

A separate React and TypeScript client with themed components and nested, protected workspace routes.

  • React
  • Vite
  • shadcn/ui
  • Tailwind CSS
  • CSS theme variables
  • React Router
  • Lucide React

Data, forms & tables

Typed API requests, reusable table controls, and validated forms that map explicitly to request bodies.

  • TanStack Query
  • Typed fetch
  • React Hook Form
  • Zod
  • TanStack Table
  • shadcn Table

Dates & time zones

Calendar and time entry with second precision, converting the selected time zone to API timestamps.

  • shadcn Calendar / Popover
  • Time input
  • React DayPicker 9
  • Intl
  • date-fns
  • date-fns-tz

Notes & formatting

A visual editing toolbar paired with Markdown-compatible storage and formatted detail views.

  • Tiptap
  • react-markdown
  • remark-gfm

Verification & installs

Tools for form, API integration, and browser journey checks, with an independent client/ lockfile for repeatable installs.

  • Vitest
  • React Testing Library
  • Playwright
  • npm

Details that keep work predictable.

01

Give state a clear owner.

TanStack Query owns API data and caching. URL parameters hold navigable state, local React state handles UI details, and small contexts cover authentication and preferences.

02

Connect controls to the API.

Table pagination, filtering, and sorting use API parameters. Form values are validated before mapping to request bodies, and affected records refresh after changes.

03

Make time zone choices explicit.

Calendar and time inputs capture a wall-clock value in the selected zone. Date utilities convert that value to the timestamp expected by the API.

Next project / 03Comfort Zone