Scola Development Guide

Panduan untuk developer yang bekerja di codebase Scola.

Sub-docs

• Workflow — Git flow, commit conventions, pre-push checks
• Coding Standards — Code style, naming, component patterns
• Component Guide — UI component library usage (shadcn/ui style)
• Dialog Migration — Panduan migrasi dialog pattern
• Scenario 2: Tier 1 Implementation — Rencana implementasi eRaport tanpa LMS/CBT

Quick Start

# Clone & install
git clone https://github.com/Gema-Cendekia-Gemilang/scola-fe-v2.git
cd scola-fe-v2
npm install
cp .env.example .env

# Development
npm run dev          # http://localhost:5173

# Before commit
npm run lint         # WAJIB pass
npm run build        # Recommended (skip jika OOM di server)

Tech Stack

Layer	Technology
Framework	Vue 3 (Composition API)
Build	Vite 5
Styling	TailwindCSS 3
Icons	Lucide Vue Next
State	Pinia
Routing	Vue Router 4
HTTP	Axios
PWA	Vite PWA Plugin
Testing	Playwright (E2E)

Project Structure

src/
├── api/              # API service modules
├── components/       # Reusable UI components
│   ├── ui/           # Base UI (buttons, inputs, cards)
│   ├── layout/       # Layout (sidebar, nav, footer)
│   └── dashboard/    # Dashboard widgets
├── composables/      # Vue composables (useXxx)
├── config/           # App configuration
│   ├── menuRegistry.js
│   └── roleCapabilities.js
├── layouts/          # Page layouts
├── router/           # Route definitions per role
├── services/         # Business logic services
├── stores/           # Pinia stores
├── utils/            # Utility functions
└── views/            # Page components per role/module