init project portal web

README.md

@@ -1,2 +1,121 @@
-# ocs-portal-web
+# Project Next.js 14 dengan Zustand, React Query (TanStack), dan ShadCN
 
+## 📌 Pendahuluan
+Proyek ini menggunakan **Next.js 14** sebagai kerangka kerja utama, dengan **Zustand** untuk manajemen state, **React Query (TanStack)** untuk pengelolaan data asinkron, dan **ShadCN** untuk komponen UI yang modern dan fleksibel.
+
+## 🛠️ Teknologi yang Digunakan
+- [Next.js 14](https://nextjs.org/) - Framework React untuk aplikasi web modern.
+- [Zustand](https://zustand-demo.pmnd.rs/) - Manajemen state yang ringan dan fleksibel.
+- [React Query (TanStack)](https://tanstack.com/query/latest) - Manajemen data server-side yang efisien.
+- [ShadCN](https://ui.shadcn.com/) - Komponen UI berbasis Radix dan Tailwind CSS.
+
+## 🚀 Instalasi
+Pastikan Anda sudah menginstal **Node.js** dan **pnpm/npm/yarn** sebelum memulai.
+
+1. Clone repositori ini:
+   ```sh
+   git clone https://github.com/username/repository.git
+   cd repository
+   ```
+
+2. Install dependensi:
+   ```sh
+   pnpm install  # atau npm install / yarn install
+   ```
+
+3. Jalankan proyek dalam mode pengembangan:
+   ```sh
+   pnpm dev  # atau npm run dev / yarn dev
+   ```
+
+4. Buka browser dan akses **http://localhost:3000**.
+
+## 🏗️ Penggunaan
+### Manajemen State dengan Zustand
+Buat file di `store/useExampleStore.ts`:
+```ts
+import { create } from 'zustand';
+
+type ExampleState = {
+  count: number;
+  increment: () => void;
+};
+
+export const useExampleStore = create<ExampleState>((set) => ({
+  count: 0,
+  increment: () => set((state) => ({ count: state.count + 1 })),
+}));
+```
+Penggunaan dalam komponen:
+```tsx
+import { useExampleStore } from '@/store/useExampleStore';
+
+export default function Counter() {
+  const { count, increment } = useExampleStore();
+  return (
+    <div>
+      <p>Count: {count}</p>
+      <button onClick={increment} className="btn">Tambah</button>
+    </div>
+  );
+}
+```
+
+### Fetching Data dengan React Query (TanStack)
+Buat file di `lib/api.ts`:
+```ts
+export const fetchData = async () => {
+  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
+  if (!res.ok) throw new Error('Gagal mengambil data');
+  return res.json();
+};
+```
+Penggunaan dalam komponen:
+```tsx
+import { useQuery } from '@tanstack/react-query';
+import { fetchData } from '@/lib/api';
+
+export default function DataList() {
+  const { data, error, isLoading } = useQuery({ queryKey: ['posts'], queryFn: fetchData });
+
+  if (isLoading) return <p>Loading...</p>;
+  if (error) return <p>Error: {error.message}</p>;
+
+  return (
+    <ul>
+      {data.map((post) => (
+        <li key={post.id}>{post.title}</li>
+      ))}
+    </ul>
+  );
+}
+```
+
+### Menggunakan Komponen UI dari ShadCN
+Pastikan telah menginstal ShadCN:
+```sh
+pnpm dlx shadcn-ui@latest init
+```
+Contoh penggunaan tombol:
+```tsx
+import { Button } from '@/components/ui/button';
+
+export default function ExampleButton() {
+  return <Button variant="outline">Klik Saya</Button>;
+}
+```
+
+## ✅ TODO
+- [x] Setup Next.js 14
+- [x] Integrasi Zustand untuk state management
+- [x] Implementasi React Query (TanStack) untuk fetching data
+- [x] Konfigurasi ShadCN untuk komponen UI
+- [ ] Tambahkan autentikasi dengan NextAuth
+- [ ] Implementasi dark mode
+
+## 📜 Lisensi
+Proyek ini dilisensikan di bawah [MIT License](LICENSE).
+
+---
+
+Selamat ngoding! 🚀