# IDSpeaker LMS — Moodle Learning Platform

## Overview

IDSpeaker LMS is the learning platform for [IDSpeaker](https://idspeaker.com/), Indonesia's professional speaker platform. It gives learners a branded place to take courses on public speaking, storytelling, presentations, personal branding and MC/moderation, with lesson pages, quizzes and discussion forums.

Instead of building an LMS from scratch, I took a complete Moodle deployment from an earlier corporate project (custom theme, plugins, database and uploaded files), restored it on an on-prem server, and turned it into a product that looks and reads as IDSpeaker from the login page to the footer.

## The Problem

The starting point was a single backup archive: Moodle source with a custom theme, a database dump, and the moodledata folder, all branded and filled with content for a different organization. The goal was to run it on IDSpeaker's own domain, on an existing on-prem server with no public IP and no open ports, without any trace of the previous brand.

## What I Built

-   **Restore & containerization** — Moodle 4.5 on PHP 8.1 (Apache) and MariaDB 10.11 with Docker Compose. Source, database and uploaded files restored into named volumes, with the web container bound to localhost only.
-   **Zero-exposure hosting** — the site is published through a Cloudflare Tunnel from the on-prem server, so HTTPS terminates at Cloudflare and no inbound port is opened. The domain's DNS was moved to Cloudflare to make this possible.
-   **End-to-end rebrand** — logo, favicon, login background, brand color (#AA0000) and the hardcoded copy in the custom Boost Union child theme, plus site name, navigation links and footer.
-   **Speaker-focused catalog** — demo courses rewritten into IDSpeaker topics: lesson pages, quiz questions, categories and course metadata.
-   **Honest homepage** — testimonials, leaderboard, instructor spotlight, live sessions and learning paths are wrapped in flags and only appear once real data exists, instead of showing placeholder social proof.
-   **Operations** — Moodle cron on a one-minute schedule with a lock against overlapping runs, and database + theme backups taken before each major change.

## Notable Engineering Challenges

-   **Rebranding a theme that hardcodes its brand** — colors, copy and fallback text were spread across SCSS, Mustache templates, PHP layout defaults and theme settings. I scripted idempotent replacements and verified the result by scanning both the rendered pages and a full database dump for leftover brand terms.
-   **Changing data through Moodle's own APIs** — logos, course covers, categories and courses were updated through Moodle's file storage and course APIs rather than raw SQL, so caches, events and file references stay consistent.
-   **Working around a slow tunnel** — pushing the 265 MB backup over the SSH tunnel stalled, so the server pulled the archive directly from cloud storage and it was verified by SHA-256 before the restore.

## Tech Stack

-   **Application:** Moodle 4.5, PHP 8.1, Boost Union child theme (SCSS, Mustache)
-   **Database:** MariaDB 10.11
-   **Infrastructure:** Docker Compose, Cloudflare Tunnel, Ubuntu 24.04 on-prem server

## Outcome

IDSpeaker now has its own LMS at lms.idspeaker.com: branded, served over HTTPS without exposing the server, and ready for real courses and learners.

A branded Moodle 4.5 learning platform for IDSpeaker: an existing Moodle deployment restored with Docker, rebranded end to end, rewritten around speaker-focused courses, and served from an on-prem server through Cloudflare Tunnel.

IDSpeaker LMS — Moodle Learning Platform

# Nusantara Command Center

A virtual 3D office that turns infrastructure monitoring into something you can walk around in. Servers appear as racks in a server room, projects as services, and a team of AI agents sits at desks and shows what they are working on in real time.

## Highlights

- **3D office map** built with Three.js: server room, agent desks, a live status wall and an executive office.
- **Live status**: server health, disk usage, problems and agent activity refresh continuously.
- **Chat with the AI team**: send a task to a single agent or to a relay of agents, and browse the files they produce.
- **Telegram Mini App** for the real data, plus a **public demo mode** with fictional data (Nusantara Digital Group) for visitors.
- Lightweight Python backend with no framework dependencies.

A 3D virtual office that monitors servers, projects and a team of AI agents live. Includes a Telegram Mini App and a public demo with fictional data.

Nusantara Command Center — 3D Virtual Office Dashboard

## Overview

Lega is a personal finance tracker where the chat is the main screen. Instead of filling in forms, you write what happened — "abis tf 300rb ke ibu buat topup pulsa" or "ngeluarin 150rb, obat 50, makan 70, minum 30" — and the app turns it into structured entries, shows the exact impact on your balances, and only saves once you confirm. A companion dashboard gives the bigger picture over the same data.

It is built mobile-first as an installable PWA (IDR, Bahasa Indonesia, Asia/Jakarta), because a phone is where money is actually spent.

Key Features

### Chat-first entry

-   Natural-language logging of expenses, income, transfers, top-ups, and card payments, including several entries from a single sentence
-   Every entry keeps three separate details: the **category**, the **merchant** (who or where), and the **note** (what it was for, in your own words)
-   Ambiguous requests (e.g. "BCA" matching two wallets) are clarified, never guessed
-   Named, pinnable, and archivable conversations, with quote-reply to a specific earlier message

### Confirm before anything is saved

-   The AI only drafts — it never posts. A draft opens in a bottom sheet showing the amount and the impact first
-   Money writes are committed with a deliberate **swipe-to-confirm**, and a confirmation submitted twice still produces exactly one transaction
-   Drafts can be edited before confirming; the backend re-validates and recomputes the impact

### Wallets, budgets, goals, and simulations

-   Multiple wallets (cash, bank, e-wallet, credit card) with correct handling of card debt and bill payments
-   Monthly budgets per category with clear "over budget" warnings in words, not just color
-   Savings goals using virtual allocations that never inflate net assets
-   "What if" simulations that never touch real data until you apply the plan
-   Spending summaries drawn as labelled bars inside the chat, plus CSV export

### Mobile & PWA

-   Installable, with a service worker that caches only the static shell — never finance or chat data
-   Composer that stays above the keyboard, safe-area aware, 44px touch targets, and no horizontal scroll from 320px up
-   Offline never fakes success: unsaved drafts are marked as such and are never auto-posted

## Tech Stack

-   **Frontend:** Next.js (App Router), React, MUI, built from a set of approved design boards
-   **Backend:** FastAPI (Python), SQLAlchemy, Alembic migrations
-   **Database:** PostgreSQL, with the schema kept portable to MariaDB
-   **AI:** Self-hosted Qwen model served through vLLM (OpenAI-compatible, tool calling), behind a swappable adapter
-   **Auth:** Email + password with Argon2id, server-side sessions in an httpOnly cookie, and login throttling
-   **Infra:** Docker, nginx, systemd, GitHub Actions deploys with automatic health-check rollback

## Highlights

-   A true **double-entry ledger**: every transaction sums to zero, so transfers are never counted as income or expense, card payments never double-count spending, and opening balances are not income.
-   **The LLM never computes money.** It only proposes structured tool calls; the backend authorizes, validates, and calculates with tested functions. Receipts and pasted text are treated as data, never instructions.
-   **Privacy by design:** user text stays on a self-hosted AI server rather than a third-party provider, and secrets never reach the browser — the PWA only talks to its own backend.
-   Nothing is silently deleted: corrections create a traceable reversal plus an audit event, and fixing a wrong category label moves no money.
-   Hard per-user isolation on every API, enforced and covered by a large automated backend test suite.

A chat-first personal finance app for Indonesian users — log expenses, income, transfers, budgets, and savings goals just by typing a sentence, then confirm with a swipe. Built as a mobile-first PWA on a double-entry ledger, with a self-hosted AI model doing the reading and the backend doing all the math.

Lega Finance APP

## Overview

Lumicore is a production-style HRIS (Human Resource Information System) covering the full employee lifecycle around attendance and payroll. It runs as two experiences from a single codebase: a mobile-first app for employees and a data-dense dashboard for HR/admin.

Key Features

### Attendance

-   GPS-geofenced check-in / check-out with selfie capture and automatic late detection
-   Client-visit attendance with per-location geofencing
-   Correction requests (missed check-in / late excuse) with an admin approval flow

### Requests & Workflows

-   Overtime with automatic pay estimation based on Indonesian labor law (PP 35/2021)
-   Reimbursement claims with categories and a full status flow (pending → approved → paid)
-   Leave management with annual-quota tracking (annual, sick, permission, unpaid)
-   Employee profile-change requests with admin review

### Payroll Engine

-   Dynamic salary components (earnings & deductions)
-   A custom, **sandboxed formula builder** — model component values with expressions like `(BASIC + PLACEMENT) * 8.33 / 100`, using system variables such as attendance days and monthly wage
-   One-click payslip generation per pay period (21→20) with draft → issued → paid states, and snapshot lines so history stays stable when master components change

### Scheduling

-   Weekly work patterns (WFO / WFH / off) and national-holiday sync

## Tech Stack

-   **Frontend:** Next.js (App Router), React, TypeScript, MUI
-   **Backend:** Next.js Route Handlers, Prisma ORM
-   **Database & Storage:** Supabase (PostgreSQL + Storage)
-   **Auth:** NextAuth (Google OAuth for employees) + a separate hardened admin session

## Highlights

-   Built a payroll engine with a safe expression evaluator so admins can model any salary structure without code changes.
-   Role-aware UX: bottom sheets, camera capture, and live GPS for staff; a dense, table-driven dashboard for admins.
-   End-to-end approval workflows across attendance, overtime, reimbursement, and leave.

A full-stack HRIS that handles GPS-based attendance, overtime, reimbursement, leave, and automated payroll — shipped as a mobile-first app for employees and a desktop dashboard for admins. Built with Next.js, Prisma, Supabase, and NextAuth.

HRIS, GPS Attendance & Payroll Platform

# idSpeaker — Public Speaker Booking Platform

## Overview

idSpeaker is a web platform that connects event organizers with professional public speakers. Visitors can browse a curated directory of speakers, explore topics and ready-made package programs, and build a full event reservation — selecting speakers per session, submitting a request, and tracking it through to payment. A role-based admin dashboard gives the internal team full control over speakers, bookings, site content, and pricing.

I was brought in to build/extend the platform end-to-end — from the public booking experience down to the operational dashboard used by staff to manage the business day to day.

## The Problem

Booking a speaker for an event is normally a manual, back-and-forth process — emails, phone calls, spreadsheets. The client needed a self-service platform where organizers could discover the right speaker, request a booking with specific schedules, and pay — while staff could manage everything (availability, pricing, confirmations) from one place, without touching code for routine changes.

## What I Built

-   **Speaker & topic discovery** — public-facing catalog of speakers, professions, topics, and bundled package programs.
-   **Event reservation flow** — a guided "Event Planner" where organizers assemble a full event: multiple sessions, each with its own speaker lineup, tracked through a clear status pipeline (requested → processing → payment → confirmed → completed).
-   **Manual payment workflow** — bank-transfer payment with proof-of-transfer upload, admin confirmation, and automatically generated PDF quotations.
-   **Role-based admin dashboard** — separate access levels for admins, agents, and company/personal accounts, each scoped to what they're allowed to manage.
-   **Business-configurable settings** — homepage content, contact info, bank details, and speaker pricing markup are all editable from the dashboard, so the client's team never needs a developer for routine content or pricing updates.
-   **Bilingual experience** — full Indonesian/English support across the public site.

## Notable Engineering Challenges

-   **Working with an inherited/legacy database** — the schema predated my involvement, requiring careful, non-destructive migration work to bring it under version control without breaking existing data.
-   **Structured, multi-session booking logic** — validating and persisting a nested reservation (event → schedules → speakers per session) while keeping the flow simple for end users.
-   **Secure, shareable booking links** — reservation identifiers are encrypted in URLs so booking details can't be guessed or tampered with.
-   **Decoupling business content from code** — building a settings/options layer so pricing rules and homepage content are data-driven rather than hardcoded.

## Outcome

The client's team now runs the entire booking-to-payment lifecycle through the platform — from a visitor's first browse of a speaker profile to a confirmed, paid event — with day-to-day content and pricing changes handled entirely through the dashboard.

IDSpeaker is a web platform that connects event organizers with professional public speakers. Visitors can browse a curated directory of speakers, explore topics and ready-made package programs, and build a full event reservation

IDSpeaker

## Overview

The platform is structured around three independently deployable services: a React SPA for operators and administrators, an Express REST API that orchestrates cameras, jobs, and events, and a FastAPI inference service that runs computer vision models via a gRPC contract. Detection jobs are queued asynchronously through BullMQ + Redis so the API never blocks on inference — results stream back to the frontend via Server-Sent Events the moment they are ready.

* * *

## Key Features

### AI Detection Checks

-   **PPE Compliance** — 14-class unified YOLO model detects helmet, face mask, safety vest, goggles, gloves, and construction equipment (ladders, safety cones)
-   **Face Mask Detection** — 3-class model with breakdown: mask, no\_mask, improper\_mask
-   **Crowd / Person Counting** — Fires a crowd violation when headcount exceeds a configurable camera threshold, with severity grades by ratio
-   **Red Zone Intrusion** — Pose estimation model (17 COCO keypoints) tracks foot position against admin-drawn polygons; any foot entering a restricted zone triggers a zero-tolerance high-severity alert
-   **Fall Detection** — Detects fallen persons via PPE compliance model class

### Camera & Area Management

-   Register cameras with RTSP source URLs, brand metadata, capture interval, and crowd thresholds
-   Organize cameras into areas and sections with a Leaflet map visualization
-   Draw red zone polygons directly on camera snapshots (normalized resolution-independent coordinates)
-   Test RTSP connection, trigger manual snapshots, and manage per-camera scheduler state

### Detection Job Workflow

-   Submit a detection job by selecting a camera and the checks to run
-   Backend enqueues the job to Redis; API responds immediately with 202
-   BullMQ inference worker captures an RTSP snapshot via ffmpeg, calls the AI service over gRPC, and persists the result to MongoDB
-   Frontend receives the completed event via SSE and updates the event table in real time — no page reload required

### Event Management

-   Full-featured event table with filter by camera, check type, status, and date range
-   Operators can acknowledge violations or mark them as false positives
-   Bulk actions, pagination, and Excel export for compliance reporting
-   Detail drawer shows annotated snapshot with bounding boxes and violation breakdown

### Notifications

-   Configurable People In Charge (PIC) per camera area
-   SMTP email alerts dispatched via dedicated BullMQ notification worker on violation detection
-   SMTP configuration and test-send available in the settings panel

### Dashboard & Analytics

-   Live stats cards: total events, unacknowledged violations, active cameras
-   Violation trend chart over time (Recharts)
-   Breakdown by check type and by camera

### Access Control

-   Three built-in roles: `super_admin`, `admin`, `viewer`
-   Custom roles with a granular permission matrix scoped by resource and action
-   JWT-based authentication with bcrypt password hashing
-   Immutable audit log for all write operations

* * *

## Architecture

```
Frontend (React + TypeScript)
        │  REST JSON + SSE
        ▼
Backend Web (Express + MongoDB + Redis/BullMQ)
        │  gRPC  (ai/proto/ai/v1/inference.proto)
        ▼
AI Service (FastAPI + YOLOv8/v26 + Pose Estimation)
```

**Request flow:**

1.  Frontend POSTs a detection job → Backend returns 202
2.  BullMQ inference worker picks up the job
3.  Worker captures RTSP frame (ffmpeg + Sharp) → calls AI service over gRPC
4.  AI runs inference (ThreadPoolExecutor, parallel model execution) → returns detections + violations
5.  Result persisted to MongoDB → EventBus publishes to SSE endpoint
6.  Frontend SSE client receives the event → React Query cache updated → UI re-renders

**gRPC contract** — `ai/proto/ai/v1/inference.proto` is the single source of truth. The backend copy must stay in sync. Breaking changes are versioned (`/v2/`), never mutating existing paths or fields.

* * *

## Tech Stack

Layer

Technologies

**Frontend**

React 18 · TypeScript · Vite · Tailwind CSS · React Router 6 · TanStack Query · Zustand · React Hook Form · Zod · Leaflet · Recharts · Axios

**Backend Web**

Node 20 · Express 4 · TypeScript · MongoDB + Mongoose · Redis + BullMQ · gRPC (`@grpc/grpc-js`) · JWT · Nodemailer · Sharp · ExcelJS · Swagger UI

**AI Service**

Python · FastAPI · YOLOv8/v26 (Ultralytics) · PyTorch · gRPC server · Pydantic · ThreadPoolExecutor

**Infrastructure**

MongoDB · Redis · ffmpeg (RTSP capture) · SMTP

* * *

## What Makes It Stand Out

**Decoupled inference via gRPC** — The AI service is fully isolated behind a typed protobuf contract. It can be swapped, scaled, or upgraded independently without touching the API or frontend.

**Non-blocking async pipeline** — BullMQ's four worker types (snapshot, inference, notification, cleanup) process everything off the critical path. The REST API stays fast even under sustained camera load.

**Pose-based red zone detection** — Rather than relying on bounding box overlap for zone intrusion, the system uses ankle keypoint extraction from a YOLO pose model to pinpoint foot position, reducing false positives caused by cameras at oblique angles.

**Parallel multi-model inference** — Multiple YOLO models run concurrently per job via `ThreadPoolExecutor`. A deduplication pass removes overlapping detections (IOU > 0.5) across models before results are aggregated per check.

**Type-safe across the stack** — TypeScript strict mode on both frontend and backend, Zod validation at every API boundary, and Pydantic schemas on the AI service. The protobuf contract enforces consistency between Python and Node without manual serialization logic.

**Schema governance** — JSON contracts in `ai/contracts/` mirror the protobuf definitions for non-gRPC consumers. Version policy enforced at the repo level: no mutation of existing fields, only additive extension or versioned paths.

A full-stack enterprise platform that runs real-time AI inference on CCTV streams to detect PPE violations, crowd anomalies, and red zone intrusions.

AI-Powered CCTV Surveillance & Violation Management Platform

# Algebra IIBS — International Islamic Boarding School Platform

## Overview

Algebra IIBS is the public website and back-office suite for Algebra International Islamic Boarding School (Pesantren Algebra IIBS): a Laravel 10 application covering the marketing site (news, teachers, dewan masyayikh, alumni, facilities), a token-based santri registration flow, and three independently authenticated admin panels serving different staff roles.

## The Problem

The school needed one site that could serve three very different audiences without blurring the lines between them: prospective students who register and track their application with nothing but a link, content staff who only need to post news, and office staff who review registrations and payment proof — all without giving any of them more access than their job requires, and without admin traffic polluting the school's own analytics.

## What I Built

- **Three independent admin guards** — `auth.admin` is a fully custom session against the `admins` table (not Laravel Auth) for the main CMS: news, teachers, masyayikh, alumni, user management and registrants. `auth.content` and `auth.registration` both ride Laravel's own session auth on the `users` table, separated purely by a `role` column, gating a focused content-editor screen and a registration-review dashboard respectively.
- **Token-based registration, no applicant accounts** — a single flat form at `/form-pendaftaran` creates a `Registration` with a generated `ALG-{year}-{0000}` number and a random 48-character `upload_token`. That token is the only credential: it unlocks the status page, the payment-proof upload, and resubmission after a rejection, with no login anywhere in the flow.
- **One controller, two admin surfaces** — the registrant review actions (verify, reject, export) live on a single controller reachable under both `/admin/registrants*` (the main CMS) and `/registration-admin/*` (the dedicated reviewer dashboard), branching on the request path to pick the right view and redirect.
- **Dual-layer analytics** — Google Tag Manager and a second, independently configured GA4 property run side by side on public pages only, plus self-hosted reading analytics: a `news_reads` table fed by an idempotent beacon (`navigator.sendBeacon`) that posts once on open and once on exit, so a lost or duplicated beacon never corrupts the count.
- **A real admin dashboard** — `/admin/dashboard` used to return a bare view with hardcoded stat cards. It's now backed by `NewsReadStats` (always available, no setup) and a `Ga4Reporter` pulled from the GA4 Data API, shown side by side so admins understand why the two numbers never quite match — ad blockers and bot filtering on one side, no credentials needed on the other.

## Notable Engineering Challenges

- **GA4 without the SDK** — the official `google/analytics-data` package pulls in gax and protobuf and prefers gRPC, which the shared-hosting `vendor` build (deployed over SSH as a tar archive) doesn't carry the extensions for. I implemented the GA4 Data API's service-account JWT flow (RFC 7523) by hand with Guzzle and OpenSSL instead, cutting the dependency down to what the host actually supports.
- **Keeping two analytics tools from double-counting** — GTM's own GA4 tag and the second, independently configured `gtag.js` property report to two different measurement IDs on purpose, so every page view is legitimately counted twice, in two separate properties, without either one inflating the other's numbers.
- **The document-root split** — production serves static assets from `public_html` (uploaded by hand, untouched by deploys) while anything resolved through `public_path()` in PHP comes from the real deploy path. The same file can silently diverge between the two, which looks like a caching bug but isn't. The deploy workflow now has a dedicated sync step that copies `public/assets` into `public_html` and verifies the copy with `cmp`, while deliberately leaving `index.php`, `.htaccess` and `uploads/` untouched since those are either server-modified or already resolve correctly.
- **A diagnostics command instead of silence** — every analytics failure on the normal request path is caught and logged, so a broken GA4 credential never breaks the dashboard. That also makes setup mistakes invisible by default, so `php artisan analytics:cek` exists purely to surface Google's actual error messages, uncached, for the one person debugging it.

## Tech Stack

| Layer | Tech |
| --- | --- |
| Backend | Laravel 10, PHP |
| Database | MySQL |
| Frontend | Blade, Tailwind CSS / Bootstrap (CDN), vanilla JS |
| Analytics | Google Tag Manager, GA4 (gtag.js + Data API via Guzzle/JWT) |
| Hosting | cPanel / LiteSpeed, deployed over SSH via GitHub Actions |

## Outcome

Algebra IIBS now runs as one codebase serving the public site, a self-service registration flow that needs no applicant accounts, and three cleanly separated admin surfaces — with an analytics setup that reports real numbers to staff even before GA4 credentials are configured.


A Laravel 10 platform for Algebra International Islamic Boarding School: a public marketing site, a token-based santri registration flow with no applicant accounts, and three independently authenticated admin back-offices for content, registration review, and full site management.

Algebra IIBS — International Islamic Boarding School Platform

## Overview

This web application lets users explore and personalize the Mercedes-Maybach S450 through three distinct viewing experiences: a static photo gallery, a drag-powered 360° exterior viewer, and an embedded 3D model. Every detail — from smooth color transitions to intelligent option pairing — was crafted to match the premium feel of the brand itself.

## Key Features

-   **360° Interactive Viewer** — 36-frame preloaded image sequence with drag-to-rotate interaction, pointer capture API, and smooth crossfade transitions between color variants
-   **Smart Color Configurator** — 4 exterior colors and 2 interior trim options with intelligent validation that prevents incompatible pairings
-   **3D Model Integration** — Embedded Sketchfab viewer for an immersive three-dimensional walkthrough
-   **Real-Time Search** — Instant filtering of color and trim options with auto-expand behavior
-   **Thumbnail Gallery** — Drag-scrollable gallery with inertia, active state tracking, and click vs. drag differentiation
-   **Preload & Caching System** — Progress-tracked image preloading with per-color cache to avoid redundant network requests

## Tech Stack

**Nuxt 4** · **Vue 3** (Composition API) · **TypeScript** · **TailwindCSS** · **Vite**

## What Makes It Stand Out

Built with real attention to performance and UX polish: hardware-accelerated CSS transitions, ARIA accessibility attributes, Mercedes corporate typography, and a fullscreen mode with Escape-key support. The configurator handles color switching with an 800ms crossfade, lazy-loads 3D content, and uses the Pointer Events API for consistent drag behavior across mouse and touch devices.

web application lets users explore and personalize the Mercedes-Maybach S450 through three distinct viewing experiences

Mercedes-Maybach S450 Interactive Configurator

This project is a front-end backoffice system designed for a sembako business that needs tighter control over daily operations and reporting. The application covers the full operational cycle, from managing master data and processing sales orders to handling purchases, stock movements, delivery orders, receivables, payables, and business reports.

Built with React, TypeScript, Vite, Tailwind CSS, and Zustand, the interface focuses on clarity, speed, and practical usability for internal teams. It includes protected routes, role-based dashboards, printable transaction documents, and structured reporting views that help users monitor stock, cash flow, profit and loss, and overall business performance.

For portfolio purposes, this project highlights my ability to design and build a multi-module business application with realistic workflows, scalable component structure, and a clean operational UI for real-world admin use cases.

Sembako Backoffice is a role-based operations dashboard built for a retail and distribution workflow. It streamlines product, customer, supplier, sales, purchasing, inventory, delivery, and financial reporting into one responsive web application.

Sembako Backoffice

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 1966, when designers at Letraset and James Mosley, the librarian at St Bride Printing Library in London, took a 1914 Cicero translation and scrambled it to make dummy text for Letraset's Body Type sheets

Wikrama website revolution

This project was designed as an end-to-end digital platform for active urban users who need more than just a booking app. With a modular, feature-first architecture, GBK App delivers a connected experience that lets users explore facilities through an interactive map, reserve sports venues, manage payments, join community discussions, track fitness activities, view notifications, and access profile and booking history flows.

  

Built with Flutter and structured around clean separation between presentation, domain, and data layers, the app emphasizes scalability, maintainability, and a polished user experience. It also integrates real-world mobile capabilities such as authentication, Google Sign-In, geolocation, camera access, QR generation, file sharing, and API-driven content, making it a strong showcase of full-featured cross-platform product development.

GBK App is a feature-rich Flutter application built to digitalize the Gelora Bung Karno ecosystem through one seamless mobile experience.

GBK APP

## 

**Carolus Fullstack** is a production-grade web application I built for STIK Sint Carolus, covering everything from a public-facing institutional website to a complete back-office content management system.

The platform serves two audiences simultaneously: **prospective students and the public** who browse programs, news, and events — and **internal staff and admins** who manage all of that content through protected API endpoints.

### What I built

## 

On the **backend**, I designed a RESTful API using **NestJS** with over 40 feature modules — covering academic programs, student registration (PMB), staff directories, alumni data, scholarships, surveys, career listings, and more. Authentication is handled via **JWT with refresh token rotation**, and access is controlled through a fully custom **Role-Based Access Control (RBAC)** system. The database layer uses **PostgreSQL** with **Prisma ORM**, with a schema spanning 60+ models.

On the **frontend**, I built a dynamic **Nuxt 3** application that consumes the API with zero static content — every page, from the homepage to individual program pages, is data-driven. I used **Pinia** for state management, **Tailwind CSS** for styling, and added features like image optimization, Google Analytics integration, multi-language support, and AOS scroll animations.

### Why it's interesting

## 

-   **Scale:** 40+ backend modules, 60+ database models, 20+ frontend pages — all maintained with a clean, modular monorepo structure.
-   **Real-world constraints:** Built for an actual institution with real users, which pushed me to think seriously about API design, performance, and content structure.
-   **Full ownership:** I handled everything — database schema design, API architecture, frontend UX, and deployment configuration — end to end.
-   **Public + Private split:** Thoughtfully separated guest (public) endpoints from protected admin routes, keeping the website fast and open while keeping the CMS secure.

### Tech Stack

## 

Layer

Tech

Frontend

Nuxt 3, Vue 3, Pinia, Tailwind CSS, TypeScript

Backend

NestJS, Passport.js, JWT, Multer, Swagger

Database

PostgreSQL, Prisma ORM

Tooling

ESLint, Prettier, Jest, dotenv

A full-stack web platform for STIK Sint Carolus, a nursing college in Jakarta, Indonesia — built to modernize their digital presence and centralize institutional data management in one cohesive system.

STIK SINT CAROLUS

This project was developed as a realistic MVP demo of an enterprise resource planning system for Hino operations. Built with Nuxt 4, Vue 3, TypeScript, and Tailwind CSS, the application focuses on clear data flow, role-based navigation, and business-driven UI across multiple operational modules.

  

From creating sales orders and tracking production progress to monitoring inventory, procurement requests, finance records, employee data, payroll, and vehicle after-sales history, the system is designed to reflect how departments work together inside a single source of truth. The result is a modern ERP interface that is structured, scalable, and presentation-ready for stakeholders or future backend integration.

ERP HINO is a modular ERP frontend  end-to-end business workflow for a manufacturing and distribution company. The platform connects sales, production, inventory, procurement, finance, HRIS, task management, and after-sales operations in one cohesive dashboard experience.

ERP HINO

## Short Summary

Good Gaming Shop is a full-stack e-commerce platform built for the gaming community, combining a modern storefront, a powerful admin dashboard, and a scalable backend API. The project is designed to handle product discovery, promotional campaigns, transactions, and operational workflows in one connected ecosystem.

## Description

This project was developed as an end-to-end digital commerce solution for a gaming retail brand. On the customer side, it delivers a responsive shopping experience with product browsing, category exploration, cart and checkout flow, account management, news content, event pages, and special commerce models such as interest checks and group-buy transactions.

On the business side, the platform includes a dedicated admin panel for managing products, categories, banners, promotions, vouchers, inventory, user roles, transactions, newsletters, events, and other content-driven modules. The admin system is supported by role-based access control and a reusable CRUD-driven structure, making it efficient to scale and maintain.

The backend API is built with Node.js, Express, TypeScript, and Prisma, providing a structured service layer for authentication, validation, database access, transaction handling, background jobs, and third-party integrations. Overall, Good Gaming Shop reflects my ability to build a production-oriented full-stack application that balances user experience, business operations, and technical scalability.

## Tech Stack

-   Frontend: Nuxt 3, Vue 3, Pinia, Tailwind CSS
-   Admin Panel: Nuxt 3, Vue 3, Pinia
-   Backend: Node.js, Express, TypeScript, Prisma
-   Supporting Tools: JWT/Auth, RBAC, background jobs, payment integration

Good Gaming Shop is a full-stack e-commerce platform built for the gaming community, combining a modern storefront, a powerful admin dashboard, and a scalable backend API.

Good Gaming Shop

# 

Sea Leader is a modern web platform for a marine travel and charter business, designed to handle both customer-facing booking flows and internal operational management. On the frontend, users can explore destinations, browse available boats, read blog content, and complete a multi-step booking journey with payment status tracking. On the backend, the system provides structured APIs for authentication, bookings, payments, referrals, analytics, CMS content, blog management, and admin audit logs.

The project uses Nuxt 3 and Vue for the frontend experience, while the backend is powered by Elysia, Prisma, and PostgreSQL. It also integrates payment workflows, email notifications, file uploads, role-based admin access, OpenAPI documentation, and reporting features. Overall, Sea Leader was built as a scalable digital product that combines a polished customer experience with practical business tools for daily operations.

Sea Leader is a full-stack marine tourism booking platform built to streamline charter discovery, trip reservations, secure online payments, and content management in one integrated product.

Sea Leader

# Setafio E-commerce

A modern, full-stack e-commerce platform built with React, Vite, and Supabase, featuring a robust admin dashboard and seamless user experience.

## Project Description

Setafio E-commerce is a comprehensive web application designed to facilitate online retail operations. It provides a specialized interface for both customers and administrators, ensuring efficient management of products, orders, and user interactions. The application leverages a high-performance tech stack to deliver fast load times, optimistic UI updates, and secure data handling.

### Features

- **User Interface (Frontend):**

  - **Responsive Design:** Built with **TailwindCSS** and **Shadcn UI** for a clean, modern, and mobile-friendly look.
  - **State Management:** Utilizes **React Query** for efficient server state management and caching.
  - **Interactive Components:** Features rich UI elements like optimistic cart updates, dynamic forms, and real-time feedback using **Sonner** toasts.
  - **Data Visualization:** Integrated **Recharts** for admin dashboard analytics.

- **Backend & Database:**

  - **API:** RESTful API built with **Node.js** and **Express**, written in **TypeScript** for type safety.
  - **Database:** Powered by **Supabase** (PostgreSQL) for reliable data storage and real-time capabilities.
  - **Authentication:** Secure user authentication and role-based access control (Admin/User).
  - **File Management:** Handles image uploads and asset management.

### Tech Stack

**Frontend**

- **Framework:** React 18 (Vite)
- **Language:** TypeScript
- **Styling:** TailwindCSS, Shadcn UI, Radix UI
- **Routing:** React Router DOM
- **Forms:** React Hook Form + Zod
- **Utilities:** Date-fns, Lucide React

**
Backend**

- **Runtime:** Node.js
- **Framework:** Express.js
- **Language:** TypeScript
- **Database:** Supabase (PostgreSQL)
- **Security:** Helmet, CORS
- **file Handling:** Multer

A modern, full-stack e-commerce platform built with React, Vite, and Supabase, featuring a robust admin dashboard and seamless user experience.

Setafio - ECommerce

# Shop.co - Platform E-commerce Modern

Aplikasi web e-commerce yang komprehensif dan responsif dibangun dengan **Vue 3** dan **Tailwind CSS**. Proyek ini mendemonstrasikan desain minimalis premium yang berfokus pada pengalaman pengguna, performa, dan praktik pengembangan web modern.

> **Catatan:** Proyek ini adalah etalase kemampuan pengembangan frontend dan ditujukan untuk tujuan informasi dan demonstrasi.

## 🚀 Teknologi yang Digunakan

- **Framework Utama:** [Vue 3](https://vuejs.org/) (Composition API)
- **Build Tool:** [Vite](https://vitejs.dev/)
- **Styling:** [Tailwind CSS](https://tailwindcss.com/)
- **Komponen UI:** [PrimeVue](https://primevue.org/) (Drawer, Paginator, Dropdown)
- **Routing:** [Vue Router](https://router.vuejs.org/)
- **Manajemen State:** [Pinia](https://pinia.vuejs.org/) (Tersedia/Dikonfigurasi)

## ✨ Fitur Utama

### 🛍️ Penjelajahan & Penyaringan Produk

- **Daftar Produk Dinamis:** Jelajahi produk dengan penyortiran real-time (Terbaru, Harga, Populer) dan opsi penyaringan.
- **Penyaringan Lanjutan:** Filter berdasarkan Kategori, Rentang Harga, Warna, dan Gaya Pakaian (Kasual, Formal, Pesta, Gym).
- **Tata Letak Responsif:** Grid adaptif yang terlihat bagus di desktop, tablet, dan seluler.
- **Mobile Drawer:** Laci filter khusus untuk pengalaman seluler yang mulus.

### 📄 Detail Produk

- **Tampilan Produk Kaya:** Galeri gambar berkualitas tinggi.
- **Variasi Produk:** Antarmuka pemilihan Warna dan Ukuran.
- **Sistem Ulasan:** Bagian ulasan pelanggan terintegrasi dengan peringkat dan umpan balik.
- **Produk Terkait:** Rekomendasi "Anda mungkin juga suka".

### 🛒 Keranjang Belanja

- **Keranjang Fungsional:** Kelola item, perbarui jumlah, dan hapus produk.
- **Ringkasan Pesanan:** Perhitungan subtotal, diskon, dan biaya pengiriman secara real-time.
- **Kode Promo:** UI untuk menerapkan kode promosi.

### 🔐 Halaman Otentikasi

- **Alur Lengkap:** Antarmuka Login, Registrasi, dan Lupa Kata Sandi.
- **Desain:** Layar otentikasi yang konsisten dan bermerek.

### 🌐 Navigasi & UX

- **Mega Menu:** Menu hover desktop interaktif untuk akses kategori cepat.
- **Navigasi Seluler:** Integrasi PrimeVue Drawer yang mulus untuk menu seluler.
- **Breadcrumbs:** Navigasi breadcrumb dinamis untuk hierarki situs yang lebih jelas.
- **Showcase Merek:** Halaman khusus yang menampilkan merek mitra.

## 🛠️ Instalasi Proyek

Untuk menjalankan proyek ini secara lokal, ikuti langkah-langkah berikut:

1. **Instal Dependensi**
2. 

```
npm install
```

3. **Jalankan Server Pengembangan**
4. 

```
npm run dev
```

5. **Build untuk Produksi**
6. 

```
npm run build
```

## 📂 Struktur Proyek

```
src/
├── assets/          # Aset statis (font, css utama)
├── components/      # Komponen UI yang dapat digunakan kembali (Navbar, Hero, ProductCard, dll.)
├── data/            # Sumber data tiruan (products.js)
├── router/          # Konfigurasi Vue Router
├── views/           # Komponen Halaman (HomeView, ProductListView, CartView, dll.)
└── App.vue          # Komponen Root

```

## 🎨 Sistem Desain

Proyek ini mematuhi sistem desain yang ketat:

- **Font:** *Integral CF* untuk judul (Tebal/Kuat) dan *Satoshi* untuk teks isi (Keterbacaan bersih).
- **Palet Warna:** Fondasi monokrom (Hitam/Putih/Abu-abu) dengan aksen halus.
- **Komponen:** Komponen modular dan dapat digunakan kembali yang digayakan dengan kelas utilitas Tailwind.

Aplikasi web e-commerce yang komprehensif dan responsif dibangun dengan Vue 3 dan Tailwind CSS.

SHOP.CO - Ecommerce

# 🏥 **Klinik Mata Tritya**

### *Website Manajemen Klinik Mata Modern dengan Admin Panel Terintegrasi*

## 📋 **Ikhtisar Proyek**

**Klinik Mata Tritya** adalah aplikasi web **full-stack** yang dirancang khusus untuk memenuhi kebutuhan manajemen klinik mata modern. Proyek ini menggabungkan antarmuka publik yang informatif dan menarik dengan sistem **admin panel** yang powerful untuk pengelolaan konten secara real-time.

Dikembangkan menggunakan **Laravel 10** dan **PHP 8.2**, sistem ini menawarkan solusi lengkap untuk klinik kesehatan mata, mulai dari manajemen layanan medis, dokter spesialis, peralatan medis, hingga posting artikel kesehatan dan galeri media sosial.

Important

Proyek ini mendemonstrasikan kemampuan dalam membangun aplikasi **enterprise-level** dengan arsitektur MVC yang clean, database design yang optimal, dan user experience yang modern dan responsif.

## ✨ **Fitur Utama**

### 🌐 **Frontend Publik**

- **Landing Page Responsif** dengan design modern dan user-friendly
- **Informasi Layanan** medis lengkap dengan deskripsi detail
- **Profil Dokter Spesialis** mata dengan foto dan jadwal praktik
- **Katalog Peralatan Medis** modern dengan visualisasi interaktif
- **Artikel Kesehatan** dan tips perawatan mata
- **Social Media Feed** terintegrasi dengan embed Instagram/Facebook
- **FAQ Dinamis** dengan kategori dan accordion navigation

### ⚙️ **Admin Panel (Metro-Style)**

- **Dashboard Analytics** dengan statistik real-time
- **CRUD Lengkap** untuk semua entitas data:

  - ✅ Manajemen Dokter
  - ✅ Manajemen Layanan (Services)
  - ✅ Manajemen Peralatan Medis
  - ✅ Manajemen Artikel/Berita
  - ✅ Manajemen Social Feed
  - ✅ Manajemen FAQ & Kategori
  - ✅ Manajemen Appointment

- **Authentication System** dengan session management
- **Image Upload & Management** dengan storage optimization
- **Rich Text Editor** untuk konten artikel

### 🎨 **User Experience**

- **Swiper Sliders** untuk gallery dan carousel
- **Chart.js Visualizations** untuk data kompetensi dan pendidikan
- **Skeleton Loading States** untuk better perceived performance
- **Smooth Animations** dan micro-interactions
- **Responsive Design** untuk semua device sizes

## 🛠️ **Technology Stack**

### Backend

**TechnologyVersionPurposeLaravel** | 10.x | PHP Framework
**PHP** | 8.2 | Server-side Language
**MySQL** | 8.x | Database Management
**Eloquent ORM** | - | Database Abstraction

### Frontend

**TechnologyPurposeBlade Templates** | Template Engine
**Bootstrap 5** | CSS Framework
**JavaScript ES6+** | Client-side Logic
**Swiper.js** | Touch Slider
**Chart.js** | Data Visualization
**Custom CSS3** | Animations & Styling

### Development Tools

```
├── Composer          # PHP Dependency Manager
├── Git               # Version Control
├── Vite              # Asset Bundler
├── NPM               # JavaScript Package Manager
└── Artisan           # Laravel CLI Tool
```

## 💡 **Technical Highlights**

### 🎨 **Frontend Development**

- Implementasi **UI/UX modern** dengan Bootstrap 5 dan custom CSS animations
- **Skeleton loading states** untuk improved user experience
- **Interactive components** seperti Swiper sliders dan Chart.js visualizations
- **Responsive grid layouts** dengan mobile-first approach
- **Glassmorphism effects** dan gradient backgrounds
- **Smooth transitions** dan hover effects di semua elemen interaktif

### 🔧 **Backend Architecture**

- **Clean MVC Structure** dengan separation of concerns
- **Controllers** yang terorganisir untuk Front dan Admin
- **Models** dengan Eloquent relationships yang efisien:

  - One-to-Many relationships
  - Eager loading untuk query optimization

- **Middleware authentication** untuk protected routes
- **Database migrations** yang terstruktur dan reusable
- **Seeder classes** untuk data testing

### 💾 **Database Design**

- **Normalisasi database** yang optimal
- **Foreign key constraints** untuk data integrity
- **Efficient indexing** untuk fast queries
- **Soft deletes** untuk data recovery
- **Timestamps** untuk audit trail

**Database Tables:**

```
├── users
├── doctors
├── services
├── medical_equipments
├── articles
├── social_feeds
├── faq_categories
├── faqs
└── appointments

```

### 🚀 **Performance Optimization**

- **Query optimization** dengan Eloquent eager loading
- **Lazy loading** untuk images
- **Asset compilation** dengan Vite
- **Database indexing** untuk fast lookups
- **Caching strategies** untuk repeated queries

### 🔒 **Security Features**

- **CSRF Protection** di semua forms
- **SQL Injection Prevention** melalui Eloquent ORM
- **Secure Authentication System** dengan bcrypt password hashing
- **Validation** untuk semua user inputs
- **Middleware protection** untuk admin routes
- **Session management** dengan secure cookies

## 📊 **Project Statistics**

**8+**
Database Tables | **15+**
Frontend Pages | **20+**
Admin CRUD Features | **100%**
Responsive Design

## 🎯 **Key Achievements**

Note

**Dynamic Content Management System**

Semua konten website dapat dikelola melalui admin panel tanpa perlu touching code, memungkinkan non-technical staff untuk update informasi klinik secara mandiri.

Tip

**Modern UI/UX Implementation**

Implementasi design patterns terkini seperti skeleton loading, smooth animations, dan interactive components menghasilkan user experience yang premium dan engaging.

Important

**Scalable Architecture**

Arsitektur MVC yang clean dan modular memudahkan untuk maintenance dan penambahan fitur baru di masa depan tanpa refactoring major.

## 🔄 **Development Workflow**

## 📁 **Project Structure**

```
klinik-mata-tritya/
├── app/
│   ├── Http/
│   │   ├── Controllers/
│   │   │   ├── Admin/          # Admin CRUD Controllers
│   │   │   └── Front/          # Frontend Controllers
│   │   └── Middleware/         # Authentication & Guards
│   └── Models/                 # Eloquent Models
├── database/
│   ├── migrations/             # Database Schema
│   └── seeders/                # Sample Data
├── resources/
│   └── views/
│       ├── admin/              # Admin Panel Views
│       ├── front/              # Public Frontend Views
│       └── layouts/            # Reusable Layouts
├── routes/
│   ├── web.php                 # Web Routes
│   └── api.php                 # API Routes (future)
└── public/
    ├── css/                    # Compiled Stylesheets
    ├── js/                     # JavaScript Files
    └── images/                 # Static Assets

```

## 🚀 **Features Breakdown**

### **1. Doctor Management System**

- ✅ Create, read, update, delete doctor profiles
- ✅ Upload doctor photos dengan preview
- ✅ Set spesialisasi dan jadwal praktik
- ✅ Display di frontend dengan card layout modern

### **2. Medical Equipment Catalog**

- ✅ Database peralatan medis lengkap
- ✅ Interactive Swiper slider dengan state management
- ✅ Active/inactive card states dengan smooth transitions
- ✅ "Selengkapnya" modal untuk detail lengkap

### **3. News & Articles CMS**

- ✅ Rich text editor untuk konten artikel
- ✅ Category management
- ✅ Featured image upload
- ✅ Publication date scheduling
- ✅ Related posts suggestions

### **4. Social Media Integration**

- ✅ Instagram & Facebook embed support
- ✅ Embed code storage di database
- ✅ Responsive embed containers
- ✅ Auto-refresh feed capability

### **5. FAQ Management**

- ✅ Category-based organization
- ✅ Dynamic topic selection
- ✅ Accordion-style Q&A display
- ✅ Search & filter functionality

### **6. Interactive UI Components**

- ✅ Swiper.js sliders dengan custom navigation
- ✅ Chart.js untuk kompetensi & pendidikan charts
- ✅ Skeleton loading untuk better UX
- ✅ Modal dialogs untuk detail views
- ✅ Form validation dengan real-time feedback

## 🎓 **Learning Outcomes**

Melalui proyek ini, saya mengembangkan kompetensi dalam:

### **Backend Development**

- ✅ Laravel framework architecture dan ecosystem
- ✅ Eloquent ORM dengan complex relationships
- ✅ Database design dan normalization
- ✅ Authentication & authorization systems
- ✅ RESTful routing conventions
- ✅ Middleware implementation

### **Frontend Development**

- ✅ Blade templating engine
- ✅ Bootstrap 5 framework dan customization
- ✅ JavaScript ES6+ dan DOM manipulation
- ✅ Third-party library integration (Swiper, Chart.js)
- ✅ Responsive design principles
- ✅ CSS animations dan transitions

### **Full-Stack Integration**

- ✅ Seamless frontend-backend communication
- ✅ Form handling dan validation (client & server-side)
- ✅ Image upload dan storage management
- ✅ AJAX requests untuk dynamic content
- ✅ Error handling dan user feedback

### **Software Engineering Practices**

- ✅ Git version control workflow
- ✅ Code organization dan modularity
- ✅ Documentation dan code comments
- ✅ Debugging dan troubleshooting
- ✅ Performance optimization techniques

## 🌟 **Why This Project Stands Out**

### **1. Enterprise-Level Quality**

Bukan sekadar prototype atau MVP, tetapi aplikasi production-ready dengan attention to detail di setiap aspek - dari database schema hingga UI micro-interactions.

### **2. Complete Admin System**

Admin panel yang fully functional dengan CRUD operations untuk semua entities, membuatnya sebagai CMS yang benar-benar usable oleh end-users.

### **3. Modern Tech Stack**

Menggunakan Laravel 10 dan PHP 8.2 terbaru dengan best practices dan latest features seperti arrow functions, typed properties, dan modern syntax.

### **4. Professional UI/UX**

Design yang tidak generic, dengan custom animations, glassmorphism effects, smooth transitions, dan interactive components yang membuat website terasa premium.

### **5. Scalable Architecture**

Clean code structure yang memudahkan untuk maintenance, testing, dan penambahan fitur baru tanpa technical debt.

## 📈 **Future Enhancements**

- **Patient Portal** dengan appointment booking system
- **Online Consultation** dengan video call integration
- **Payment Gateway** untuk pembayaran online
- **Medical Records** system untuk patient history
- **SMS/Email Notifications** untuk appointment reminders
- **Multi-language Support** (Indonesia & English)
- **RESTful API** untuk mobile app integration
- **Advanced Analytics** dashboard dengan reporting

## 🔗 **Project Links**

- 🌐 **Live Demo**: [Tritya Website](https://tritya.space/)

### **Challenges Overcome**

1. **Complex Swiper State Management** - Implemented custom logic untuk kontrol active/inactive state melalui navigation buttons
2. **SQL Group By Compatibility** - Resolved only_full_group_by SQL mode issues dengan proper query structure
3. **Dynamic Social Feed Embeds** - Integrated Instagram/Facebook embed codes dengan responsive containers
4. **Skeleton Loading Timing** - Perfected loading state transitions untuk smooth user experience

### **Technologies Mastered**

- Laravel Blade components dan layouts
- Eloquent relationships (one-to-many, many-to-many)
- Bootstrap customization dan theming
- JavaScript event handling dan DOM manipulation
- Database migrations dan seeding
- File upload dan storage management

## ⚡ **Quick Setup**

```
# Clone repository
git clone 

# Install dependencies
composer install
npm install

# Setup environment
cp .env.example .env
php artisan key:generate

# Database setup
php artisan migrate
php artisan db:seed

# Storage link
php artisan storage:link

# Run development server
php artisan serve
```

### 💼 **Developed with ❤️ by AfganAlzena**

*Demonstrating expertise in Full-Stack Web Development*[](https://laravel.com/)[](https://php.net/)[](https://getbootstrap.com/)[](https://mysql.com/)

**Ready for Portfolio Showcase** ✨

Web Company profile Klinik mata fullstack dengan manajemen informasi data website

Klinik Mata Tritya

# Sistem PPDB SMK Wikrama Bogor

Aplikasi web untuk mengelola Penerimaan Peserta Didik Baru (PPDB) SMK Wikrama Bogor Tahun Pelajaran 2024-2025.

## Tentang Proyek

Sistem PPDB ini adalah cloning aplikasi berbasis web yang sudah ada yang dikembangkan untuk memfasilitasi proses pendaftaran siswa baru di SMK Wikrama Bogor. Aplikasi ini menyediakan platform digital yang memudahkan calon siswa untuk mendaftar dan melakukan pembayaran pendaftaran secara online.

## Tujuan Proyek

1. **Digitalisasi Proses Pendaftaran** - Mengubah proses pendaftaran manual menjadi sistem online yang lebih efisien
2. **Kemudahan Akses** - Memudahkan calon siswa mendaftar dari mana saja dan kapan saja
3. **Manajemen Pembayaran** - Mengelola verifikasi pembayaran pendaftaran secara terstruktur
4. **Transparansi** - Memberikan transparansi status pendaftaran dan pembayaran kepada calon siswa
5. **Efisiensi Administrasi** - Mempermudah tim admin dalam mengelola data pendaftar dan verifikasi pembayaran

## Fitur Utama

### Untuk Calon Siswa (Student)

- Registrasi akun dengan data lengkap (NISN, nama, email, jenis kelamin, asal sekolah, kontak)
- Login ke sistem
- Upload bukti pembayaran pendaftaran
- Melacak status verifikasi pembayaran (pending, accepted, rejected)
- Mengajukan ulang pembayaran jika ditolak
- Download bukti pendaftaran dalam format PDF

### Untuk Admin

- Login ke sistem dengan akses khusus
- Melihat daftar semua pembayaran yang masuk
- Verifikasi bukti pembayaran (menerima atau menolak)
- Mengelola data pendaftar

## Teknologi yang Digunakan

- **Framework**: Laravel 11.x
- **Bahasa**: PHP 8.2+
- **Database**: MySQL/PostgreSQL
- **Frontend**: Blade Templates, TailwindCSS
- **PDF Generator**: DomPDF (Laravel-DomPDF)
- **Build Tools**: Vite, PostCSS

## Struktur Database

### Tabel Users

Menyimpan data calon siswa dan admin:

- NISN (unik)
- Nama lengkap
- Email (unik)
- Jenis kelamin
- Nama sekolah asal
- Nomor telepon (siswa, ayah, ibu)
- Role (admin/student)

### Tabel Payments

Menyimpan data pembayaran pendaftaran:

- ID User (foreign key)
- Nama pemilik rekening
- Nama bank
- Nominal pembayaran
- Bukti bayar (file upload)
- Status (pending/accepted/rejected)

## Instalasi

1. Clone repository

```
git clone https://github.com/MuhamadAfghan/ppdb-wikrama.git
cd ppdb-wikrama
```

1. Install dependencies

```
composer install
npm install
```

1. Setup environment

```
cp .env.example .env
php artisan key:generate
```

1. Konfigurasi database di file .env

```
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=ppdb_wikrama
DB_USERNAME=root
DB_PASSWORD=

```

1. Jalankan migrasi dan seeder

```
php artisan migrate:fresh --seed
```

1. Build assets

```
npm run dev
```

1. Jalankan aplikasi

```
php artisan serve
```

Akses aplikasi di http://localhost:8000

## Workflow Pendaftaran

1. Calon siswa melakukan registrasi dengan mengisi data lengkap
2. Login ke sistem menggunakan email dan password
3. Upload bukti pembayaran pendaftaran (nama bank, nama pemilik rekening, nominal, foto bukti)
4. Status pembayaran akan menjadi "pending"
5. Admin melakukan verifikasi pembayaran
6. Jika diterima, status berubah menjadi "accepted" dan siswa dapat download bukti pendaftaran
7. Jika ditolak, status menjadi "rejected" dan siswa dapat mengajukan ulang

Aplikasi web untuk mengelola PPDB. Proyek ini merupakan kloning dari sistem yang sudah ada, dikembangkan sebagai tugas pembelajaran.

PPDB Wikrama 2024 - 2025

Web kolaborasi, membuat fullstack app untuk jam digital masjid. Manajemen keuangan, jadwal shalat, serta text himbauan

Jam Digital Masjid

# 🎭 AnonSender - Platform Pesan Anonim

AnonSender adalah platform web yang memungkinkan pengguna untuk mengirim dan menerima pesan anonim dengan aman. Dibangun dengan Next.js dan menggunakan Firebase untuk autentikasi dan penyimpanan data.

## ✨ Fitur Utama

- 📨 **Kirim Pesan Anonim** - Kirim pesan tanpa mengungkapkan identitas Anda
- 👤 **Profil Personal** - Setiap user memiliki link unik untuk menerima pesan
- 🔐 **Autentikasi Aman** - Login/Register dengan NextAuth & Firebase
- 💾 **Simpan Pesan** - Simpan pesan favorit ke koleksi pribadi
- 📱 **Responsive Design** - Tampilan optimal di berbagai perangkat
- 🎨 **UI Modern** - Interface cantik dengan animasi dan efek visual
- 🔔 **Notifikasi Real-time** - Dapatkan notifikasi ketika ada pesan baru
- 🌙 **Dark Mode Ready** - Dukungan tema gelap/terang

## 🛠️ Tech Stack

### Frontend

- **Next.js 14.2.6** - React Framework untuk production
- **React 18** - Library UI
- **TailwindCSS** - Styling utility-first
- **Framer Motion** - Animasi smooth
- **Radix UI** - Component library untuk accessibility

### Backend & Database

- **Firebase** - Authentication & Database
- **NextAuth** - Authentication framework
- **API Routes** - Next.js built-in API

### UI Components & Libraries

- **shadcn/ui** - Reusable components
- **MagicUI** - Komponen animasi modern
- **Lucide React** - Icon library
- **Sonner** - Toast notifications
- **React Hook Form** - Form management
- **Axios** - HTTP client

## 📁 Struktur Proyek

```
ngl/
├── public/                 # Asset statis (gambar, GIF, dll)
├── src/
│   ├── components/        # Komponen React reusable
│   │   ├── ui/           # UI components (button, input, card, dll)
│   │   ├── dashboard/    # Komponen khusus dashboard
│   │   ├── magicui/      # Komponen animasi
│   │   └── animata/      # Komponen background & button
│   ├── pages/            # Routing Next.js
│   │   ├── api/         # API endpoints
│   │   ├── auth/        # Halaman autentikasi
│   │   └── dashboard/   # Halaman dashboard user
│   ├── view/            # Page components/layouts
│   ├── lib/             # Utility functions
│   ├── utils/           # Helper functions
│   └── styles/          # Global styles & CSS modules
├── components.json       # Konfigurasi shadcn/ui
├── tailwind.config.js   # Konfigurasi TailwindCSS
└── next.config.mjs      # Konfigurasi Next.js

```

## 🚀 Getting Started

### Prerequisites

Pastikan Anda telah menginstal:

- Node.js 16.x atau lebih tinggi
- npm, yarn, pnpm, atau bun

### Instalasi

1. Clone repository

```
git clone https://github.com/MuhamadAfghan/anon-sender.git
cd ngl
```

1. Install dependencies

```
npm install
# atau
yarn install
# atau
pnpm install
```

1. Setup environment variables

Buat file .env.local di root directory dan tambahkan:

```
# Firebase Configuration
NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_auth_domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_storage_bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id

# NextAuth
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your_nextauth_secret
```

1. Jalankan development server

```
npm run dev
# atau
yarn dev
# atau
pnpm dev
```

1. Buka browser di [http://localhost:3000](http://localhost:3000/)

## 📖 Cara Penggunaan

### Untuk Pengirim Pesan

1. Kunjungi link profil user (misalnya: localhost:3000/username)
2. Tulis pesan anonim di form yang tersedia
3. Klik kirim - pesan akan dikirim tanpa menampilkan identitas Anda

### Untuk Penerima Pesan

1. Register/Login ke akun Anda
2. Bagikan link profil Anda ke teman-teman
3. Buka dashboard untuk melihat pesan yang masuk
4. Simpan pesan favorit atau hapus pesan yang tidak diinginkan

## 🎯 Fitur Dashboard

- **Messages** - Lihat semua pesan masuk dengan pagination
- **Saved Messages** - Koleksi pesan yang telah disimpan
- **Profile** - Kelola profil dan link personal
- **Settings** - Pengaturan akun dan preferensi

## 🎨 Komponen UI Custom

Proyek ini menggunakan berbagai komponen UI custom:

- Wobble Cards - Kartu dengan efek hover menarik
- Shiny Button - Tombol dengan efek kilau
- Pulsating Button - Tombol dengan animasi pulse
- Background Beams - Efek background dengan sinar
- Shooting Stars - Animasi bintang jatuh
- Blurry Blob - Background dengan efek blur

## 📜 API Endpoints

### Messages API

- GET /api/messages - Ambil daftar pesan
- POST /api/messages - Kirim pesan baru
- DELETE /api/messages/:id - Hapus pesan
- PUT /api/messages/:id - Update status pesan (save/unsave)

### Users API

- GET /api/users - Ambil data user
- POST /api/users - Buat user baru
- PUT /api/users/:id - Update data user

## 🔧 Scripts Available

```
npm run dev      # Jalankan development server
npm run build    # Build untuk production
npm run start    # Jalankan production server
npm run lint     # Jalankan ESLint
```

## 🌐 Deployment

### Deploy ke Vercel (Recommended)

1. Push code ke GitHub repository
2. Import project di [Vercel](https://vercel.com/)
3. Tambahkan environment variables
4. Deploy!

### Deploy Manual

```
npm run build
npm run start
```

## 🤝 Contributing

Kontribusi selalu diterima! Silakan:

1. Fork repository
2. Buat branch fitur (git checkout -b feature/AmazingFeature)
3. Commit perubahan (git commit -m 'Add some AmazingFeature')
4. Push ke branch (git push origin feature/AmazingFeature)
5. Buat Pull Request

## 📝 License

Project ini dibuat untuk tujuan pembelajaran dan pengembangan.

## 📧 Kontak

Untuk pertanyaan atau saran, silakan buat issue di repository ini.

## 🙏 Acknowledgments

- [Next.js](https://nextjs.org/) - Framework React
- [Tailwind CSS](https://tailwindcss.com/) - CSS Framework
- [shadcn/ui](https://ui.shadcn.com/) - UI Components
- [Firebase](https://firebase.google.com/) - Backend Services
- [Vercel](https://vercel.com/) - Hosting Platform

Dibuat dengan ❤️ menggunakan Next.js

AnonSender adalah platform web yang memungkinkan pengguna untuk mengirim dan menerima pesan anonim dengan aman.

AnonSender - Platform Pesan Anonim

# EvoConnect - Professional Social Networking Platform

EvoConnect is a comprehensive full-stack social networking platform designed for professional connections, job hunting, and career development. Built with modern technologies, it provides LinkedIn-like functionality with advanced features for professional networking, company management, content sharing, and real-time communication.

## Table of Contents

- [Project Overview](https://github.com/MuhamadAfghan/evoconnect/blob/collect-evoconnect/README.md#project-overview)
- [Features](https://github.com/MuhamadAfghan/evoconnect/blob/collect-evoconnect/README.md#features)
- [Tech Stack](https://github.com/MuhamadAfghan/evoconnect/blob/collect-evoconnect/README.md#tech-stack)
- [Contributing](https://github.com/MuhamadAfghan/evoconnect/blob/collect-evoconnect/README.md#contributing)
- [Team](https://github.com/MuhamadAfghan/evoconnect/blob/collect-evoconnect/README.md#team)
- [License](https://github.com/MuhamadAfghan/evoconnect/blob/collect-evoconnect/README.md#license)

## Project Overview

EvoConnect is a professional networking platform that facilitates meaningful connections between professionals, companies, and job seekers. The platform offers comprehensive features for career development, knowledge sharing, and business networking in the technology industry.

## Features

### 🔐 Authentication & Security

- **Multi-provider Authentication**: Email/password, Google OAuth integration
- **JWT-based Security**: Secure token-based authentication with refresh tokens
- **Password Management**: Secure password reset via email verification
- **Admin Authentication**: Separate admin panel with role-based access control

### 👤 User Management

- **Rich Profile System**: Professional profiles with photos, headlines, and contact information
- **Experience Management**: Add/edit work experiences with company logos and descriptions
- **Education Tracking**: Academic background with institutions and degrees
- **Skills & Endorsements**: Skill management with peer endorsements
- **Profile Analytics**: Track profile views and engagement metrics

### 🤝 Social Networking

- **Connection System**: Send/accept connection requests with personalized messages
- **Follow Companies**: Stay updated with company activities and job postings
- **Network Discovery**: Find and connect with professionals in your field
- **Connection Recommendations**: AI-powered connection suggestions

### 📰 Content & Feed

- **Dynamic News Feed**: Personalized content feed with smart algorithms
- **Rich Text Editor**: CKEditor integration for professional content creation
- **Multi-media Posts**: Support for images, videos, and document attachments
- **Post Interactions**: Like, comment, reply, and share functionality
- **Content Moderation**: Report inappropriate content with admin review system

### 👥 Group Management

- **Professional Groups**: Create and join industry-specific groups
- **Group Moderation**: Admin controls for member approval and content management
- **Group Analytics**: Track group engagement and member activity
- **Event Management**: Organize and manage professional events within groups

### 💼 Job Portal

- **Job Listings**: Comprehensive job posting system with detailed descriptions
- **Application Management**: Track applications with status updates
- **Saved Jobs**: Bookmark interesting opportunities for later review
- **Company Job Pages**: Dedicated company career pages
- **Application Analytics**: Track application success rates and feedback

### 🏢 Company Profiles

- **Company Pages**: Detailed company profiles with branding and information
- **Company Analytics**: Track follower growth and engagement metrics
- **Job Posting Management**: Post and manage job openings
- **Company Updates**: Share company news and achievements
- **Employee Management**: Manage company employee profiles and permissions

### 📝 Blog Platform

- **Professional Blogging**: Rich text blog creation with multimedia support
- **Article Management**: Draft, publish, and schedule blog posts
- **Blog Analytics**: Track article views, engagement, and reader demographics
- **Comment System**: Threaded comments with reply functionality
- **Content Categories**: Organize content by industry topics and tags

### 💬 Communication

- **Real-time Messaging**: WebSocket-based instant messaging system
- **File Sharing**: Share documents and media in conversations
- **Message Status**: Read receipts and delivery confirmations

### 🔔 Notifications

- **Real-time Alerts**: Instant notifications for important activities
- **Email Notifications**: Configurable email alerts for key events
- **Push Notifications**: Browser-based push notification support
- **Notification Preferences**: Granular control over notification types

### 📊 Analytics & Reporting

- **Profile Analytics**: Track profile views and search appearances
- **Content Performance**: Monitor post engagement and reach
- **Network Growth**: Visualize connection growth over time
- **Admin Dashboard**: Comprehensive platform analytics and user management

### 🛡️ Content Moderation

- **Report System**: User-generated content reporting with admin review
- **Automated Moderation**: AI-powered content filtering
- **Admin Panel**: Comprehensive moderation tools and user management
- **Content Appeals**: Appeal system for moderation decisions

## Tech Stack

### Backend

- **Language**: [Go (Golang)](https://golang.org/) v1.21+
- **Database**: PostgreSQL 14+ with optimized indexing
- **Authentication**: JWT with RS256 signing algorithm
- **File Storage**: Local filesystem with organized directory structure
- **Email Service**: SMTP integration for transactional emails
- **WebSocket**: Real-time communication support
- **Validation**: Go-playground/validator for request validation
- **Logging**: Structured logging with logrus
- **CORS**: Configurable cross-origin resource sharing

### Frontend

- **Framework**: [React 18](https://reactjs.org/) with [Vite](https://vitejs.dev/) build tool
- **Language**: JavaScript ES6+ with JSX
- **Styling**: [Tailwind CSS](https://tailwindcss.com/) v3.x with custom components
- **State Management**: React hooks (useState, useEffect, useContext)
- **Routing**: [React Router v6](https://reactrouter.com/) with protected routes
- **HTTP Client**: [Axios](https://axios-http.com/) with interceptors
- **Form Handling**: Custom form validation with real-time feedback
- **Rich Text Editor**: [CKEditor 5](https://ckeditor.com/) for content creation
- **Charts**: [Chart.js](https://www.chartjs.org/) with React wrapper for analytics
- **Icons**: [Lucide React](https://lucide.dev/) icon library
- **Notifications**: [React Toastify](https://fkhadra.github.io/react-toastify/) for user feedback
- **Date Handling**: [Day.js](https://day.js.org/) for date manipulation
- **Image Handling**: Custom image upload and preview components

### Development Tools

- **Version Control**: Git with conventional commits
- **Code Quality**: ESLint and Prettier for consistent formatting
- **API Testing**: Postman collections with comprehensive test suites
- **Documentation**: Swagger/Postman 3.0 specification
- **Environment Management**: Environment-based configuration

## Contributing

We welcome contributions from the community! Please follow these guidelines:

### Development Workflow

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Make your changes with clear, descriptive commits
4. Write or update tests as needed
5. Ensure code follows the project's style guidelines
6. Push to your branch (git push origin feature/amazing-feature)
7. Open a Pull Request with a detailed description

### Code Standards

- **Go**: Follow Go conventions, use gofmt and golint
- **React**: Use functional components with hooks, follow ESLint rules
- **Git**: Use conventional commit messages
- **Documentation**: Update README and API docs for new features

### Pull Request Process

1. Ensure all tests pass
2. Update documentation for any API changes
3. Include screenshots for UI changes
4. Get at least one code review approval
5. Ensure CI/CD checks pass

## Team

This project was developed by talented interns from SMK Wikrama Bogor:

### Development Team

- **Muhamad Afghan Alzena** - *Full Stack Developer*

  - Lead developer responsible for overall architecture and implementation
  - Backend API development and frontend integration
  - API development and security implementation
  - Database design and optimization

- **Fazrie Riesky Putra** - *Backend Developer*

  - Database design and optimization
  - API development and security implementation

- **Zahran Fairuz** - *Frontend Developer*

  - User interface design and implementation
  - Cross-browser compatibility and testing
  - React components and state management
  - Component optimization and performance tuning

- **Bintang Asydqy** - *Frontend Developer*

  - Interface development and styling
  - Frontend feature development

- **Zahra Kamila** - *Frontend Developer*

  - UI/UX development and responsive design
  - User experience optimization

- **Windha Kusuma Dewi** - *Frontend Developer*

  - Interface development and styling
  - React components management

### Internship Program

This project was completed as part of the **SMK Wikrama Bogor** internship program, demonstrating the students' capabilities in modern web development technologies and collaborative software development practices.

### Acknowledgments

- SMK Wikrama Bogor for providing the opportunity and guidance
- EKS for project mentorship and resources
- The open-source community for the amazing tools and libraries

## License

This project is proprietary and owned by **EKS**. All rights reserved.

### Usage Rights

- This software is developed for internal use and client projects
- Redistribution or commercial use without explicit permission is prohibited
- Educational use within the scope of the internship program is permitted

### Third-Party Licenses

This project uses various open-source libraries and frameworks. Please refer to their respective licenses for usage terms.

## Support & Contact

For technical support, bug reports, or feature requests:

- **Email**: [evoteksdigital@gmail.com](mailto:evoteksdigital@gmail.com)
- **Issue Tracker**: [GitHub Issues](https://github.com/evotekscreative/evooconnect2/issues)
- **Documentation**: This README and API documentation
- **Development Team**: Contact any of the team members listed above

*Built with ❤️ by the SMK Wikrama Bogor development

EvoConnect adalah platform jejaring sosial lengkap dan komprehensif yang dirancang untuk koneksi profesional, pencarian kerja, dan pengembangan karier.

EVOConnect

# 📚 Jurnalku - Sistem Rekap Akademik

> Aplikasi cerdas untuk memantau dan mengelola kompetensi keahlian siswa secara efektif, terstruktur, dan *real-time*.

## 🌟 Tentang Proyek

**Jurnalku** adalah sebuah sistem manajemen akademik komprehensif yang dirancang khusus untuk mendukung proses pembelajaran di **SMK Wikrama Bogor**. Aplikasi ini berfungsi sebagai platform terpusat yang memfasilitasi kolaborasi antara siswa, guru, kepala program (kaprog), dan administrator untuk memantau perkembangan kompetensi keahlian secara efisien dan transparan.

**Visi** dari proyek ini adalah menyatukan upaya untuk kemajuan siswa melalui teknologi yang cerdas dan terintegrasi, menciptakan lingkungan belajar yang lebih terukur dan proaktif. 

## Fitur Utama

- **Dashboard Komprehensif** — Ringkasan untuk setiap peran: Admin, Master Lab, Guru, Siswa.
- **Manajemen Pengguna & Role** — Tambah/edit/hapus user serta otorisasi per‑role. (Lihat controller: App\Http\Controllers\UserController, file: app/Http/Controllers/UserController.php)
- **Portofolio & Sertifikat** — Upload portofolio, link proyek, dan sertifikat digital.
- **Jurnal & Progress Tracking** — Catatan harian, progress per materi, review oleh guru/kaprog.
- **Catatan Sikap** — Sistem pencatatan perilaku & perbaikan (history + status).
- **Import/Export & Seeder Dummy** — Seeder untuk data siswa lengkap (portofolio, CV, dsb.) sebagai contoh data: Database\Seeders\StudentDummyDataSeeder, file: StudentDummyDataSeeder.php.

## Arsitektur & Tech Stack

- Backend: **Laravel 11.x (PHP 8.2+)**
- Frontend: **Blade Templates + Alpine.js**
- Styling: **TailwindCSS**
- Database: **MySQL / SQLite**
- Storage: Local / **AWS S3** (opsional)
- Charting & UI: **ApexCharts**, komponen blade khusus
Referensi arsitektur di README: README.md

## Alur Singkat Penggunaan

1. Admin / Master Lab menambahkan jurusan, rayon, dan akun guru.
2. Siswa mengisi jurnal harian, mengunggah portofolio/sertifikat, dan memantau progress.
3. Guru memvalidasi pengajuan progress dan memberikan catatan sikap.
4. Kaprog memantau ringkasan jurusan dan membagi tugas materi.

## Kenapa Proyek Ini Menarik

- Solusi spesifik untuk kebutuhan SMK: menggabungkan portofolio siswa, jurnal pembiasaan, dan penilaian kompetensi dalam satu platform.
- Mudah diadaptasi untuk institusi lain karena arsitektur modular (models, controllers, views terpisah). Contoh model terkait jurusan: App\Models\Major, file: Major.php.
- Dilengkapi dokumentasi & tooling (migrate, seed, build assets) — lihat README.md.

Aplikasi cerdas untuk memantau dan mengelola kompetensi keahlian siswa secara efektif, terstruktur, dan real-time.

Jurnalku

# 🚗 S4B Rent Car - Sistem Manajemen Rental Mobil

## 📖 Tentang Proyek

**S4B Rent Car** adalah aplikasi web modern untuk manajemen rental mobil yang dikembangkan untuk **PT. Sukses Abadi Bersama**. Sistem ini menyediakan platform lengkap untuk layanan penyewaan kendaraan dengan fitur-fitur canggih yang memudahkan proses pemesanan, pembayaran, dan manajemen armada.

Aplikasi ini dibangun menggunakan **Laravel 11** dengan arsitektur **MVC (Model-View-Controller)** yang clean dan maintainable, dilengkapi dengan **Tailwind CSS** untuk antarmuka yang modern dan responsif. Sistem ini mendukung dua role pengguna (Admin dan Customer) dengan berbagai fitur yang disesuaikan untuk masing-masing peran.

## ✨ Fitur Utama

### 🔐 Sistem Autentikasi & Otorisasi

- **Multi-role Authentication** (Admin & User/Customer)
- **Custom Middleware** untuk role-based access control
- **Session Management** yang aman
- **Password Hashing** dengan bcrypt

### 👤 Fitur Customer

- **Browse & Search** katalog mobil yang tersedia
- **Detail Mobil** lengkap dengan galeri gambar
- **Real-time Booking System** dengan validasi ketersediaan
- **Kalkulasi Otomatis** biaya sewa berdasarkan durasi
- **Opsi Sopir** dengan biaya tambahan (Rp 100.000/hari)
- **Riwayat Pemesanan** dengan dual status tracking
- **Pembatalan Pesanan** dengan restore ketersediaan mobil otomatis
- **Generate PDF Receipt** untuk bukti transaksi
- **Manajemen Profil** pengguna

### 👨‍💼 Fitur Admin

- **Dashboard** dengan statistik dan monitoring
- **Manajemen Armada Mobil**

  - Tambah/Edit/Hapus mobil
  - Upload multiple images
  - Set harga dan spesifikasi
  - Track ketersediaan real-time

- **Manajemen Pemesanan**

  - View all orders dengan filter
  - Update status rental (Pending → Ongoing → Completed)
  - Automatic availability management

- **General Report** untuk monitoring transaksi
- **User Management**

### 🎯 Fitur Sistem Canggih

**Dual Status System**

Sistem pelacakan status ganda untuk tracking yang lebih akurat:

- **Payment Status**: Unpaid → Paid → Cancelled
- **Rental Status**: Pending → Ongoing → Completed → Cancelled

**
Automatic Availability Management**

- Mobil otomatis **unavailable** saat dibooking
- Mobil otomatis **tersedia kembali** saat rental status = completed
- Mobil otomatis **tersedia kembali** saat user cancel pesanan
- Real-time status update di landing page

**
Smart Pricing System**

- Kalkulasi otomatis berdasarkan jumlah hari sewa
- Biaya tambahan sopir otomatis terhitung
- Display breakdown biaya yang jelas
- Format Rupiah yang proper

## 🛠️ Teknologi yang Digunakan

### Backend

- **Laravel 11** - PHP Framework
- **PHP 8.2+** - Programming Language
- **MySQL 8.0** - Database
- **Eloquent ORM** - Database Abstraction
- **Laravel Migration** - Database Version Control
- **Laravel Validation** - Input Validation
- **DomPDF** - PDF Generation

### Frontend

- **Blade Template Engine** - View Rendering
- **Tailwind CSS 3** - Utility-first CSS Framework
- **Vite** - Modern Build Tool
- **Vanilla JavaScript** - Dynamic Interactions
- **Responsive Design** - Mobile-first approach

### Security & Best Practices

- **CSRF Protection**
- **SQL Injection Prevention** (via Eloquent ORM)
- **XSS Protection**
- **Password Hashing** (bcrypt)
- **Middleware Authorization**
- **Input Validation & Sanitization**

## 🎨 Fitur Unggulan

### 1. Real-time Availability System

Sistem ketersediaan mobil yang update secara real-time:

- Landing page hanya menampilkan mobil yang tersedia
- Tombol "Lihat Tawaran" otomatis disable untuk mobil yang sedang disewa
- Visual indicator "Sedang Disewa" untuk mobil yang tidak tersedia

### 2. Smart Rental Flow

Alur pemesanan yang intuitif dan otomatis:

```
User Browse → Select Car → Fill Order Form → 
Calculate Price (auto) → Submit Order → 
Car becomes Unavailable → Payment → 
Admin Update Status (Ongoing) → 
Admin Complete Rental → Car Available Again

```

### 3. Comprehensive Reporting

- Admin dapat melihat semua transaksi di general report
- Filter berdasarkan status pembayaran dan rental
- Update status rental langsung dari dropdown
- Export ke PDF untuk customer

### 4. Responsive Design

- Mobile-first approach
- Smooth animations & transitions
- Modern UI/UX dengan Tailwind CSS
- Optimized untuk semua ukuran layar

## 🔄 Flow Sistem Status

### Payment Status Flow

```
UNPAID (default) → PAID (user bayar) → atau CANCELLED (user cancel)

```

### Rental Status Flow

```
PENDING (default) → ONGOING (admin update) → COMPLETED (admin update)
                  ↓
              CANCELLED (user/admin cancel)

```

### Availability Flow

```
TRUE (tersedia) → FALSE (saat booking) → TRUE (saat completed/cancelled)

```

## 👨‍💻 Developer

**Muhamad Afghan**

- GitHub: [@MuhamadAfghan](https://github.com/MuhamadAfghan)
- LinkedIn: [AfganAlzena](https://www.linkedin.com/in/muhamadafghan/)

fitur manajemen armada mobil, pemesanan online dengan kalkulasi otomatis biaya sewa, sistem pembayaran terintegrasi, serta dashboard admin untuk monitoring transaksi dan laporan general report.

Rental Mobil

Spesifikasi Aplikasi Buku Tamu Undangan

Aplikasi buku tamu undangan ini dilengkapi dengan berbagai fitur yang dirancang untuk memudahkan pengelolaan dan pencarian tamu undangan dalam suatu acara. Berikut adalah fitur-fitur yang tersedia dalam aplikasi ini:

1. ✅ Export PDF: Fitur untuk mengekspor data tamu undangan ke dalam format PDF untuk kebutuhan dokumentasi dan pencetakan.
2. ✅ Pagination: Mengatur tampilan daftar tamu undangan dalam beberapa halaman untuk memudahkan navigasi.
3. ✅ CRUD (Create, Read, Update, Delete): Memungkinkan pengguna untuk menambah, melihat, mengubah, dan menghapus data tamu undangan.
4. ✅ Sorting:

-  Status: Mengurutkan tamu berdasarkan status kehadiran (hadir/tidak hadir). 
- Abjad (A-Z/Z-A): Mengurutkan nama tamu secara alfabetis.
- Ascending/Descending: Mengurutkan data secara naik atau turun berdasarkan tanggal data tamu dibuat.

1. ✅ Search: Mencari tamu undangan berdasarkan nama, email, atau NIS (Nomor Induk Siswa).
2. ✅ Generate QR by NIS: Membuat kode QR unik untuk setiap tamu berdasarkan NIS yang dapat digunakan untuk proses check-in atau validasi kehadiran.
3. ✅ Kirim undangan via email: Fitur untuk mengirimkan undangan elektronik langsung ke email tamu.
4. ✅ Dark/Light Mode: Menyediakan tampilan antarmuka dalam mode gelap dan terang untuk kenyamanan pengguna.

Framework/Package yang Digunakan:

- Laravel 11: Framework PHP yang digunakan sebagai kerangka kerja utama aplikasi.
- Tailwind: Framework CSS untuk desain antarmuka yang responsif dan modern.
- Flowbite: Komponen UI yang dibangun di atas Tailwind CSS untuk mempercepat pengembangan antarmuka.
- Sweet Alert: Library untuk menampilkan pesan pop-up yang menarik dan interaktif.
- Apexchart: Library untuk membuat grafik dan visualisasi data yang interaktif.
- barryvdh/laravel-dompdf: Package Laravel untuk konversi HTML menjadi PDF.
- implesoftwareio/simple-qrcode: Package untuk menghasilkan kode QR dengan mudah.

Web pengelolaan dan pencarian tamu undangan dalam suatu acara

Buku Tamu Undangan Digital Interaktif dengan Absensi QR Code

# Dukung Lokal - Platform Pemetaan dan Pendataan UMKM Indonesia

## Deskripsi Projek

**Dukung Lokal** adalah platform web interaktif yang dirancang untuk memperkenalkan, memetakan, dan mendukung pertumbuhan UMKM (Usaha Mikro, Kecil, dan Menengah) lokal di seluruh Indonesia. Platform ini memungkinkan masyarakat untuk menemukan UMKM di sekitar mereka, memberikan feedback, dan berkontribusi melalui sistem survei yang terstruktur.

### Fitur Utama

- **Peta Interaktif**: Visualisasi UMKM menggunakan Leaflet.js dengan tampilan peta Indonesia yang menampilkan sebaran UMKM per provinsi dengan kode warna berdasarkan kepadatan data
- **Sistem Survei UMKM**: Form komprehensif untuk mendaftarkan UMKM baru dengan validasi data lengkap menggunakan React Hook Form dan Zod
- **Geocoding Integration**: Integrasi dengan OpenCage API untuk konversi koordinat ke alamat yang detail
- **Gamification & Leaderboard**: Sistem poin dan ranking untuk para volunteer yang aktif melakukan survei UMKM
- **Data Visualization**: Pie chart dan tabel interaktif untuk statistik UMKM berdasarkan kategori dan provinsi
- **Sistem Pelaporan**: Fitur untuk melaporkan UMKM yang bermasalah dengan berbagai kategori pelaporan
- **Autentikasi Pengguna**: Sistem login/register yang aman dengan token-based authentication
- **Pengaturan Akun**: Manajemen profil, media sosial, dan daftar UMKM yang telah disurvei
- **Pencarian & Filter**: Pencarian UMKM dengan autosuggestion dan filter berdasarkan kategori
- **Responsive Design**: UI/UX yang optimal di berbagai perangkat

### Tech Stack

**Frontend:**

- Next.js 14 (React Framework)
- TailwindCSS untuk styling
- Shadcn/ui untuk komponen UI
- Leaflet.js untuk peta interaktif
- Recharts untuk visualisasi data
- React Hook Form + Zod untuk validasi form
- Axios untuk HTTP requests
- Zustand untuk state management

**Backend:**

- Laravel (PHP Framework)
- MySQL Database
- RESTful API
- JWT Authentication

### Kategori UMKM yang Didukung

1. Makanan
2. Minuman
3. Pakaian
4. Furnitur
5. Elektronik
6. Jasa & Layanan
7. Kerajinan
8. Pertanian/Perkebunan
9. Bahan Pokok

### Sistem Poin & Ranking

Platform ini menerapkan sistem gamification dengan tiga tingkatan:

- **Heroic Volunteer** 👑 (Rank 1-5)
- **Active Volunteer** 🔥 (Rank 6-15)
- **New Volunteer** 🌟 (Rank 16+)

Setiap survei UMKM yang berhasil diselesaikan memberikan poin kepada pengguna.

## 🏆 Penghargaan

Proyek ini berhasil **meraih Juara 1 Kategori Web Design** pada **Kompetisi Business Olympic Fair (KBOF) Bogor** yang diselenggarakan di **Kampus Institut Bisnis dan Informatika Kesatuan (IBIK)**.

## Objektif Proyek

1. Membantu UMKM lokal mendapatkan visibilitas yang lebih luas
2. Memudahkan masyarakat menemukan produk dan layanan UMKM terdekat
3. Menyediakan data terstruktur tentang sebaran UMKM di Indonesia
4. Mendorong partisipasi masyarakat dalam mendukung ekonomi lokal
5. Memberikan platform bagi UMKM untuk berkembang melalui feedback pelanggan

Platform web interaktif yang dirancang untuk memperkenalkan, memetakan, dan mendukung pertumbuhan UMKM (Usaha Mikro, Kecil, dan Menengah) lokal di seluruh Indonesia.

Dukung Lokal

## Tanya Aghan - AI-Powered Chat Application

**Deskripsi Proyek:**
Tanya Aghan adalah aplikasi web chat interaktif berbasis AI yang dirancang untuk memberikan pengalaman percakapan yang personal dan responsif. Aplikasi ini menghadirkan asisten virtual dengan persona "Muhamad Afghan Alzena," seorang pelajar SMK yang antusias dalam pengembangan web, menciptakan interaksi yang lebih humanis dan relatable.

**Fitur Utama:**

- **AI Conversation Engine:** Menggunakan Groq SDK dengan model gemma2-9b-it untuk menghasilkan respons yang kontekstual dan cerdas, seperti yang diimplementasikan di requestToGroqAI
- **Typewriter Effect:** Efek mengetik yang smooth menggunakan custom hook useTypewriter untuk pengalaman visual yang lebih engaging
- **Syntax Highlighting:** Menampilkan blok kode dengan indah menggunakan react-syntax-highlighter dengan fitur "Salin Kode" untuk kemudahan pengguna
- **Conversation Management:**

  - Fitur reply (handleReply) untuk menjaga konteks percakapan
  - Hapus riwayat chat (handleDelete)
  - History chat yang tersimpan untuk referensi

- **Example Prompts:** Komponen ExamplePrompt yang menyediakan contoh-contoh prompt untuk memandu pengguna baru
- **Responsive Design:** UI yang fully responsive dengan Tailwind CSS dan komponen Flowbite-React
- **Error Handling:** Error boundary implementation di ErrorBoundary untuk menangani kesalahan dengan graceful

**Teknologi yang Digunakan:**

*Frontend:*

- React 18.3 dengan Vite untuk development yang cepat
- Tailwind CSS untuk styling yang modern dan efisien
- Flowbite-React untuk komponen UI yang konsisten

*AI Integration:*

- Groq SDK untuk koneksi ke AI model
- Custom prompt engineering di internalData

*Library Pendukung:*

- react-syntax-highlighter untuk code highlighting
- react-spinners untuk loading indicators
- Custom Typewriter component untuk efek mengetik

**Highlight Teknis:**

- Implementasi custom hooks untuk typewriter effect
- State management yang efisien dengan React Hooks
- Real-time chat history tracking
- Environment variable management untuk API keys
- Responsive textarea dengan auto-resize functionality

Aplikasi chat AI interaktif yang dibangun menggunakan React, memungkinkan pengguna untuk berinteraksi dengan AI melalui antarmuka yang modern dan responsif.

Tanya Aghan

## **Herbal AI - Sistem Rekomendasi Tanaman Obat Tradisional Indonesia Berbasis Kecerdasan Buatan**

### **Latar Belakang**

Indonesia memiliki kekayaan biodiversitas tanaman obat yang luar biasa dengan lebih dari 30,000 spesies tanaman, dimana sekitar 9,600 spesies diantaranya memiliki khasiat obat. Namun, pengetahuan tentang tanaman obat tradisional semakin terkikis seiring dengan perkembangan zaman. Proyek **Herbal AI** hadir sebagai solusi digital untuk melestarikan dan mempermudah akses masyarakat terhadap informasi tanaman obat tradisional Indonesia.

### **Deskripsi Aplikasi**

**Herbal AI** adalah aplikasi web berbasis kecerdasan buatan (AI) yang dikembangkan sebagai tugas Seminar Proposal mahasiswa. Aplikasi ini berfungsi sebagai ensiklopedia digital dan asisten virtual untuk membantu pengguna menemukan solusi pengobatan herbal berdasarkan keluhan kesehatan atau mengidentifikasi tanaman obat dari gambar.

### **Fitur Utama**

1. **Pencarian Berbasis Teks**

- Pengguna dapat memasukkan keluhan/gejala penyakit (contoh: "sakit kepala", "batuk", "insomnia")
- AI akan menganalisis keluhan dan merekomendasikan 2-4 tanaman obat yang paling relevan
- Setiap rekomendasi dilengkapi dengan informasi komprehensif

2. **Pencarian Berbasis Suara (Voice Search)**

- Fitur input suara menggunakan Web Speech API
- Mendukung bahasa Indonesia
- Memudahkan pengguna yang tidak sempat mengetik

3. **Identifikasi Tanaman Melalui Gambar**

- Pengguna dapat mengunggah foto tanaman
- AI akan mengidentifikasi jenis tanaman dan memberikan informasi lengkap
- Menggunakan teknologi Computer Vision dari Google Gemini AI

4. **Informasi Detail Tanaman Obat**

Setiap tanaman obat ditampilkan dengan informasi:

- Nama Indonesia dan nama ilmiah (scientific name)
- Deskripsi lengkap tentang tanaman dan khasiatnya
- Cara penggunaan yang detail dan praktis
- Dosis yang direkomendasikan
- Penyakit/gejala yang dapat diobati
- Peringatan dan kontraindikasi
- Gambar tanaman (jika tersedia)

5. **Quick Access - Gejala Umum**

- Tombol cepat untuk 10 keluhan kesehatan yang paling umum
- Mempercepat proses pencarian tanpa perlu mengetik

### **Teknologi yang Digunakan**

**Frontend**

- **Next.js 15.2.4** - React Framework untuk production
- **React 19** - Library JavaScript untuk UI
- **Tailwind CSS** - Utility-first CSS framework
- **Radix UI** - Komponen UI yang accessible
- **Lucide React** - Icon library
- **shadcn/ui** - Komponen UI yang reusable

**Backend/API**

- **Next.js API Routes** - Serverless API endpoints
- **Google Gemini 1.5 Flash API** - Large Language Model untuk AI
- **Web Speech API** - Speech recognition untuk voice input

**Deployment**

- Dioptimalkan untuk deployment di **Vercel** atau **Azure Static Web Apps**
- Environment variables untuk keamanan API key 

### **Alur Kerja Aplikasi**

1. **Input dari Pengguna**

  - Teks (ketik manual)
  - Suara (voice recognition)
  - Gambar (upload file)

2. **Pemrosesan di Backend**

  - API menerima request (FormData untuk gambar, JSON untuk teks)
  - Menyiapkan prompt yang sesuai untuk Gemini AI
  - Mengirim request ke Gemini API dengan context bahasa Indonesia

3. **Response dari AI**

  - AI menganalisis query/gambar
  - Menghasilkan rekomendasi tanaman obat dalam format JSON
  - Atau memberikan respons text jika tidak dapat memberikan rekomendasi

4. **Tampilan Hasil**

  - Card untuk setiap tanaman obat
  - Informasi lengkap dan terstruktur
  - UI yang responsif dan user-friendly

### **Keunggulan Aplikasi**

1. **Berbasis AI Modern** - Menggunakan Google Gemini AI yang canggih
2. **Fokus Indonesia** - Khusus untuk tanaman obat tradisional Indonesia
3. **Multimodal Input** - Mendukung teks, suara, dan gambar
4. **User-Friendly** - Antarmuka yang intuitif dan mudah digunakan
5. **Informasi Lengkap** - Data komprehensif untuk setiap tanaman
6. **Responsive Design** - Dapat diakses dari berbagai perangkat
7. **Fast & Efficient** - Menggunakan Next.js untuk performa optimal

### **Target Pengguna**

- Masyarakat umum yang tertarik dengan pengobatan herbal
- Praktisi pengobatan tradisional
- Mahasiswa/peneliti di bidang farmasi dan herbal
- Pecinta tanaman dan alam
- Siapa saja yang ingin belajar tentang tanaman obat Indonesia

### **Manfaat Proyek**

1. **Edukasi** - Meningkatkan pengetahuan masyarakat tentang tanaman obat
2. **Pelestarian** - Melestarikan pengetahuan tradisional dalam format digital
3. **Aksesibilitas** - Memudahkan akses informasi tanaman obat 24/7
4. **Inovasi** - Menggabungkan kearifan lokal dengan teknologi AI modern
5. **Kesehatan** - Memberikan alternatif pengobatan alami yang aman

### **Catatan Penting**

⚠️ **Disclaimer**: Aplikasi ini dikembangkan untuk tujuan edukatif sebagai bagian dari tugas akademik Seminar Proposal mahasiswa. Informasi yang diberikan oleh AI harus digunakan sebagai referensi awal dan bukan pengganti konsultasi medis profesional. Selalu konsultasikan dengan dokter atau ahli kesehatan sebelum menggunakan pengobatan herbal.

### **Pengembangan Selanjutnya (Future Improvements)**

- Database tanaman obat lokal yang lebih lengkap
- Fitur bookmark/favorit tanaman
- Riwayat pencarian pengguna
- Komunitas dan forum diskusi
- Integrasi dengan peta lokasi tanaman obat
- Aplikasi mobile (iOS/Android)
- Multi-bahasa (Inggris, daerah)
- Verifikasi oleh ahli herbal

### **Kesimpulan**

**Herbal AI** merupakan inovasi digital yang menggabungkan teknologi kecerdasan buatan dengan kearifan lokal pengobatan tradisional Indonesia. Sebagai proyek Seminar Proposal, aplikasi ini menunjukkan potensi teknologi dalam melestarikan budaya dan meningkatkan aksesibilitas informasi kesehatan berbasis herbal kepada masyarakat luas.

Meningkatkan aksesibilitas dan akurasi identifikasi tanaman obat melalui teknologi AI Speech-to-Text. Cukup bicara, dan temukan solusi herbal untuk kesehatan Anda.

Afgan

Projects

Loading...