Sistem Absensi Frontend - React + Redux + Tailwind CSS

Frontend untuk sistem absensi menggunakan React, Redux Toolkit, Tailwind CSS, dan Vite.

Dibuat oleh: Gufron Ardi Nugroho
Email: [email protected]
GitHub: https://github.com/gufarnurcolcomx

---

Teknologi yang Digunakan

Dependencies:

• React (^19.1.0) - Library utama UI
• React DOM (^19.1.0) - Untuk merender ke DOM
• React Redux (^9.2.0) - Integrasi React + Redux
• @reduxjs/toolkit (^2.8.2) - State management
• Axios (^1.10.0) - HTTP client untuk request API Laravel
• React Router DOM (^7.7.0) - Routing antar halaman
• Date-fns (^4.1.0) - Manipulasi tanggal
• Framer Motion (^12.23.6) - Animasi UI
• Lucide React (^0.525.0) - Ikon berbasis SVG (opsional)

Dev Dependencies:

• Vite (^7.0.4) - Development bundler cepat
• Tailwind CSS (^3.4.17) - Utility-first CSS framework
• PostCSS (^8.5.6) - Untuk Tailwind dan CSS transform
• Autoprefixer (^10.4.21) - Tambah prefix otomatis ke CSS
• @vitejs/plugin-react (^4.6.0) - Plugin Vite untuk React
• ESLint (^9.30.1) - Linter untuk menjaga kualitas kode
• @eslint/js (^9.30.1) - Konfigurasi ESLint
• eslint-plugin-react-hooks (^5.2.0) - Validasi hook
• eslint-plugin-react-refresh (^0.4.20) - Untuk hot reload saat dev
• Globals (^16.3.0) - Kumpulan variabel global
• @types/react (^19.1.8) - TypeScript support (jika dibutuhkan)
• @types/react-dom (^19.1.6) - TypeScript support untuk React DOM

---

Instalasi

1. Clone Repository git clone https://github.com/gufarnurcolcomx/sistem-absensi-frontend.git cd sistem-absensi-frontend

2. Install Semua Dependensi npm install

3. Jalankan Aplikasi npm run dev Konfigurasi Tailwind CSS (sudah termasuk) File tailwind.config.js /** @type {import('tailwindcss').Config} / export default { content: [ "./index.html", "./src/**/.{js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [], } File src/index.css @tailwind base; @tailwind components; @tailwind utilities;

4. Struktur Folder src/ ├── api/ # Axios instance & API handler ├── components/ # Komponen UI ├── pages/ # Halaman aplikasi ├── redux/ # State management (Redux) ├── router/ # Routing aplikasi ├── utils/ # Fungsi utilitas/helper ├── App.jsx # Root komponen └── index.css # Global style

5. Pengaturan Lingkungan Buat file .env di root proyek frontend: VITE_API_URL=http://localhost:8000