Back to Projects

Enterprise Procurement Platforms

End-to-end procurement system with vendor management, automated workflows, and real-time analytics.

ReactTypeScriptNode.jsPostgreSQL

Overview

This topic, showcases my expertise in designing and implementing end-to-end procurement systems. These platforms streamline vendor management, automate workflows, and provide real-time analytics to optimise procurement operations. By utilising technologies such as React, TypeScript, Node.js, and PostgreSQL, the solutions I have created are designed to enhance efficiency and scalability for all procurement processes.

Key Experiences

Vendor Management System

  • Centralised dashboard for onboarding and evaluating vendors.
  • Automated vendor scoring based on predefined metrics.

Automated Workflows

  • Streamlined procurement processes, including purchase requests, approvals and order tracking.
  • Customised workflows to provide adaptability for unique organisational needs.

Real-Time Analytics

  • Created interactive dashboards for monitoring KPIs, spending patterns and vendor performance.
  • Added drill-down capabilities for detailed insights.

Role-Based Access Control (RBAC)

  • Implemented role-based permissions ensuring that sensitive data is accessible only to authorised users.
  • Provided granular access control for specific reports and functionalities.

Sample Implementations

Vendor Management Module

The following is a simplified example demonstrating a Node.js API, which manages vendor onboarding and scoring:

code
import express from 'express';
import { Pool } from 'pg';

const app = express();
const pool = new Pool({
  user: 'user',
  host: 'localhost',
  database: 'procurement',
  password: 'password',
  port: 5432,
});

app.use(express.json());

// API to add a new vendor
app.post('/vendors', async (req, res) => {
  const { name, email, performanceScore } = req.body;
  const query = 'INSERT INTO vendors (name, email, performance_score) VALUES ($1, $2, $3) RETURNING *';
  const values = [name, email, performanceScore];
  try {
    const result = await pool.query(query, values);
    res.status(201).json(result.rows[0]);
  } catch (err) {
    res.status(500).send(err.message);
  }
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

Workflow Automation

This simplified React example shows an interface for purchase request approvals:

code
import React, { useState, useEffect } from 'react';

interface PurchaseRequest {
  id: number;
  description: string;
  amount: number;
  status: string;
}

const PurchaseRequests = () => {
  const [requests, setRequests] = useState<PurchaseRequest[]>([]);

  useEffect(() => {
    fetch('/api/purchase-requests')
      .then((res) => res.json())
      .then((data) => setRequests(data));
  }, []);

  const approveRequest = (id: number) => {
    fetch(`/api/purchase-requests/${id}/approve`, { method: 'POST' })
      .then(() => {
        setRequests(requests.map(req => req.id === id ? { ...req, status: 'Approved' } : req));
      });
  };

  return (
    <div>
      <h1>Purchase Requests</h1>
      <ul>
        {requests.map((req) => (
          <li key={req.id}>
            {req.description} - ${req.amount} - {req.status}
            {req.status === 'Pending' && (
              <button onClick={() => approveRequest(req.id)}>Approve</button>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default PurchaseRequests;

Real-Time Analytics Dashboard

This simple example demonstrates a small section of an analytics dashboard, which is using D3.js for visualising procurement data:

code
import * as d3 from 'd3';

const data = [
  { category: 'Office Supplies', value: 5000 },
  { category: 'IT Equipment', value: 20000 },
  { category: 'Furniture', value: 10000 },
];

const svg = d3.select('svg');
const width = +svg.attr('width');
const height = +svg.attr('height');

const pie = d3.pie().value(d => d.value);
const arc = d3.arc().innerRadius(0).outerRadius(Math.min(width, height) / 2);

svg
  .selectAll('path')
  .data(pie(data))
  .enter()
  .append('path')
  .attr('d', arc)
  .attr('fill', (d, i) => d3.schemeCategory10[i]);

My Results and Impact

  • Reduced procurement cycle times through automation.
  • Improved vendor performance visibility with analytics and scoring.
  • Enhanced security and compliance with robust access controls.

Example Tools and Technologies

  • React: User interface development for dashboards and workflows.
  • TypeScript: Strongly typed JavaScript for robust, maintainable code.
  • Node.js: Server-side logic and API development.
  • PostgreSQL: Scalable and reliable database for storing procurement data.

Conclusion

This topic highlights my ability to deliver scalable and secure procurement solutions, tailored to a variety of enterprise needs. By integrating modern technologies and automating critical processes, my solutions enable organisations to streamline operations and make data-driven decisions when it matters most.