Web Application for Efficient Factory Management

Creating a Tailored Web Application for Efficient Factory Management

IN PROGRESS - THIS POST IS INCOMPLETE

Backgound: The Inspiration Behind the Application

In the world of manufacturing, the ability to adapt and innovate is critical. This story begins with a casual conversation with a friend who owns a factory. They expressed their frustrations about the inefficiencies involved in the factory's operational management - from handling client orders via WhatsApp, coordinating workers through notes on scrap paper, to optimising delivery routes with little more than pure guesswork…

It was a scenario that many can relate to, but for me - it sparked an idea. What if these issues could be addressed through a digital solution? With this in mind, I set out to develop an application that would not just automate tasks but rethink the way the factory operated. This blog post represents the technical journey of developing this application. Using a robust stack of TypeScript, Next.js, React, Firebase + a few 3rd party APIs, I (eventually) created a solution that was more than just a set of features; it became an asset to the factory. In the following sections, I will share the architecture, challenges, and conclusion of building an application that transformed this real-world problem into a digital solution.

Understanding the Problem

Before diving into the technicalities of application development, it's crucial to fully grasp the problem at hand. The challenges my friend's factory faced were not unique, yet they were significantly hindering efficiency and growth. The key issues included:

• Inefficient Order Handling: Orders were received through informal channels like WhatsApp, leading to disorganisation and a high risk of error.
• Manual Worker Coordination: Workers received instructions via paper notes and drawings on paper, prone to miscommunication and loss.
• Unoptimized Delivery Planning: Delivery routes were planned based on guesswork, lacking efficiency and contributing to unnecessary fuel costs and time delays.

These operational bottlenecks highlight the necessity of a digital solution. My goal was to streamline processes, improve communication, and optimise logistics, ultimately leading to enhanced productivity and reduced operational costs.

The Tech Stack: Employing Modern Web Technologies

For this project, I chose a combination of TypeScript, Next.js, React, and Firebase, supplemented by various third-party APIs. Here's why:

• TypeScript: A superset of JavaScript offering type safety, which is beneficial in large projects where complexity can lead to errors.
• Next.js: A React framework that enables server-side rendering, providing a faster, more user-friendly experience.
• (React): Known for its component-based architecture, React makes the UI highly interactive and responsive, essential for a dynamic application like ours.
• Firebase: Provides a suite of tools that simplify backend development, including real-time databases, authentication, and hosting.

Honourable Mentions

• Chakra UI: Props-based system for components. Keeps the codebase clean and consistent.
• PDFMe: A significant upgrade from PDF-lib which I used in the alpha version of the application, PDFMe has much better documentation and is easier to use.
• MapBox API: Integrates maps and route optimization, essential for efficient logistics management. Free tier is suitible for this application.
• TrueLayer API: Implements open banking features for secure transactions. Removes the need (in this case) for licencing and compliance.