Dashboard Revitalisasi Sekolah Indonesia

Interactive dashboard for visualizing Indonesian school revitalization program data with maps, charts, and province-based filtering.

Tech Stack

Frontend

• React 18 with TypeScript
• Recharts for data visualization
• React Leaflet for interactive maps
• Axios for API calls

Backend

• Node.js + Express.js
• MongoDB with Mongoose ODM
• RESTful API

Prerequisites

Make sure you have these installed:

• Node.js (v14+)
• MongoDB (v4.4+)
• npm or yarn

Setup Instructions

1. Install MongoDB

If you don't have MongoDB yet:

macOS:

brew tap mongodb/brew
brew install mongodb-community
brew services start mongodb-community

Windows/Linux: Download from https://www.mongodb.com/try/download/community

2. Install Dependencies

# Frontend dependencies
npm install

# Backend dependencies
cd backend
npm install
cd ..

3. Configure and Start Backend

cd backend

# Copy environment template
cp .env.example .env

# Import data into MongoDB (2056 records)
npm run seed

# Start backend server
npm start

Backend runs on http://localhost:3001

4. Start Frontend

In a new terminal:

npm start

Frontend runs on http://localhost:3000

Project Structure

revitalisasi/
├── backend/
│   ├── controllers/      # Route handlers
│   ├── models/          # Mongoose schemas
│   ├── routes/          # API endpoints
│   ├── data/            # Seed data (JSON)
│   ├── seed.js          # Database import script
│   └── server.js        # Express app
├── src/
│   ├── components/      # React components
│   ├── services/        # API layer
│   ├── types/           # TypeScript interfaces
│   └── App.tsx
└── public/

Features

• Interactive map with clickable province markers
• Dynamic charts (bar, pie, composed)
• Filter data by province
• Modal view for kabupaten details
• Responsive design
• Collapsible sidebar navigation

ORM Implementation

Using Mongoose ODM with:

• Schema validation and custom error messages
• Database indexes for query performance
• Virtual properties (computed fields)
• Static methods for reusable queries
• Instance methods for document operations
• Automatic timestamps

See backend/models/Revitalisasi.js for implementation details.

API Endpoints

GET  /api/revitalisasi                                    - All data
GET  /api/revitalisasi/summary/national                   - National summary
GET  /api/revitalisasi/summary/province                   - Province summary
GET  /api/revitalisasi/province/:provinsi                 - Data by province
GET  /api/revitalisasi/province/:provinsi/kabupaten/:kab  - Data by kabupaten
GET  /api/health                                          - Health check

Available Commands

Frontend:

• npm start - Development server
• npm run build - Production build
• npm test - Run tests

Backend:

• npm start - Start server
• npm run dev - Start with nodemon
• npm run seed - Import data (skips if exists)
• npm run seed:force - Force re-import

Database Schema

{
  provinsi: String,
  kabupaten_kota: String,
  jenjang: String,  // PAUD, SD, SMP, SMA
  bentuk_pendidikan: String,
  banyak_sekolah_akan_direvitalisasi: Number,
  anggaran: Number,
  createdAt: Date,
  updatedAt: Date
}

Testing

Verify backend is running:

curl http://localhost:3001/api/health

Check data loaded:

curl http://localhost:3001/api/revitalisasi | head -20

Production Build

npm run build
npx serve -s build

Troubleshooting

MongoDB not connecting:

• Check MongoDB is running: brew services list (macOS)
• Verify MONGODB_URI in backend/.env

Port conflict:

• Frontend: Set PORT in root .env
• Backend: Set PORT in backend/.env

Data not loading:

• Run npm run seed:force to re-import
• Check backend/data/revitalisasi.json exists

Notes

Built as a take-home test demonstrating full-stack development with React, TypeScript, Node.js, Express, and MongoDB. Includes data visualization, interactive maps, and proper API architecture with ORM patterns.