CHUNJI (BitBuild)
Frontend for a B2B platform that construction companies and suppliers use for invoices, quotations, purchase orders and approvals.
No public demo or source code available.
Architecture walkthrough
How the platform fits together
A guided, animated tour of the system: who uses it, how a purchase moves through it, and the frontend architecture underneath.
Loading diagram…
Read all steps
- 01
One platform, three audiences
BitBuild is a B2B construction procurement platform. Construction companies purchase through it, suppliers answer through a dedicated Partner Portal, and platform members follow construction material prices. It is the same platform, but each user type sees a completely different set of menus.
- 02
Sign in, then route by role
Sign-in, invitations and email verification share one entry. After that, each user type lands in its own dashboard: tenant users in Purchasing, suppliers in the Partner Portal, members in Construction Pricing. A permission gate filters every menu and action by role.
- 03
Draft a material request
A site team drafts a material request (line items, site, desired delivery date) in a validated form and submits it to an approval line. Its status moves from Drafting to Approval in progress; the same status names are used on every screen.
- 04
Approval line
Approvers approve or reject with comments. Approvals that happen offline, in a meeting or a chat, can be confirmed in the system, so every decision lands on one timeline. An approved request unlocks quotations and orders.
- 05
Request quotations
The approved request becomes an RFQ to designated suppliers, who answer from the Partner Portal. Open RFQs published in Construction Pricing can also be connected into the purchasing flow.
- 06
Compare quotes, send the order
Quotes are compared side by side and the chosen one becomes a purchase order, approved and sent to the supplier. The order shows whether the supplier has viewed and confirmed it, and either side can request a delivery-date change and answer the other's request.
- 07
Deliver, receive, register assets
The supplier registers the shipment and the site records a partial or full receipt. Received items can be registered as assets, handing over to the Asset Management module for moves, returns and maintenance.
- 08
Prices flow back
Quoted and confirmed unit prices from purchasing are aggregated anonymously into the construction price graph, shown as official, estimated and actual transaction prices. Real procurement activity becomes market data.
- 09
Every event notifies
Approval requests, received quotes, order confirmations and deliveries all raise a notification: in-app always, email and KakaoTalk if the user enables them. They are grouped into an action-needed inbox, and each one links straight to the task.
- 10
The frontend underneath
Next.js App Router with a route group per audience, TanStack Query and axios with OpenAPI-generated types for server state, React Hook Form and Zod for forms, TanStack Table for data grids, and i18next for localisation. My part: the request, RFQ/quotation, purchase-order and approval screens, with reusable tables, forms, filters and status- and permission-dependent UI.
AI-generated from the project’s product and technical documentation, then simplified for public viewing. Internal details are omitted.
- Role
- Frontend developer
- Stack
- Next.js, React, TypeScript, REST APIs, i18next
The context
CHUNJI is a B2B construction procurement platform used by construction companies and their suppliers.
My role
Implement screens and integrate APIs for the Invoice, RFQ/Quotation, Purchase Order and Approval workflows, including supplier-facing features.
Build reusable data tables, forms, filters and status-based UI.
Handle validation and permission-dependent display behaviour.
Work from Figma designs and PRD/FSD documentation to keep the UI aligned with business rules, coordinating updates with the development team.
Implementation
Next.js and React with TypeScript, REST API integration and i18next for internationalisation.