BetterSJDM

A civic-tech initiative providing transparent access to municipal services, programs, and public funds of LGU San Jose del Monte City, Bulacan, Philippines.

About

BetterSJDM is a volunteer-driven, open-source project that empowers the people of San Jose del Monte City with easy access to local government information. The platform aggregates public data from official government portals and presents it in a user-friendly, accessible format.

Cost to the People of SJDM = ₱0

License

This project uses a dual-license structure:

• Code (HTML, CSS, JavaScript, configuration files) is licensed under the MIT License
• Content (text, images, datasets, documentation) is licensed under Creative Commons Attribution 4.0 International (CC BY 4.0)

Attribution: Ramon Logan Jr.

For detailed license information, see LICENSE-README.md.

Live Demo

Visit the live website: https://bettersjdm.org

Technology Stack

Category	Technologies
Frontend	HTML5, CSS3, JavaScript (ES6+)
Styling	Custom CSS, CSS Variables, Flexbox, CSS Grid, Responsive Design
Icons	Bootstrap Icons (CDN)
Fonts	Google Fonts (Inter)
Maps	Leaflet.js, OpenStreetMap
Charts	Chart.js (Canvas-based)
Data Format	JSON
APIs	Open-Meteo (Weather), ExchangeRate API (Currency)
Build Tools	Node.js, npm, Bash
Minification	html-minifier-terser, clean-css-cli, terser
Version Control	Git, GitHub
Server	Apache (.htaccess), mod_rewrite, mod_deflate
Hosting	cPanel (Production), Python HTTP Server (Development)
SEO	Open Graph, Twitter Cards, XML Sitemap, robots.txt
Security	HTTPS, CSP Headers, HSTS, X-Frame-Options
Analytics	Google Analytics (gtag.js)
Accessibility	WCAG 2.1, ARIA, Semantic HTML
Performance	GZIP Compression, Browser Caching, Asset Minification

Key Features

Feature	Description
Municipal Services Directory	Comprehensive guide to all LGU services with requirements, fees, and processing times
Government Officials	Directory of elected officials and department heads with contact information
Budget Transparency	Financial reports, income/expenditure breakdowns, and DPWH infrastructure projects
Legislative Documents	Searchable database of ordinances and resolutions from Sangguniang Bayan
Municipal Statistics	Demographics, economic data, and competitive index rankings
Events Calendar	Interactive calendar showing city events, holidays, and important dates
News & Updates	Latest announcements and news from the city government
Real-time Information	Live weather updates, currency exchange rates, and Philippine time
Multi-language Support	Available in English, Filipino, and Ilocano
Accessibility	WCAG 2.1 compliant with skip links, ARIA labels, and semantic HTML
Privacy & Terms	Comprehensive privacy policy and terms of service pages
SEO Optimized	Meta tags, Open Graph, Twitter Cards, structured data, and XML sitemap
Performance	90% size reduction through minification, GZIP compression, and browser caching

Quick Start

# Clone the repository
git clone https://github.com/BetterSJDM/bettersjdm.git

# Navigate to project directory
cd bettersjdm

# Install dependencies
npm install

# Start development server
npm run dev

# Open in browser
# http://localhost:8000

Installation

Prerequisites

Requirement	Version	Purpose
Node.js	v16+	Build tools and package management
npm	v8+	Dependency management
Python	v3.x	Local development server
Git	Latest	Version control

Setup Steps

1. Clone the repository

git clone https://github.com/BetterSJDM/bettersjdm.git
cd bettersjdm

2. Install dependencies

npm install

3. Start the development server

npm run dev

4. Open in browser
   • Development: http://localhost:8000
   • Production preview: http://localhost:8080 (after build)

Usage

Development Commands

Command	Description
npm run dev	Start local development server (port 8000)
npm run build	Build minified production files to dist/ (auto-bumps patch version)
npm run build:minor	Bump minor version and build
npm run build:major	Bump major version and build
npm run serve:dist	Serve production build (port 8080)
npm run version:check	Display current version
npm run version:patch	Bump patch version only
npm run version:minor	Bump minor version only
npm run version:major	Bump major version only

Production Deployment

1. Build production files

npm run build

2. Output location

   • Minified files are generated in the dist/ folder
   • Original size: ~17MB → Minified: ~1.8MB (90% reduction)

3. Deploy to server

   • Upload contents of dist/ to your web server's public_html directory
   • Ensure .htaccess is included for clean URLs and security headers

File Permissions (cPanel)

Type	Permission	Numeric
Files	rw-r--r--	644
Directories	rwxr-xr-x	755

Project Structure

bettersjdm/
├── assets/
│   ├── css/              # Stylesheets (9 files)
│   ├── js/               # JavaScript modules (19 files)
│   ├── images/           # Images, icons, banners
│   └── fonts/            # Web fonts
├── data/                 # JSON data files
│   ├── officials.json    # Government officials data
│   ├── services.json     # Municipal services data
│   ├── ordinances.json   # Legislative ordinances
│   ├── resolutions.json  # Legislative resolutions
│   ├── events.json       # City events and calendar
│   ├── dpwh-projects.json # DPWH infrastructure projects
│   └── csv/              # CSV data files for statistics
├── services/             # Service category pages (11 pages)
├── service-details/      # Individual service pages (15 pages)
├── government/           # Government directory pages
├── legislative/          # Legislative framework pages
├── budget/               # Budget transparency page
├── statistics/           # Municipal statistics page
├── calendar/             # Events calendar page
├── news/                 # News and announcements page
├── contact/              # Contact information page
├── faq/                  # Frequently asked questions
├── privacy/              # Privacy policy page
├── terms/                # Terms of service page
├── sitemap/              # HTML sitemap page
├── accessibility/        # Accessibility statement page
├── scripts/              # Build and version scripts
├── dist/                 # Production build output
├── index.html            # Homepage
├── .htaccess             # Apache configuration
├── sitemap.xml           # XML sitemap (SEO)
├── robots.txt            # Search engine directives
├── version.json          # Version tracking
├── build.sh              # Build automation script
├── package.json          # Node.js configuration
└── README.md             # Project documentation

Contributing

We welcome contributions from everyone! Whether you're a developer, designer, data researcher, content writer, translator, or a concerned citizen of San Jose del Monte City, your participation helps shape this project for all.

How to Contribute

1. Fork the repository
2. Create a feature branch

   git checkout -b feature/your-feature-name

3. Make your changes
4. Test thoroughly on multiple browsers
5. Commit with a descriptive message

   git commit -m "Add: description of your changes"

6. Push to your fork

   git push origin feature/your-feature-name

7. Open a Pull Request with detailed description

Contribution Areas

Area	Description
Bug Fixes	Report issues or submit fixes for existing bugs
Features	Propose or implement new functionality
Content	Update service information, add missing municipal data
Translations	Help translate content to Filipino or Ilocano
Design	Improve UI/UX, accessibility, and visual consistency
Data	Verify and update municipal statistics and records
Documentation	Enhance README, code comments, and guides
API Integration	Propose or implement API connections for real-time data feeds
Data Visualization	Enhance charts, graphs, and interactive presentations

Code Style Guidelines

Guideline	Description
HTML	Use semantic HTML5 elements; validate before committing
CSS	Follow BEM naming conventions; use CSS custom properties
JavaScript	Keep vanilla JS unless proposing framework for data visualization
Naming	Use meaningful, descriptive variable and function names
Comments	Add comments for complex logic and non-obvious implementations
Accessibility	Ensure WCAG 2.1 compliance (alt text, ARIA, keyboard navigation)
Performance	Optimize images; minimize DOM manipulation
Testing	Test on Chrome, Firefox, Safari, Edge; test mobile responsiveness
Validation	Validate HTML/CSS before pull requests

Data Sources

All public information is sourced from official government portals:

| Source | URL | Data Type | |--------|-----|-----------|| | LGU SJDM Official Website | sjdm.gov.ph | Services, Officials | | Sangguniang Panlungsod ng SJDM | TBD | Ordinances, Resolutions | | Bureau of Local Government Finance | blgf.gov.ph | Budget, Financial Reports | | Philippine Statistics Authority | psa.gov.ph | Demographics, Census | | DTI CMCI Portal | cmci.dti.gov.ph | Competitive Index |

License

This project is dual-licensed:

License	Applies To	Details
MIT License	Source Code	Free to use, modify, and distribute
CC BY 4.0	Content	Attribution required for content reuse

See LICENSE for full details.

Contact

Channel	Link
Website	bettersjdm.org
Email	volunteer@bettersjdm.org
Facebook	@bettersjdm.org
LinkedIn	BetterSJDM
Discord	Join Community
GitHub	BetterSJDM/bettersjdm

Acknowledgments

• BetterGov.ph for pioneering the civic-tech initiative in the Philippines
• BetterSolano.org and its developer for the civic-tech approach
• BetterSJDM for the community
• LGU San Jose del Monte City for public data availability and transparency
• All volunteers and contributors who dedicate their time
• Open-source community for the tools and libraries used
• Citizens of SJDM for their feedback and support

---

Made for the people of San Jose del Monte City, Bulacan