Sasakawa Restaurant Service Request System

## Project Overview

The Sasakawa Restaurant Service Request System is a full-stack web application built for a university campus to modernize their catering service management. The platform replaces manual, paper-based processes with an efficient digital workflow that handles everything from initial service requests to payment tracking.

## The Challenge

The university's catering department was struggling with:

- Manual paper-based request processing causing delays and errors

- Lack of visibility into request status for department staff

- Inefficient approval workflows requiring physical document routing

- Difficult financial tracking and reporting for the finance office

- No centralized system for managing invoices and payments

- Missing audit trails for institutional compliance

## The Solution

I designed and developed a modern, role-based web application with three distinct user workflows:

For Requesters (Department Staff):

- Intuitive form for submitting catering requests with event details

- File upload support for additional documentation

- Real-time request status tracking

- Personal dashboard with request history and filtering

For Approvers (Department Heads):

- Dedicated approval queue with all pending requests

- Quick approve/reject actions with comment capability

- Email notifications for new requests requiring attention

- Overview of department spending and request patterns

For Finance Officers:

- Invoice generation and management system

- Payment recording with multiple payment method support

- Financial reporting and analytics

- Export functionality for accounting systems

## Technical Implementation

The application is built with a modern tech stack prioritizing performance, security, and maintainability:

Frontend Architecture:

- React 19 with TypeScript for type safety

- Vite for lightning-fast development and optimized builds

- Tailwind CSS for responsive, utility-first styling

- Framer Motion for smooth animations and transitions

- React Query for efficient server state management

- Clerk for secure authentication and user management

Backend Architecture:

- Node.js and Express with TypeScript

- PostgreSQL database for reliable data storage

- Prisma ORM for type-safe database operations

- Cloudinary for image and document management

- Nodemailer and Resend for transactional emails

- RESTful API design with comprehensive error handling

Key Features Implemented:

- JWT-based authentication with role-based access control

- Multi-step form with validation using React Hook Form and Zod

- Real-time notifications system (email and in-app)

- File upload handling with cloud storage integration

- Advanced filtering and search capabilities

- Responsive design for mobile and tablet devices

- Automated email workflows for status changes

- Excel export functionality for financial reports

- Database migrations system for version control

## Challenges Overcome

1. Complex Permission System:

Implemented a flexible role-based access control that dynamically shows/hides features based on user roles while maintaining security at both frontend and backend levels.

2. Multi-Step Approval Workflow:

Designed a state machine pattern to handle the complex lifecycle of requests (Pending → Approved → Invoiced → Paid) with proper transitions and validation at each step.

3. File Management:

Integrated Cloudinary for reliable file storage and delivery, implementing proper error handling and progress indicators for uploads.

4. Email Reliability:

Implemented a dual-provider email system (Nodemailer and Resend) with fallback mechanisms to ensure critical notifications are always delivered.

5. Performance Optimization:

Used React Query for intelligent caching and background updates, reducing unnecessary API calls and improving perceived performance.

## Results & Impact

- Reduced request processing time from days to hours

- Eliminated paper waste and manual data entry errors

- Provided complete audit trail for institutional compliance

- Enabled real-time financial tracking and reporting

- Improved user satisfaction with intuitive, modern interface