feat: bootstrap TitipIn application with fullstack architecture, Prisma ORM, and shadcn/ui components
This commit is contained in:
@@ -1,36 +1,63 @@
|
||||
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
||||
# TitipIn - Sistem Titip Pesanan
|
||||
|
||||
## Getting Started
|
||||
Aplikasi web modern berbasis Next.js untuk mempermudah sistem "jasa titip" (jastip) atau pesanan bersama. Aplikasi ini berjalan dengan arsitektur serverless (Server Actions) dan menggunakan sistem autentikasi stateless (berbasis UUID di LocalStorage).
|
||||
|
||||
First, run the development server:
|
||||
## Kebutuhan Sistem (Prerequisites)
|
||||
Sebelum menjalankan aplikasi ini, pastikan Anda telah menginstal perangkat lunak berikut:
|
||||
- **Node.js**: Versi 18.x atau lebih baru (direkomendasikan versi LTS terbaru).
|
||||
- **npm**: (biasanya sudah termasuk saat instalasi Node.js).
|
||||
- **PostgreSQL**: Database server berjalan (versi 13 atau lebih baru direkomendasikan).
|
||||
|
||||
## Instalasi
|
||||
1. Lakukan _clone_ repositori ini atau pastikan Anda berada di root folder aplikasi.
|
||||
2. Buka terminal/command prompt.
|
||||
3. Jalankan perintah instalasi dependensi:
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
*Catatan: Pastikan dependensi Prisma terinstal pada versi stabil (contoh: `@prisma/client@5`).*
|
||||
|
||||
## Pengaturan Environment
|
||||
Buat sebuah file bernama `.env` di root folder proyek Anda. Konfigurasi kredensial database PostgreSQL Anda seperti format berikut:
|
||||
|
||||
```env
|
||||
DATABASE_HOST="172.10.10.2"
|
||||
DATABASE_PORT="5411"
|
||||
DATABASE_USER="postgres"
|
||||
DATABASE_PASSWORD="eigen3m!"
|
||||
DATABASE_NAME="testing"
|
||||
DATABASE_URL="postgresql://${DATABASE_USER}:${DATABASE_PASSWORD}@${DATABASE_HOST}:${DATABASE_PORT}/${DATABASE_NAME}?schema=public"
|
||||
```
|
||||
*(Sesuaikan IP, port, dan kredensial lain jika server database Anda berbeda).*
|
||||
|
||||
## Eksekusi Migrasi Database
|
||||
Aplikasi menggunakan **Prisma ORM** untuk berinteraksi dengan database. Jalankan perintah terminal berikut secara berurutan untuk menyinkronkan skema dan mengaktifkan client:
|
||||
|
||||
1. **Generate Prisma Client**: Membangun tipe TypeScript dan library client.
|
||||
```bash
|
||||
npx prisma generate
|
||||
```
|
||||
2. **Push Skema ke Database**: Membuat struktur tabel-tabel di database (User, Order, Submission, dll.) sesuai dengan `prisma/schema.prisma`.
|
||||
```bash
|
||||
npx prisma db push
|
||||
```
|
||||
|
||||
## Menjalankan Aplikasi
|
||||
Setelah database siap, Anda bisa menjalankan aplikasi di tahap pengembangan lokal (development mode):
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
# or
|
||||
pnpm dev
|
||||
# or
|
||||
bun dev
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
Aplikasi secara bawaan dapat diakses melalui browser dengan URL:
|
||||
👉 **[http://localhost:3000](http://localhost:3000)**
|
||||
|
||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
||||
---
|
||||
|
||||
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
|
||||
|
||||
## Learn More
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
||||
|
||||
## Deploy on Vercel
|
||||
|
||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
||||
### Alur Singkat Aplikasi:
|
||||
- Akses pertama kali, sistem akan _generate_ UUID unik untuk *device* Anda dan menyimpannya di `localStorage`.
|
||||
- Aplikasi akan menampilkan Modal Wajib untuk mendaftarkan **Nama** dan opsional **Foto Profil**.
|
||||
- Anda dapat mulai:
|
||||
- Membuat Jasa Titip di menu **Jasa Order Saya**.
|
||||
- Mengikuti Jasa Titip teman di menu **Open Order**.
|
||||
- Mengelola pembayaran & melihat rincian di halaman detail.
|
||||
|
||||
Reference in New Issue
Block a user