204 lines
7.7 KiB
Markdown
204 lines
7.7 KiB
Markdown
# 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:
|
|
```bash
|
|
git clone https://github.com/username/sistem-desa-mandiri.git
|
|
cd sistem-desa-mandiri
|
|
```
|
|
|
|
2. Install dependencies:
|
|
```bash
|
|
bun install
|
|
```
|
|
|
|
3. Setup environment variables:
|
|
```bash
|
|
cp .env.test .env
|
|
```
|
|
Edit the `.env` file and fill in the required variables, especially `DATABASE_URL`.
|
|
|
|
4. Run Prisma migrations:
|
|
```bash
|
|
npx prisma migrate dev
|
|
```
|
|
|
|
5. Seed the database (optional):
|
|
```bash
|
|
npx prisma db seed
|
|
```
|
|
|
|
6. Run the development server:
|
|
```bash
|
|
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 |