Let’s talk

Project 03 / Web App

Smart Moto Service Center

Role
Full-Stack Developer
Area
Web App
Stack
16 technologies

A motorcycle service-center management application connecting vehicle intake, workshop jobs, parts inventory, billing, and management reports through role-based workflows.

Product walkthrough

System screens

A look at the role-based workflows and management interfaces in the completed system.

Problem and solution

Problem

A motorcycle service center needs to coordinate vehicle intake, repairs, parts, payments, reporting, and personnel across one workflow.

Solution

A full-stack service-center application connecting reception, workshop, inventory, billing, and management through shared job records and role-based access control.

Technical approach

  1. Customer and motorcycle registration, appointments, service history, and service requests converted into workshop jobs.
  2. Diagnosis, customer approval, mechanic assignment, repair progress, quality control, and delivery readiness in one job workflow.
  3. Job-linked parts requisitions, approval or rejection, stock deduction on issue, returns, and purchase-order approval that automatically increases stock.
  4. Billing from tracked labor, issued parts, and outsourced work, with quotation fallback, VAT calculation, receipts, and coordinated payment and job status updates.
  5. Role-specific dashboards, financial and stock reports, PDF exports, and employee management backed by JWT authentication and RBAC.

Implementation details

Smart Moto Service Center brings the main departments of a motorcycle service center into one connected application. Service advisors receive customers and vehicles, foremen and mechanics manage repairs, stock keepers handle parts, cashiers process payments, and owners review operations and finances. The React and TypeScript frontend connects to a modular NestJS API with PostgreSQL and Prisma. The documented core workflow is implemented across reception, jobs, parts, payments, and reports, with dedicated interfaces for all main staff roles. The project is intended for education and demonstration.

Reception and workshop workflow

Reception / Service Advisor → Foreman and Mechanic / Workshop → Inventory / Stock → Accounting / Billing → Owner and Admin / Dashboard and Reports. Shared job records connect each handoff from vehicle intake to payment and operational reporting.

Reception supports first-time and returning customers, registering additional motorcycles, service appointments, and customer service history. Service requests become jobs for foreman diagnosis and workshop planning.

Workshop jobs progress through diagnosis, customer approval, repair readiness, repair in progress, quality control, and delivery readiness. Foremen record diagnoses, manage queues, and assign mechanics; technicians add mechanic notes and track repair progress. Repeat repairs and second assessments are also supported.

Parts and purchasing

The parts master tracks inventory balances. Staff create job-linked requisitions for approval or rejection, stock is deducted when parts are issued, and unused parts can be returned. Stock movement and requisition history provide a record of inventory activity.

Purchase orders move from draft to pending approval, then approval or cancellation by an owner or administrator. In the documented business workflow, approval automatically increases stock. Management reports cover purchase orders, incoming stock, and parts running low.

Billing and payments

Payments are created from jobs that are ready for delivery. Charges use tracked labor time, parts actually marked as issued, and outsourced work. A quotation provides the calculation basis when detailed cost records are unavailable.

The billing module calculates totals, VAT, and the net amount due, tracks pending and paid payments, and provides payment history and receipt details. Processing a payment updates both the payment record and the associated job status.

Roles and management reports

JWT authentication and role-based access control separate Administrator, Owner, Service Advisor, Foreman, Mechanic, Stock Keeper, and Cashier workflows. Each role has a dedicated starting page, while the administrator dashboard provides access to all modules.

Owners review revenue, profit, outstanding jobs, and unpaid balances. Reports include daily, weekly, and monthly financial views, job backlogs grouped by status, stock levels, and purchasing activity. Recharts visualizes dashboard and report data from the system, and the frontend supports PDF exports.

User management supports creating and editing employee accounts, assigning roles, and recording salaries. These personnel features sit alongside operational and financial reporting in the management interface.

Architecture and development workflow

The frontend uses React, Vite, TypeScript, React Router, and Tailwind CSS. AuthContext and RequestHistoryContext manage shared state, while custom hooks and service modules connect the interface to the backend API.

The NestJS backend separates authentication, users, customers, motorcycles, jobs, parts, purchase orders, payments, and reports into modules, with shared guards, decorators, and helpers. Prisma manages PostgreSQL access and schema changes, Docker runs the database, and Swagger / OpenAPI documents the API.

The repository includes setup instructions, team assignments, API testing guidance, and Git conventions. Development uses feature and bugfix branches integrated through develop, with pull requests into main and GitHub Actions workflows configured in the repository.

Technology stack

  • React
  • TypeScript
  • NestJS
  • PostgreSQL
  • Vite
  • React Router
  • Tailwind CSS
  • Context API
  • Custom Hooks
  • Recharts
  • Node.js
  • Prisma ORM
  • JWT / RBAC
  • Swagger / OpenAPI
  • Docker
  • GitHub Actions

Sandbox Terminal

theme: matrix
TAP:
██╗    ██╗██████╗      CLI
██║    ██║██╔══██╗
██║ █╗ ██║██████╔╝
██║███╗██║██╔═══╝
╚███╔███╔╝██║
 ╚══╝╚══╝ ╚═╝

WORACHAT CLI • ONLINE

AI Assistant

Portfolio guide

สวัสดีครับ สอบถามเกี่ยวกับผลงาน ทักษะ และช่องทางติดต่อของ Worachat ได้เลย Ask in Thai or English. Answers use the published portfolio information; project descriptions may be in English.

0/2000 · Shift + Enter สำหรับขึ้นบรรทัดใหม่