Project Overview
A web-based school tuition fee management system designed to streamline administrative workflows.
Problem
SMK Nusantara was still using a manual recording system for school tuition fee (SPP) payments, which was prone to errors and inefficiency.
Goal
Develop a web-based platform for school administrators to manage and record student tuition fee payments digitally.
Solution
Utilized Next.js 12 with Ant Design and Bootstrap 4 for a robust UI, integrated with Axios for seamless HTTP requests to the backend API.
Tech Stack
- Next.js 12 — The core React framework for building a fast and scalable frontend.
- Ant Design (Antd) — Enterprise-level UI components for consistent forms and tables.
- Bootstrap 4 — Used for quick layout styling and ensuring mobile responsiveness.
- Axios — For handling asynchronous API calls to manage student and payment data.
Key Features
- Digital recording of student tuition (SPP) payments.
- Admin dashboard for managing and monitoring payment status.
- Automated data fetching and synchronization via REST API.
- Responsive interface optimized for desktop and tablet use.
- Structured data presentation using Ant Design tables.
Architecture
The application follows a standard React-based architecture with a focus on administrative efficiency:
- Modular Components using Ant Design for reusable UI elements like buttons and inputs.
- Service Layer using Axios to centralize all API interactions and error handling.
- Responsive Grid System combining Bootstrap's grid with Antd's flexible layouts.
- Client-side Routing via Next.js for smooth navigation between management modules.