A modern digital platform for purchasing, verifying, and collecting academic manuals for the Animal Production and Health (APH) department at Ladoke Akintola University of Technology (LAUTECH).
The platform replaces a manual distribution workflow with a centralized digital system that allows students to browse available manuals, submit their information, make online payments, receive verified digital receipts, and have their purchases validated through QR code scanning.
Traditional manual distribution can involve several disconnected steps:
- Students searching for available manuals
- Manual collection and payment records
- Course representatives tracking purchases
- Difficulty reconciling payments
- Lost or incomplete records
- Delays during manual collection
- Limited visibility into inventory and sales
This application brings those processes into one digital workflow.
Browse Manuals
↓
Select Manual
↓
Enter Student Information
↓
Online Payment
↓
Payment Verification
↓
Digital Receipt
↓
QR Code Verification
↓
Manual Collection
The system also provides administrative and staff interfaces for managing manuals, monitoring purchases, verifying receipts, and tracking collections.
Students can browse available academic manuals, search by title, view pricing and remaining inventory, and begin a purchase.
Students select a manual and provide the required information before proceeding through the payment process.
Successful purchases generate a digital receipt containing the student's purchase information, transaction reference, payment details, and a unique QR code used for verification.
Administrators can monitor sales, manage manuals and inventory, review purchases, and oversee staff operations from a centralized dashboard.
Authorized staff can scan and verify student receipts before marking manuals as collected.
- Browse available academic manuals
- Search manuals by title
- View manual pricing and inventory
- Submit student information
- Online payment processing
- Payment verification
- Digital receipt generation
- QR-code based receipt verification
- Receipt PDF download
- WhatsApp receipt sharing
- Purchase reference recovery
- Secure staff authentication
- QR-code receipt scanning
- Purchase verification
- Manual collection tracking
- Collection history
- Staff activity tracking
- Admin dashboard
- Sales and purchase analytics
- Manual management
- Inventory tracking
- Staff management
- Staff activation and deactivation
- Purchase monitoring
- Transaction tracking
- Collection monitoring
The frontend is configured as a Progressive Web App (PWA), providing an installable and app-like experience on supported devices.
- React
- Vite
- Tailwind CSS
- React Router
- Axios
- Lucide React
- React Hot Toast
- SweetAlert2
- Flutterwave
- QR-code scanning
- QR-based purchase verification
- jsPDF
- html2canvas
- Vite PWA Plugin
The frontend communicates with a separate Node.js/Express backend responsible for:
- Authentication
- Payment processing
- Purchase management
- Database operations
- Receipt generation
- Email delivery
- QR verification
- Staff and admin operations
The application follows a client-server architecture.
┌──────────────────────────────┐
│ React Frontend │
│ │
│ Student Portal │
│ Checkout │
│ Receipt │
│ Admin Dashboard │
│ Staff Scanner │
└──────────────┬───────────────┘
│
│ REST API
▼
┌──────────────────────────────┐
│ Node.js / Express │
│ │
│ Authentication │
│ Purchases │
│ Payments │
│ Manuals │
│ Staff Management │
│ QR Verification │
└──────────────┬───────────────┘
│
▼
┌──────────────────────────────┐
│ PostgreSQL │
│ │
│ Users │
│ Manuals │
│ Purchases │
│ Transactions │
│ Collections │
└──────────────────────────────┘
manual-distribution-frontend/
│
├── public/
│
├── screenshots/
│ ├── 01-student-home.png
│ ├── 02-manual-selection.png
│ ├── 03-digital-receipt.png
│ ├── 04-admin-dashboard.png
│ └── 05-staff-scanner.png
│
├── src/
│ ├── api/
│ │ └── axios.js
│ │
│ ├── assets/
│ │
│ ├── components/
│ │
│ ├── contexts/
│ │
│ ├── layouts/
│ │
│ ├── pages/
│ │
│ ├── App.jsx
│ ├── index.css
│ └── main.jsx
│
├── .env.example
├── package.json
├── tailwind.config.js
├── vite.config.js
└── README.md
Make sure you have the following installed:
- Node.js
- npm
- Git
git clone <your-github-repository-url>Navigate into the project:
cd manual-distribution-frontendnpm installCreate a .env file in the project root:
VITE_API_URL=http://localhost:5000/apiFor production, set VITE_API_URL to the deployed backend API URL.
Never commit
.envfiles containing private credentials or secrets.
npm run devVite will start the application locally.
npm run devStarts the Vite development server.
npm run buildCreates an optimized production build.
npm run lintRuns ESLint across the project to identify code-quality issues.
npm run previewServes the production build locally for testing.
Students can:
- Browse available manuals
- Search for a course manual
- Select a manual
- Enter their student information
- Proceed to payment
- Complete payment through Paystack
- Have the transaction verified
- Receive their digital receipt
After successful payment, the system provides a receipt containing:
- Student name
- Matriculation number
- Manual purchased
- Academic level
- Amount paid
- Transaction reference
- Unique QR verification code
The receipt can be downloaded as a PDF and shared through WhatsApp.
The generated QR code allows authorized staff to verify a student's purchase.
The workflow is:
Student presents receipt
↓
Staff scans QR code
↓
System verifies purchase
↓
Purchase details displayed
↓
Staff confirms collection
↓
Collection recorded
This provides a digital record of manual distribution instead of relying entirely on physical receipts or handwritten records.
This project goes beyond a static frontend and demonstrates the implementation of a complete application workflow.
The React application communicates with a REST API through Axios and separates API communication from UI components.
Different application experiences are provided for:
- Students
- Staff
- Administrators
The frontend integrates with the backend payment workflow and handles payment initialization, verification, and post-payment navigation.
QR codes provide a fast way for authorized staff to verify purchases and process manual collections.
The interface is designed to work across:
- Desktop
- Tablet
- Mobile devices
The application includes Progressive Web App functionality for a more app-like experience.
The frontend is organized into reusable React components, pages, layouts, contexts, and API modules to keep the application maintainable as it grows.
The frontend communicates with backend endpoints covering:
Authentication
├── Login
├── Forgot Password
└── Reset Password
Manuals
├── List Manuals
├── Manual Details
└── Manual Management
Purchases
├── Initialize Purchase
├── Verify Payment
├── Receipt
├── Recover Reference
├── Verify Purchase
├── Collect Manual
└── Purchase History
Administration
├── Staff Management
├── Staff Activation
├── Staff Deactivation
└── Dashboard Data
The backend is responsible for validating requests and communicating with the database and external services.
The project was designed around a real-world academic distribution problem rather than as a purely theoretical demo.
The goal was to demonstrate how software can replace a fragmented manual workflow with a system that provides:
- Better record keeping
- Faster purchasing
- Digital payment tracking
- Automated receipts
- QR-based verification
- Inventory visibility
- Staff accountability
- Centralized administration
It also provided an opportunity to work across both frontend and backend concerns while building a system around an actual user workflow.
Building this system strengthened my experience with:
- React application architecture
- REST API integration
- Authentication flows
- Payment integration
- QR-code workflows
- Responsive UI development
- PWA configuration
- State and route management
- Database-backed application design
- Admin dashboard development
- Transaction-based workflows
- Debugging frontend/backend integration issues
Potential future improvements include:
- More detailed reporting and analytics
- Automated inventory alerts
- Improved transaction reconciliation
- Expanded notification options
- More granular staff permissions
- Advanced audit logging
- Enhanced offline/PWA capabilities
- Additional payment provider support
This frontend is part of a full-stack application.
The backend is built with:
- Node.js
- Express.js
- Prisma
- PostgreSQL
- Flutterwave
- QR-code generation
- PDF receipt generation
- Email services
The frontend and backend are maintained as separate repositories to keep deployment and application responsibilities clearly separated.
The frontend can be deployed to modern static hosting platforms such as Vercel or similar services.
The production API endpoint is configured through:
VITE_API_URLThis allows the same frontend codebase to communicate with different backend environments without hardcoding deployment-specific URLs into the application.
This project is licensed under the MIT License.
Oguntoke Emmanuel Omotayo
Full-Stack Web Developer focused on building practical, high-converting and scalable web applications.
- GitHub:
GodWithUs17 - LinkedIn:
oguntoke-emmanuel
Built with React, JavaScript, Tailwind CSS, Node.js, Express, PostgreSQL, and a focus on solving real-world problems through software.