# 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

# Sea Leader Marine - Project Info

## Deskripsi

**Sea Leader Marine** adalah platform web komersial untuk kebutuhan branding, informasi destinasi/fleet, dan sistem booking kapal wisata. Aplikasi ini mencakup **public website**, **autentikasi + verifikasi email**, **dashboard bertingkat (User/Admin/Super Admin)**, **CMS**, **referral**, **payment integration**, dan **reporting (termasuk export CSV)**.

## Arsitektur

- **Frontend (Nuxt.js 3)**: UI public pages, booking flow, dashboard, CMS panel.
- **Backend (Node.js + Elysia + TypeScript)**: REST API, business logic, auth, payment webhook, reporting.
- **Database (PostgreSQL + Prisma ORM)**: model data terstruktur untuk users, admins, bookings, payments, referral, dan logs.
- **Email Service (Nodemailer)**: verifikasi akun dan email transaksional booking.

## Stack / Teknologi

### Frontend

- Nuxt.js 3 (Vue 3 + Nitro)
- TypeScript
- Tailwind CSS
- Chart Library (multi-series bar/line/pie untuk dashboard)

### Backend

- Node.js
- Elysia (HTTP framework)
- TypeScript
- Prisma ORM + @prisma/client
- PostgreSQL (Supabase/managed Postgres compatible)
- JWT (access token + refresh token flow)
- Nodemailer (email verification / transactional email)
- export-to-csv (report export)

### DevOps & Tools

- npm scripts
- tsx (dev/test runtime)
- Vercel (deployment target)
- Postman collection untuk API testing

## Modul Utama

- **Public Website**: Homepage, Destinations, Fleet, About.
- **Authentication**: Register, Login, Email Verification, Refresh Token, Logout.
- **Booking System**: Regular & Private booking flow, capacity validation, pricing & referral calculation.
- **Payment**: payment endpoint + webhook handling + payment status update.
- **Dashboard**:

  - User: upcoming/past trips, ticket access.
  - Admin: stats revenue/bookings/passengers, recent bookings, CMS access.
  - Super Admin: advanced analytics + access management.

- **CMS**: CRUD destinations, fleet, content, referral code.
- **Reports**: CSV export untuk booking/payment/referral logs.
- **Admin Logging**: audit trail untuk aksi admin.

## Struktur Data (High-Level)

- users
- admins (role: ADMIN, SUPER_ADMIN)
- destinations
- fleet / boats
- bookings
- payments
- referral_codes
- referral_usages
- admin_logs

## Menjalankan Proyek (Backend)

```
npm install
npm run db:generate
npm run db:push
npm run db:seed
npm run dev

```

## Menjalankan Proyek (Frontend Nuxt)

```
npm install
npm run dev

```

Platform web komersial untuk kebutuhan branding, informasi destinasi/fleet, dan sistem booking kapal wisata.

Sea Leader

## Kontribusi Saya di Proyek SintCarolus

Proyek ini adalah website resmi STIK Sint Carolus. Fokus kontribusi saya adalah **meningkatkan performa website** yang sebelumnya lambat agar jadi lebih cepat dan nyaman diakses, terutama di mobile.

## Yang Saya Kerjakan

-   **Optimasi gambar secara menyeluruh**  
    Menggunakan Nuxt Image agar gambar lebih ringan, otomatis punya ukuran yang tepat, dan cepat dimuat.
    
-   **Perbaikan LCP (Largest Contentful Paint)**  
    Mengutamakan elemen hero agar tampil lebih cepat dengan ukuran file lebih kecil, prioritas loading yang tepat, dan format gambar modern.
    
-   **Perbaikan CLS (Layout Shift)**  
    Menambahkan ukuran eksplisit pada gambar supaya layout tidak “geser” saat loading.
    
-   **Fallback gambar yang lebih aman**  
    Jika optimasi gambar gagal, gambar tetap tampil tanpa error (fallback ke `<img>`).
    
-   **Optimasi ukuran dan `sizes` pada responsive image**  
    Menyesuaikan ukuran srcset agar gambar di mobile tidak kebesaran.
    
-   **Perbaikan aksesibilitas**  
    Menambahkan label dan atribut ARIA pada tombol penting agar lebih ramah screen reader.
    

## Dampak Hasil

Hasilnya, website menjadi:

-   **Lebih cepat di-load**
-   **Lebih stabil saat tampil** (tidak loncat‑loncat)
-   **Lebih ringan di mobile**
-   **Lebih nyaman diakses pengguna**

Ini adalah bagian utama kontribusi saya yang ingin saya tampilkan di portfolio.  
  
  
Hasil analitik terbaru:  
[https://cruxvis.withgoogle.com/#/?view=loadingperf&url=https%3A%2F%2Fwww.stik-sintcarolus.ac.id%2F&identifier=url&device=ALL&periodStart=0&periodEnd=-1&display=p75s](https://cruxvis.withgoogle.com/#/?view=loadingperf&url=https%3A%2F%2Fwww.stik-sintcarolus.ac.id%2F&identifier=url&device=ALL&periodStart=0&periodEnd=-1&display=p75s)

Portal resmi STIK Sint Carolus untuk publik. Menampilkan informasi kampus secara jelas dan mudah diakses, sekaligus menjadi etalase profil institusi.

STIK SINT CAROLUS

# 🏥 **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

# 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

# 🎭 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

# 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

## **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.

Tanaman Obat Integrate Gemini AI

## 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

# 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

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

# 🚗 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.

Afgan

Projects

Loading...