Key code examples from this financial software project, showcasing authentication, calculations, visualizations, and data management implementations.
A robust full-stack web application for managing and tracking logistics shipments, with user management and dashboard analytics.
This comprehensive system streamlines logistics operations by allowing administrators to manage users and track shipments from creation to delivery. It provides a user-friendly interface for creating, viewing, editing, and deleting shipment records. The system features a powerful dashboard with real-time statistics, charts for various metrics (status, type, office, payment), and recent activity. Secure JWT authentication and role-based access control ensure data integrity and user permissions. Built with Next.js, React, Prisma, and PostgreSQL, it offers a scalable and efficient solution for logistics management.
Central dashboard with key statistics, monthly trends, and distribution charts for shipments.
The Shipment Tracking System is a robust full-stack web application designed for logistics management. It provides comprehensive tools for administrators to manage users and track shipments, offering detailed views, analytics, and secure role-based access.
Built with Next.js, providing server-side rendering for optimal performance and a rich user experience.
Handles API routes, business logic, authentication, and database interactions, leveraging Next.js API Routes.
Scalable relational database for storing all logistics and user data.
Modern cloud-native deployment strategy ensuring scalability and reliability.
Users log in via JWT. Next.js middleware and API routes enforce role-based access for admins and general users for all data access.
Admins perform CRUD operations on shipments. The system tracks status changes, container details, and payment/tax refund statuses throughout the shipment journey.
Backend APIs efficiently query and aggregate shipment data to provide real-time statistics and trends for the interactive dashboard.
The shipment list supports advanced filtering, searching, and pagination, with backend queries optimized for performance and responsiveness.
JWT-based authentication with Bcrypt for password hashing ensures secure access.
Full control over shipment records, including creation, viewing, editing, and deletion.
Visualize key logistics metrics and trends through dynamic charts on the dashboard.
Robust filtering, searching, and pagination capabilities for efficient data navigation.
The system is divided into client (frontend) and server (backend) components, each with its own installation process:
git clone https://github.com/Nardos-Tilahun/shipment-tracking-system.git
cd shipment-tracking-system
npm install
# Configure environment variables (.env.local) for database connection, JWT secret, etc.
npx prisma db push # To sync database schema
npx prisma db seed # To seed initial data (optional)
Running the application requires starting the necessary services:
# Run in development mode
npm run dev
The application will be available at http://localhost:3000
Building this full-stack system involved several complex challenges that required innovative solutions and professional growth.
Building a secure authentication and role-based access control (RBAC) system from scratch, ensuring seamless integration between Next.js API routes and client-side protected pages, while preventing unauthorized data access or actions.
Optimizing Prisma queries for a dashboard displaying various aggregated statistics (counts, monthly trends) and for a flexible shipment list with search, filtering, sorting, and pagination, all while maintaining performance for potentially large datasets.
Creating a multi-tabbed shipment creation/editing form that guides the user through required fields, provides real-time validation feedback, and ensures all necessary data is present before submission across different sections.
Ensuring that all API interactions, whether for fetching, creating, updating, or deleting data, provide consistent, clear, and actionable error messages to the user across the application.
Despite these challenges, I successfully delivered a full-stack application that provides a comprehensive platform. The system now efficiently handles all core requirements while maintaining high standards of security and user experience.
Strategic enhancements planned for the Personal Loan Management System, designed to extend functionality and improve user experience.
Integrate with third-party GPS tracking services and carrier APIs to provide real-time location updates of shipments on a map interface, accessible to both admins and potentially customers.
Enhanced visibility, proactive issue resolution, improved customer satisfaction, reduced manual tracking efforts.
Google Maps API, OpenStreetMap, WebSockets, MQTT, Carrier APIs (e.g., FedEx, DHL)
Implement an automated notification system to send email/SMS alerts for key shipment milestones (e.g., departure, arrival, delays, status changes) to relevant stakeholders (customers, agents).
Timely communication, reduced customer inquiries, proactive issue alerts, improved operational efficiency.
Twilio, SendGrid, Cron jobs, Event-driven architecture (Kafka/RabbitMQ)
Develop dedicated, restricted-access portals for customers to view their shipment statuses and for external agents (e.g., Djibouti Agent) to update shipment milestones directly.
Self-service capabilities, reduced administrative burden, improved collaboration with partners, enhanced transparency.
NextAuth.js (for external users), dedicated React components, API access controls
Expand dashboard capabilities with custom report generation (e.g., monthly volume reports, performance metrics by office/agent) and export options (PDF, Excel).
Deeper business insights, easier compliance reporting, enhanced data analysis capabilities, improved data sharing.
React-PDF, SheetJS (for Excel), Chart.js (for new chart types), Data warehousing (if data volume grows)
Add functionality to upload, store, and manage shipment-related documents (e.g., invoices, customs declarations) securely, with versioning and search capabilities.
Centralized document repository, reduced manual paperwork, improved compliance, quicker document retrieval.
AWS S3, Google Cloud Storage, OCR (Optical Character Recognition) libraries, Elasticsearch (for document search)
Develop a native mobile application (iOS/Android) for administrators and field agents to manage and update shipment statuses on the go, including offline capabilities.
Increased operational flexibility, faster updates from field, improved agent efficiency, better accessibility.
React Native, Expo, Firebase (for push notifications/offline data), SQLite (for local storage)