LAWCATOR

LAWCATOR is a lightweight static web application for discovering lawyers and law firms in Malaysia. It provides searchable lawyer profiles, firm listings, and an interactive map-based interface to explore legal professionals by location and practice area.

Key ideas: simple JSON-backed data, client-side search and mapping, responsive UI, and no backend required — making it easy to host as a static site.

Live preview: Visit https://lawcator.vercel.app or open the site locally (see "Run locally").

Tech stack

• HTML, CSS, vanilla JavaScript
• Client-side search using Fuse.js (js/fuse-search.js)
• Map functionality built with custom scripts in js/map-scripts/

Features

• Find lawyers by name, firm, or speciality using instant search.
• View lawyer profile pages with details and contact info.
• Explore lawyers and firms on an interactive map.
• Filter results by location and other attributes.
• Theme toggle (light/dark) and responsive layout.

Repository structure (high level)

• assets/
  • css/: page-specific and shared styles
• data/: JSON data used by the client (about.json, firms.json, lawyers.json, malaysia.json)
• images/: lawyer portraits and other media
• js/: application JavaScript (search, UI, map integration)
• pages/: standalone HTML pages used by the site

Useful entry points

• Home: pages/index.html
• Find: pages/find.html
• Lawyer profile template: pages/lawyer-details.html
• Map view: pages/map.html
• About: pages/about.html

Data format The data/ folder contains JSON files the frontend consumes. Example files:

• data/lawyers.json — list of lawyer objects (name, firm, specialties, coordinates, contact, photo)
• data/firms.json — firm records and metadata
• data/malaysia.json — geo/region data used for mapping and boundaries

How it works

• On page load the client loads the JSON datasets from data/ and initializes the UI.
• Search is powered by Fuse.js (js/fuse-search.js) for fuzzy matching and fast client-side filtering.
• Map pages use scripts under js/map-scripts/ to render markers, routes, and interactive views. See js/map.js and the supporting modules for state and utilities.

Run locally You can serve the site with any static file server. Examples:

1. Using Python 3 (recommended quick preview):

python -m http.server 8000
# then open http://localhost:8000/pages/index.html

2. Using VS Code Live Server extension: right-click pages/index.html and choose "Open with Live Server".

Development notes

• Styling lives in assets/css/ with page-specific files like home.css, find.css, and shared rules in shared.css.
• Scripts are organized in js/. Map-specific code is in js/map-scripts/ (see map-view.js, map-utils.js).
• Search and UI helpers: js/fuse-search.js, js/typeahead.js, and js/ui.js.
• Update the JSON in data/ to add or edit lawyers and firms. Keep image filenames in images/lawyer_images/ consistent with photo fields in data/lawyers.json.

Testing & QA

• Since this is a static site, manual QA in multiple viewport sizes and browsers is recommended.
• Check map marker clustering, route drawing, and search responsiveness when the dataset grows.

Deployment

• The site is static and works with GitHub Pages, Vercel, Netlify, or any static host. Ensure the pages/ directory is served as the root or update your hosting configuration accordingly.
• Live site: https://lawcator.vercel.app (deployed via Vercel)

Note: Pushing to the repository's default branch will trigger Vercel to rebuild and redeploy if the project is connected to your Vercel account.

Contributing

• Fork the repo, make changes on a feature branch, and open a pull request.
• When editing data JSON, ensure valid JSON and update any related images in images/.

License

• See the LICENSE file at the project root for licensing details.