sulthan/internify-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
aa3e8e656602cbb324b492b8f6009e9bc8e2fb92
internify-fe/README.md
T
Billy Marcello aa3e8e6566 updated README.md
2026-01-18 15:09:36 +07:00

450 lines
14 KiB
Markdown
Raw Blame History

# Internify - Sistem Manajemen Magang Humic Engineering
Platform web untuk mengelola program magang, lowongan kerja, produk research, partnership, FAQ, dan feedback untuk Humic Engineering. Aplikasi ini menyediakan antarmuka yang user-friendly untuk calon magang dan dashboard administrasi yang lengkap untuk mengelola semua aspek program magang.
## 📋 Daftar Isi
- [Tentang Proyek](#tentang-proyek)
- [Fitur-Fitur](#fitur-fitur)
- [Teknologi yang Digunakan](#teknologi-yang-digunakan)
- [Prasyarat](#prasyarat)
- [Instalasi](#instalasi)
- [Konfigurasi](#konfigurasi)
- [Struktur Proyek](#struktur-proyek)
- [Scripts yang Tersedia](#scripts-yang-tersedia)
- [Halaman dan Routing](#halaman-dan-routing)
- [Authentication](#authentication)
- [Deployment](#deployment)
- [Kontribusi](#kontribusi)
## 🎯 Tentang Proyek
**Internify** adalah sistem manajemen magang yang dikembangkan untuk Humic Engineering. Aplikasi ini memungkinkan:
- **Calon Magang**: Mencari dan mendaftar ke lowongan magang yang tersedia, melihat detail produk research, dan mengirim feedback
- **Administrator**: Mengelola semua aspek program magang termasuk lowongan, pendaftaran, produk research, partnership, FAQ, dan feedback melalui dashboard yang komprehensif
Aplikasi ini dibangun dengan teknologi modern untuk memberikan pengalaman pengguna yang optimal dan performa yang tinggi.
## ✨ Fitur-Fitur
### Fitur untuk Pengguna Umum
- **Landing Page**: Halaman utama dengan informasi tentang program magang, testimoni, dan FAQ
- **Browse Internships**: Pencarian dan penelusuran lowongan magang yang tersedia
- **Internship Details**: Detail lengkap setiap lowongan magang
- **Registration**: Pendaftaran magang dengan validasi reCAPTCHA
- **Product Research**: Lihat produk research dan detailnya
- **About Us**: Informasi tentang perusahaan dan partnership
- **Our Developer**: Halaman tentang tim developer
- **FAQ**: Frequently Asked Questions
- **Feedback**: Testimoni dari magang sebelumnya
### Fitur untuk Administrator
- **Dashboard**: Statistik lengkap dengan visualisasi data menggunakan chart:
- Total pendaftar, diterima, ditolak, dan sedang diproses
- Statistik berdasarkan posisi
- Statistik berdasarkan universitas
- Statistik berdasarkan negara
- Grafik penerimaan
- **Manajemen Lowongan**:
- Daftar semua lowongan
- Tambah lowongan baru
- Edit lowongan
- Hapus lowongan
- **Manajemen Pendaftaran**:
- Daftar semua pendaftar
- Detail pendaftar
- Update status pendaftaran (diterima/ditolak/diproses)
- Export data pendaftar
- **Manajemen Produk Research**:
- Daftar produk research
- Tambah produk baru
- Edit produk
- Hapus produk
- **Manajemen Partnership**:
- Daftar partnership
- Tambah partnership baru
- Edit partnership
- Hapus partnership
- **Manajemen FAQ**:
- Daftar FAQ
- Tambah FAQ baru
- Edit FAQ
- Hapus FAQ
- **Manajemen Feedback**:
- Daftar feedback
- Tambah feedback baru
- Edit feedback
- Hapus feedback
- **Manajemen Konten**: Edit konten aktif
## 🛠 Teknologi yang Digunakan
### Frontend Framework & Tools
- **React 18.2.0**: Library JavaScript untuk membangun user interface
- **TypeScript 5.9.3**: Superset JavaScript dengan static typing
- **Vite 6.3.5**: Build tool dan development server yang cepat
### Styling
- **Tailwind CSS 4.1.6**: Utility-first CSS framework untuk styling yang cepat
### Routing
- **React Router DOM 7.6.0**: Routing library untuk navigasi halaman
### Data Visualization
- **Recharts 3.4.1**: Library untuk membuat chart dan visualisasi data
### Rich Text Editor
- **Froala Editor 4.5.2**: WYSIWYG editor untuk konten yang kaya
- **TipTap 2.23.0**: Editor teks modern dan extensible
### HTTP Client
- **Axios 1.10.0**: HTTP client untuk melakukan request ke API
### Security
- **React Google reCAPTCHA 3.1.0**: Integrasi Google reCAPTCHA untuk validasi form
### Icons
- **Lucide React 0.553.0**: Icon library yang modern dan ringan
- **React Icons 5.5.0**: Popular icon library untuk React
### Development Tools
- **ESLint**: Linting tool untuk menjaga kualitas kode
- **TypeScript ESLint**: ESLint rules untuk TypeScript
## 📦 Prasyarat
Sebelum memulai, pastikan Anda telah menginstall:
- **Node.js** (versi 18 atau lebih tinggi)
- **npm** (versi 9 atau lebih tinggi) atau **yarn**
- Akses ke backend API Internify
- Google reCAPTCHA Site Key (untuk fitur pendaftaran)
## 🚀 Instalasi
1. **Clone repository**
```bash
git clone <repository-url>
cd Internify_Project
```
2. **Install dependencies**
```bash
npm install
```
3. **Setup environment variables**
Buat file `.env` di root directory dengan konten berikut:
```env
VITE_API_BASE_URL=https://internify-ruddy.vercel.app
VITE_RECAPTCHA_SITE_KEY=your-recaptcha-site-key
```
**Catatan**: Ganti `your-recaptcha-site-key` dengan Google reCAPTCHA Site Key Anda.
4. **Jalankan development server**
```bash
npm run dev
```
5. **Buka browser**
Aplikasi akan berjalan di `http://localhost:5173` (atau port yang ditampilkan di terminal)
## ⚙️ Konfigurasi
### Environment Variables
Aplikasi menggunakan environment variables berikut:
| Variable | Deskripsi | Default | Wajib |
|----------|-----------|---------|-------|
| `VITE_API_BASE_URL` | URL base untuk backend API | `https://internify-ruddy.vercel.app` | Ya |
| `VITE_RECAPTCHA_SITE_KEY` | Google reCAPTCHA Site Key | - | Ya (untuk pendaftaran) |
### Backend API
Aplikasi ini memerlukan backend API yang menyediakan endpoint berikut:
- **Authentication API**: `/auth-api/login`, `/auth-api/me`
- **Lowongan API**: `/lowongan-magang-api/*`
- **Lamaran API**: `/lamaran-magang-api/*`
- **Research API**: `/hasil-research-api/*`
- **Partnership API**: `/partnership-api/*`
- **FAQ API**: `/faq-api/*`
- **Feedback API**: `/feedback-api/*`
- **Batch API**: `/batch-api`
Pastikan backend API sudah berjalan dan dapat diakses sebelum menggunakan aplikasi.
## 📁 Struktur Proyek
```
Internify_Project/
├── public/ # Static assets
│ ├── fonts/ # Font files
│ └── vite.svg
├── src/
│ ├── assets/ # Image assets
│ ├── Layout/ # Layout components
│ │ ├── Faq.tsx
│ │ ├── Footer.tsx
│ │ ├── Navbar.tsx
│ │ ├── NavbarAdmin.tsx
│ │ └── SidebarAdmin.tsx
│ ├── Pages/ # Page components
│ │ ├── utils/
│ │ │ └── PrivateRoute.tsx
│ │ ├── AboutUs.tsx
│ │ ├── AddFAQ.tsx
│ │ ├── AddFeedback.tsx
│ │ ├── AddPartnershipAdmin.tsx
│ │ ├── AddProduct.tsx
│ │ ├── AddProductHumic.tsx
│ │ ├── Dashboard.tsx
│ │ ├── DetailsProduct.tsx
│ │ ├── EditFAQ.tsx
│ │ ├── EditFeedback.tsx
│ │ ├── EditKontenAdmin.tsx
│ │ ├── EditLowongan.tsx
│ │ ├── EditPartnerships.tsx
│ │ ├── EditProductHumic.tsx
│ │ ├── InternshipDetails.tsx
│ │ ├── InternshipDetailsAdmin.tsx
│ │ ├── InternshipList.tsx
│ │ ├── Internships.tsx
│ │ ├── Landing.tsx
│ │ ├── ListFaq.tsx
│ │ ├── ListFeedback.tsx
│ │ ├── ListLowongan.tsx
│ │ ├── ListProduct.tsx
│ │ ├── LoginAdmin.tsx
│ │ ├── OurDeveloper.tsx
│ │ ├── PartnershipsList.tsx
│ │ ├── RegisterDone.tsx
│ │ └── RegisterInternships.tsx
│ ├── types/ # TypeScript type definitions
│ ├── App.tsx # Main App component dengan routing
│ ├── main.tsx # Entry point
│ └── index.css # Global styles
├── dist/ # Build output
├── .env # Environment variables (buat sendiri)
├── eslint.config.js # ESLint configuration
├── package.json # Dependencies dan scripts
├── tsconfig.json # TypeScript configuration
├── tsconfig.app.json # TypeScript config untuk app
├── tsconfig.node.json # TypeScript config untuk node
├── vercel.json # Vercel deployment configuration
└── vite.config.ts # Vite configuration
```
### Organisasi Komponen
- **Layout/**: Komponen layout yang digunakan di berbagai halaman (Navbar, Footer, Sidebar, dll)
- **Pages/**: Komponen halaman utama aplikasi
- **Pages/utils/**: Utility components seperti PrivateRoute untuk proteksi route
- **assets/**: File gambar dan asset lainnya
- **types/**: Type definitions untuk TypeScript
## 📜 Scripts yang Tersedia
### Development
```bash
npm run dev
```
Menjalankan development server dengan hot module replacement (HMR).
### Build
```bash
npm run build
```
Membangun aplikasi untuk production. Output akan berada di folder `dist/`.
### Lint
```bash
npm run lint
```
Menjalankan ESLint untuk mengecek kualitas kode.
### Preview
```bash
npm run preview
```
Preview production build secara lokal sebelum deploy.
## 🗺 Halaman dan Routing
### Public Routes (Tidak Memerlukan Authentication)
| Route | Komponen | Deskripsi |
|-------|----------|-----------|
| `/` | `Landing` | Halaman utama dengan informasi program magang |
| `/about-us` | `AboutUs` | Halaman tentang perusahaan, produk research, dan partnership |
| `/internships` | `Internships` | Daftar semua lowongan magang yang tersedia |
| `/details/:id` | `InternshipDetails` | Detail lengkap lowongan magang |
| `/register-intern/:id` | `RegisterInternships` | Form pendaftaran magang |
| `/register-done` | `RegisterDone` | Halaman konfirmasi setelah pendaftaran |
| `/our-developer` | `OurDeveloper` | Halaman tentang tim developer |
| `/details-product/:id` | `DetailsProduct` | Detail produk research |
| `/humic-20242025-2` | `LoginAdmin` | Halaman login admin |
### Protected Routes (Memerlukan Authentication)
Semua route di bawah ini dilindungi oleh `PrivateRoute` dan memerlukan token authentication:
| Route | Komponen | Deskripsi |
|-------|----------|-----------|
| `/dashboard` | `Dashboard` | Dashboard admin dengan statistik dan chart |
| `/internships-list` | `InternshipList` | Daftar semua pendaftar magang |
| `/internships-details-admin/:id` | `InternshipDetailsAdmin` | Detail pendaftar untuk admin |
| `/lowongan-list` | `ListLowongan` | Daftar semua lowongan |
| `/edit-lowongan/:id` | `EditLowongan` | Edit lowongan |
| `/add-product-admin` | `AddProduct` | Tambah lowongan baru |
| `/product-list` | `ListProduct` | Daftar produk research |
| `/add-product-humic` | `AddProductHumic` | Tambah produk research baru |
| `/edit-product-humic/:id` | `EditProductHumic` | Edit produk research |
| `/partnership-admin` | `PartnershipsList` | Daftar partnership |
| `/add-partnership` | `AddPartnershipAdmin` | Tambah partnership baru |
| `/edit-partnership/:id` | `EditPartnerships` | Edit partnership |
| `/faq-list` | `ListFaq` | Daftar FAQ |
| `/add-faq` | `AddFaq` | Tambah FAQ baru |
| `/edit-faq/:id` | `EditFaq` | Edit FAQ |
| `/feedback-list` | `ListFeedback` | Daftar feedback |
| `/add-feedback` | `AddFeedback` | Tambah feedback baru |
| `/edit-feedback/:id` | `EditFeedback` | Edit feedback |
| `/kontent-aktif/edit/:id` | `EditKontenAdmin` | Edit konten aktif |
## 🔐 Authentication
Aplikasi menggunakan sistem autentikasi berbasis **token** yang disimpan dalam **cookie**.
### Flow Authentication
1. **Login**: Admin login melalui `/humic-20242025-2`
2. **Token Storage**: Token disimpan dalam cookie dengan nama `token`
3. **Protected Routes**: `PrivateRoute` component memeriksa keberadaan token
4. **API Requests**: Token dikirim sebagai Bearer token di header Authorization
5. **Logout**: Token dihapus dari cookie
### PrivateRoute Component
Komponen `PrivateRoute` bertugas:
- Memeriksa keberadaan token di cookie
- Redirect ke halaman login jika token tidak ada
- Render child routes jika token valid
### Token Management
Token diambil dari cookie menggunakan:
```typescript
document.cookie
.split("; ")
.find((row) => row.startsWith("token="))
?.split("=")[1];
```
Token dikirim ke API melalui header:
```typescript
headers: {
Authorization: `Bearer ${token}`
}
```
## 🚢 Deployment
### Vercel Deployment
Aplikasi ini dikonfigurasi untuk deployment di Vercel. File `vercel.json` sudah disiapkan dengan konfigurasi SPA routing.
#### Langkah-langkah Deployment:
1. **Install Vercel CLI** (opsional)
```bash
npm i -g vercel
```
2. **Deploy ke Vercel**
```bash
vercel
```
Atau hubungkan repository ke Vercel melalui dashboard.
3. **Setup Environment Variables di Vercel**
Di dashboard Vercel, tambahkan environment variables:
- `VITE_API_BASE_URL`: URL backend API
- `VITE_RECAPTCHA_SITE_KEY`: Google reCAPTCHA Site Key
4. **Build Configuration**
Vercel akan otomatis mendeteksi:
- Build Command: `npm run build`
- Output Directory: `dist`
- Install Command: `npm install`
### Konfigurasi Vercel
File `vercel.json` berisi konfigurasi untuk SPA routing:
```json
{
"rewrites": [
{
"source": "/(.*)",
"destination": "/index.html"
}
]
}
```
Ini memastikan semua route di-handle oleh React Router.
### Environment Variables untuk Production
Pastikan semua environment variables sudah di-set di Vercel dashboard:
- `VITE_API_BASE_URL`
- `VITE_RECAPTCHA_SITE_KEY`
## 🤝 Kontribusi
Kontribusi sangat diterima! Untuk berkontribusi:
1. Fork repository
2. Buat feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit perubahan Anda (`git commit -m 'Add some AmazingFeature'`)
4. Push ke branch (`git push origin feature/AmazingFeature`)
5. Buka Pull Request
### Guidelines
- Ikuti coding style yang sudah ada
- Pastikan semua test pass
- Update dokumentasi jika diperlukan
- Commit message yang jelas dan deskriptif
## 📝 Catatan Tambahan
- Aplikasi ini adalah frontend-only, memerlukan backend API yang terpisah
- Pastikan backend API sudah berjalan sebelum menggunakan aplikasi
- Google reCAPTCHA diperlukan untuk fitur pendaftaran magang
- Semua gambar dan asset disimpan di backend, frontend hanya menampilkan
## 📄 Lisensi
Proyek ini adalah proyek internal untuk Humic Engineering.
---
**Dikembangkan dengan ❤️ untuk Humic Engineering**
Reference in New Issue View Git Blame Copy Permalink