Industrial Management System

2/9/2023

react
typescript
next js
prisma
mysql

I built an Industrial Management System for a company that specializes in metrology services and coordinating measuring machines. The goal was to streamline how clients interact with the company and simplify internal admin tasks to make everything more efficient.

View of the app in an Iphone 14

Project Breakdown

The system has three main parts:

  • Homepage: This serves as the main point of contact, where users can learn about the company and its services.
  • Client App:
    • Clients can sign up, add their addresses, and register their machines.
    • They can also request quotes and get prices for services in just a few clicks.
  • Admin App:
    • Admins can review and manage quotes, adjust prices, and approve service requests.
    • There’s also a configurable pricing system for fine-tuning all the service rates.

The Tech Behind It

I used a modern tech stack to make sure everything runs smoothly and efficiently:

  • Frontend: Built with Next.js, styled using Tailwind CSS for responsiveness, including support for both light and dark modes.
  • Backend:
    • Prisma as the ORM to manage a MySQL database.
    • NextAuth with MagicLink for secure and easy authentication.
  • Infrastructure: The project is managed with TurboRepo to handle the monorepo, using pnpm as the package manager.

Highlights

  • Responsive Design: The app is optimized for both desktop and mobile, so it works well on any device.
  • Dark/Light Mode: Users can toggle between themes depending on their preference.
  • Quick Quotes: Clients can easily register their machines and get a service price on the spot.
  • Admin Control: Admins have full control over quotes, pricing configurations, and managing client requests.

Demo

Client Dashboard

Client Quoting Page Client Quoting Page

Admin Dashboard

Admin edit page Admin edit page