Back to Documentation
AMADEV Docs
Project

Project Plan

High-level master plan — tech stack, portfolio, roadmap phases, and AI capabilities

AMADEV (amadev.org) - Project Master Plan

1. Identitas & Visi Project

AMADEV adalah representasi dari harmoni antara keahlian teknis modern dan nilai-nilai integritas.

  • Persona: Programmer & Santri.
  • Tagline: Code with Values, Create with Soul. (Kode dengan Nilai, Berkarya dengan Jiwa).
  • Fokus: Pembuatan Website Premium & High-Performance.

Profile Data (Content)

  • Name: AMA (amatechx - Web Designer)
  • Experience: 15+ Years in Tech Industry.
  • Bio: "Nama saya AMA, seorang programmer berpengalaman dengan lebih dari 15 tahun di industri teknologi. Saya tinggal di Sukaraja, Sukabumi, Indonesia, dan saya berkomitmen untuk memberikan solusi digital yang inovatif dan efisien. Saya memiliki kemampuan dalam berbagai aspek pengembangan web dan e-commerce, serta manajemen proyek."
  • Details:
    • Age: 42
    • Residence: Indonesia
    • Address: Sukaraja, Sukabumi
    • Email: Bstbogor@live.com
    • Phone: +6285888886249

2. Technology Stack (Tech Stack)

Kami menggunakan teknologi terkini untuk memastikan performa yang cepat, aman, dan scalable.

  • Runtime/Package Manager: Bun (Ultra-fast JavaScript runtime).
  • Framework: Next.js (React Framework via Bun).
  • Styling: Tailwind CSS combined with Global CSS Variables (untuk fleksibilitas tema masa depan).
  • Database ORM: Prisma (Next-generation Node.js and TypeScript ORM).
  • Authentication: Auth.js (NextAuth) atau Clerk (Admin & Client Login).
  • Payment Gateway: Midtrans atau Xendit (untuk transaksi otomatis).
  • Deployment: Vercel (Global Edge Network).

Extended Ecosystem (The "Itqan" Tools)

  • Form & Validation: React Hook Form + Zod (Standard industri untuk type-safe forms).
  • State Management: Zustand (Global client state) & TanStack Query (Server state).
  • Linter & Formatter: Biome (Pengganti ESLint/Prettier yang super cepat, cocok dengan Bun).
  • Testing: Vitest (Unit Test) & Playwright (E2E Test).
  • Git Hooks: Husky (Memastikan code bersih sebelum commit).

3. Modular Architecture & Global Styling Strategy

Untuk memastikan project mudah dikembangkan (scalable) dan rapi (maintainable) di masa depan:

Modular Structure

  • Feature-First Organization: Kode dikelompokkan berdasarkan fitur bisnis (tapi tetap fleksibel dengan struktur Next.js App Router).
  • Atomic/Shared Components:
    • src/components/ui: Komponen dasar (Button, Input, Card) yang reusable.
    • src/components/modules: Komponen spesifik untuk fitur tertentu (misal: PortfolioCard, PriceTable).
  • Layouts: Penggunaan layout.tsx yang cerdas untuk memisahkan UI per-section (Admin vs Public).

Global CSS Strategy

  • globals.css as Center of Truth: Menggunakan CSS Variables (:root) untuk tokens design system.
    • --primary: Warna utama.
    • --secondary: Warna pendukung.
    • --accent: Warna highlight (#35ade6).
    • --font-sans: Konfigurasi font family.
  • Tailwind Integration: Tailwind mengakses variable ini (e.g., text-[var(--primary)] atau config colors: { primary: 'var(--primary)' }) agar perubahan tema semudah mengganti nilai variable CSS.

4. Portfolio

Jejak karya digital yang telah kami bangun:

  1. up3j-fai-uika.org - Website Institusi Pendidikan.
  2. amaltx.com - Platform Web Modern.
  3. qianzi.org - Creative/Artistic Platform.
  4. gensdigitalcreative.com - Digital Creative Agency.

5. Roadmap Pengembangan (Plan)

Phase 1: Preparation & Setup

  • Inisialisasi Project: Setup repo menggunakan bun init atau bun create next-app.
  • Config: Setup bun.lockb, tailwind.config.ts, prisma/schema.prisma.
  • Global CSS Setup:
    • Definisi CSS Variables untuk Colors (Primary, Secondary, Accent).
    • Typography settings di globals.css / tailwind.config.ts.
  • Quality Assurance Setup:
    • Setup Biome (bun add -d @biomejs/biome).
    • Setup Husky untuk pre-commit hooks.
  • Database: Koneksi Prisma ke database provider (PostgreSQL/MySQL).

Phase 2: Design & UI/UX (Premium Feel)

  • Design System Implementation:
    • Implementasi Global CSS variables ke dalam Tailwind Config.
    • Animation: Smooth transitions menggunakan framer-motion atau CSS native.
  • Components: Membuat library komponen yang modular (Headers, Footers, Buttons).
  • Layouting: Membuat layout yang clean dan responsif mobile-first.

Phase 3: Core Features Development

  • Landing Page: Showcase identitas "Programmer & Santri" dengan animasi halus.
  • Portfolio Section: Grid layout interaktif menampilkan daftar website.
  • Admin Panel (Fully Integrated):
    • Dashboard: Analytics & Overview.
    • CMS: Portfolio, Blog, Media Library.
    • Management: User settings, Site configuration.
  • Ordering System: Catalog Layanan, Order Form, Checkout.
  • Social Impact: Fitur donasi untuk link Amaratul Ilmi.
  • Contact Form: Lead generation.

Phase 4: Integration & Deployment

  • Prisma Integration: Fetch data dinamis.
  • SEO Optimization: Metadata, Open Graph, Sitemap.
  • Vercel Deployment: CI/CD pipeline.
  • Performance Tuning: Lighthouse score optimization.

6. Smart Capabilities (AI Powered)

Kami mengintegrasikan teknologi AI canggih untuk solusi cerdas:

  • LLM (Chat/Text): Asisten cerdas untuk interaksi user.
  • VLM (Vision): Pemahaman gambar otomatis.
  • Audio Intelligence: TTS (Text-to-Speech) & ASR (Speech Recognition).
  • Generative Media: Image & Video Generation.
  • Document Intelligence: Processing files.

7. Nilai "Santri" dalam Coding

  • Amanah: Code yang bersih, maintainable, dan sesuai requirement.
  • Itqan (Professionalism): Memberikan hasil terbaik, bukan sekadar jadi.
  • Niat: Coding sebagai bentuk ibadah dan kemanfaatan bagi umat.