Village Activity Priority Recommendation System
Next.js 15TypeScriptshadcn/ui

Village Activity Priority Recommendation System

FullStack Developer 2026

Overview

Modern Application Architecture: Designed and built the core web application system using the Next.js 15 framework, TypeScript, and a PostgreSQL database managed via Prisma ORM. Artificial Intelligence Integration: Integrated the Gemini AI API to automate the processing and extraction of citizen proposal data into a structured digital format. Decision Support System Development: Implemented a combined calculation of AHP (Analytic Hierarchy Process) and TOPSIS algorithms on the backend to objectively generate the top 5 priority work program recommendations. Master Data Integration: Developed a synchronization module to merge demographic, infrastructure, and regional profile data of Kelurahan Panggungjati as baseline assessment variables. Interactive Analytics Dashboard: Designed a data visualization interface using Recharts to present priority decision reports through intuitive charts and tables tailored for village officials. Automated Reporting Feature: Built a document extraction system to support the direct export of data and recommendation results into PDF format. Authentication and Access Control Management: Implemented Role-Based Access Control (RBAC) using Supabase Auth to separate access privileges and page navigation for Admins, Village Officials, and the Public. Code Standardization and Project Legality: Applied an automated code quality assurance system using Husky and ESLint, and successfully registered and secured official Intellectual Property Rights (IPR/HKI) certification for this digital product.

Project Highlights

  • Frontend Engineering: Designing reactive and responsive user interfaces using Next.js 15, TypeScript, and shadcn/ui components.
  • Backend Logic & AI Integration: Building API Routes architecture to process AHP-TOPSIS algorithm logic and integrating Gemini AI services.
  • Database Management: Designing PostgreSQL relational database schemas in Supabase and managing data queries using Prisma ORM.
  • System Integration: Connecting Recharts dashboard visualizations on the client side with decision data calculation results from the server side in real-time.

Technologies

Next.js 15TypeScriptshadcn/uiUI/UX DesignResponsive InterfacesAPI RoutesBackend LogicGemini AI IntegrationPostgreSQLSupabasePrisma ORMDatabase Schema DesignEnvironment ConfigurationRechartsReal-Time Data IntegrationFull-Stack Architecture.

Gallery