wibu/sistem-desa-mandiri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
e62909b0701add34dd0145aeb7315da169e5cf65
sistem-desa-mandiri/QWEN.md
amaliadwiy 3b58492680 upd: api project 
Deskripsi:
- api project tahun
- api get project
- qwen

NoIssues
2026-02-02 17:21:38 +08:00

7.7 KiB
Raw Blame History

Sistem Desa Mandiri - Project Documentation

Project Overview

Sistem Desa Mandiri is a comprehensive web application built with Next.js to assist with village-level administration and information management. The application provides various features to support village activities, including announcements, discussions, project management, and population administration.

Key Features

  • User Management: Manage member data and access rights
  • Announcements: Distribute important information to all village residents
  • Discussions: Forum for discussions among villagers or village officials
  • Project & Task Management: Track progress of ongoing village projects and tasks
  • Documentation: Centralized location for storing and managing important documents
  • Push Notifications: Send real-time notifications to user devices

Technology Stack

  • Framework: Next.js 14
  • UI Framework: Mantine
  • Database ORM: Prisma
  • Styling: Tailwind CSS, CSS Modules
  • State Management: Hookstate
  • Push Notifications: Web Push
  • Authentication: Custom cookie-based authentication system
  • Icons: Tabler Icons React
  • Rich Text Editor: TipTap
  • Charts: Recharts, ECharts
  • Date Handling: Day.js, Moment.js
  • File Upload: Multer
  • Server Framework: Elysia.js

Project Structure

sistem-desa-mandiri/
├── src/
│   ├── app/                    # Next.js app router pages
│   │   ├── (application)/      # Main application routes
│   │   ├── (auth)/            # Authentication routes
│   │   ├── api/               # API routes
│   │   └── ...                # Other route groups
│   ├── module/                # Feature modules organized by domain
│   │   ├── _global/           # Global components and utilities
│   │   ├── announcement/      # Announcement feature
│   │   ├── auth/              # Authentication feature
│   │   ├── discussion/        # Discussion forum
│   │   ├── document/          # Document management
│   │   ├── project/           # Project management
│   │   ├── user/              # User management
│   │   └── ...                # Other feature modules
│   ├── lib/                   # Utility functions and libraries
│   ├── types/                 # TypeScript type definitions
├── public/                    # Static assets
├── .env.test                  # Environment variables template
├── next.config.mjs            # Next.js configuration
├── package.json               # Dependencies and scripts
├── README.md                  # Project documentation
├── tailwind.config.ts         # Tailwind CSS configuration
└── tsconfig.json              # TypeScript configuration

Module Organization

The application follows a modular architecture where each feature is contained in its own module directory under /src/module/. Each module typically contains:

  • api/ - API functions and server actions
  • ui/ - User interface components
  • hooks/ - Custom React hooks
  • types/ - Type definitions specific to the module
  • utils/ - Utility functions

Building and Running

Prerequisites

  • Node.js (version 20.x or higher)
  • Bun (recommended) or other package managers like npm/yarn/pnpm
  • Database (PostgreSQL, MySQL, or SQLite)

Installation Steps

  1. Clone the repository:
git clone https://github.com/username/sistem-desa-mandiri.git
cd sistem-desa-mandiri
  1. Install dependencies:
bun install
  1. Setup environment variables:
cp .env.test .env

Edit the .env file and fill in the required variables, especially DATABASE_URL.

  1. Run Prisma migrations:
npx prisma migrate dev
  1. Seed the database (optional):
npx prisma db seed
  1. Run the development server:
bun run dev

The application will run at https://localhost:3000

Available Scripts

  • dev: Runs the development server with HTTPS
  • build: Creates a production build of the application
  • start: Runs the production server
  • lint: Runs the linter to check code quality
  • prisma:seed: Runs the database seeding script

Development Conventions

Coding Standards

  • Follow Next.js conventions for file-based routing
  • Use TypeScript for type safety
  • Maintain consistent component structure within modules
  • Use Mantine components for UI elements
  • Follow accessibility best practices

Naming Conventions

  • Components: PascalCase (e.g., UserProfile.tsx)
  • Functions: camelCase (e.g., getUserData)
  • Constants: UPPER_SNAKE_CASE (e.g., MAX_FILE_SIZE)
  • Modules: lowercase with hyphens if needed (e.g., discussion-general)

State Management

  • Use Hookstate for global state management
  • Use React hooks for component-local state
  • Store persistent data in cookies or localStorage as appropriate

API Design

  • Organize API routes by feature in the /src/app/api/ directory
  • Use RESTful conventions where possible
  • Implement proper error handling and validation
  • Secure endpoints with appropriate authentication checks

Testing

  • Unit tests should be co-located with the code they test
  • Integration tests should be in the /tests/ directory
  • Follow the testing pyramid: many unit tests, fewer integration tests, minimal end-to-end tests

Key Dependencies

Core Dependencies

  • next: React framework for production applications
  • react, react-dom: UI library
  • @mantine/core: Component library with accessible components
  • @prisma/client: Database toolkit
  • web-push: Web Push protocol implementation
  • elysia: Fast, lightweight web framework
  • @hookstate/core: State management solution

UI Dependencies

  • @mantine/carousel: Carousel component
  • @mantine/charts: Chart components
  • @mantine/form: Form management
  • @mantine/notifications: Notification system
  • @mantine/tiptap: Rich text editor components
  • @tabler/icons-react: Icon library
  • @tiptap/react: Rich text editor
  • recharts: Charting library
  • echarts-for-react: Alternative charting library

Utilities

  • dayjs: Date manipulation library
  • lodash: Utility functions
  • crypto-js: Cryptographic algorithms
  • iron-session: Session management
  • jose: JavaScript Object Signing and Encryption
  • multer: File upload middleware
  • firebase-admin: Firebase admin SDK

Architecture Patterns

Modular Design

The application follows a modular design where each feature is encapsulated in its own module directory. This promotes separation of concerns and makes the codebase easier to maintain and scale.

API Layer

API routes are organized by feature in the /src/app/api/ directory. Each feature has its own subdirectory containing related API endpoints. This makes it easy to locate and maintain API functionality.

Component Organization

Components are organized within their respective module directories. Common components that are shared across multiple modules are placed in the _global module.

Data Flow

  • Client-side state is managed using React hooks and Hookstate
  • Server-side data fetching is done through Next.js API routes
  • Database interactions are handled through Prisma ORM
  • Authentication is implemented using cookies and server actions

Deployment

The application is designed to be deployed as a Next.js application. It can be deployed to platforms like Vercel, Netlify, or any hosting service that supports Node.js applications.

For production deployment:

  1. Run bun run build to create an optimized production build
  2. Run bun start to start the production server
  3. Configure environment variables for the production environment
  4. Set up SSL certificates for secure connections
  5. Configure database connection for production environment