I want to preface by saying this is mostly just a portfolio project. It's relatively barebones and I don't expect anyone to use it. It works as described but there are much better solutions out there. A large majority of the foundation was written by hand then I used Claude to iron out some backend bugs and nitpicky front-end misalignments. The index.html contents were swapped out with a template for the sake of privacy.
A lightweight, self-contained contact management system built with vanilla JavaScript and PHP.
This project provides a simple yet powerful web-based contact manager that queries data from a JSON file and dynamically generates an interactive contact card table that can be used to manage professional networks, client lists, or personal contacts.
- Zero Dependencies: Built entirely with vanilla JavaScript and PHP
- Dynamic Card Generation: Automatically creates contact cards from JSON data
- Responsive Design: Works seamlessly across desktop, tablet, and mobile devices
- Category Organization: Tag and filter contacts by customizable categories
- Rich Contact Information: Store names, emails, links, notes, and custom metadata
- Status Tracking: Mark contacts as active or inactive
- Preview Mode: Toggle between detailed and compact card views
- Sidebar Navigation: Easy-to-use navigation with mobile-friendly toggle
- Clean UI: Modern, card-based interface with intuitive layouts
- Frontend: Vanilla JavaScript (ES6+), HTML5, CSS3
- Backend: PHP (for JSON file operations)
- Data Storage: JSON file-based database
- No Build Tools: Runs directly in the browser—no compilation needed
[parent]/
├── index.html # Main application entry point
├── api/
│ ├── auth.php # Panel access protection
│ ├── contacts.php # CRUD middleware for JSON
│ ├── guard.php # Rate-limiting implementation
│ ├── policy.php # Security header declarations
│ ├── preview_delete.php # Contact image removal handler
│ ├── preview_upload.php # Contact image upload handler
│ └── preview_wipe.php # Contact image full wipe handler
├── assets/
│ ├── css/
│ │ ├── panel.css # Dashboard styles
│ │ ├── style.css # Main stylesheet
│ │ ├── sidebar.css # Sidebar component styles
│ │ └── card.css # Contact card styles
│ ├── img/
│ │ └── contact
│ │ └── preview # Contact images
│ └── js/
│ ├── main.js # Entry point and initialization
│ ├── dashboard.js # Core class and orchestration
│ ├── cardRenderer.js # Card HTML generation and rendering
│ ├── formManager.js # Form fields and misc-link collection
│ ├── imageManager.js # Preview image upload and deletion
│ ├── interactions.js # Drag-and-drop and inline editing
│ ├── utils.js # Shared helper functions
│ └── database.js # JSON data handling
├── data/
│ └── contacts.json # Contact data storage
└── README.md
- A web server with PHP support (Apache, Nginx, or PHP's built-in server)
- PHP 7.4 or higher recommended
- Clone the repository:
git clone https://github.com/yourusername/contact-manager-dashboard.git
cd contact-manager-dashboard- Start a local PHP server:
php -S localhost:8000- Open your browser and navigate to:
http://localhost:8000
That's it! No npm install, no build process, no configuration files.
Contacts are stored in contacts.json with the following structure:
{
"metadata": {
"nextId": 31,
"cardIds": [1, 2, 3, ...],
"lastUpdated": "2026-02-16"
},
"cards": {
"card_1": {
"id": 1,
"icon": "⭐",
"name": "Contact Name",
"status": "active",
"categories": [...],
"email": "contact@example.com",
"miscLinks": [...],
"miscInfo": "Additional notes...",
"preview": true,
"createdAt": "...",
"lastModified": "..."
}
}
}Edit contacts.json directly or implement the CRUD operations through the dashboard interface. Each contact supports:
- Custom emoji icons
- Multiple category tags with labels
- Unlimited miscellaneous links (social media, websites, etc.)
- Free-form notes and information
- Active/inactive status toggles
- Preview mode settings
Modify the CSS files in assets/css/ to customize the appearance:
style.css- Global styles and layoutsidebar.css- Navigation sidebarcard.css- Contact card components
The modular JavaScript architecture makes it easy to add features:
main.js- Entry point; instantiates the dashboard and exposes it globallydashboard.js- Core class; orchestrates all modules and handles CRUD, export/import, and orderingcardRenderer.js- Extend card layout, add new fields, or change HTML structureformManager.js- Add or modify form fields and misc-link collectionimageManager.js- Extend preview upload, deletion, or local file handlinginteractions.js- Modify drag-and-drop behaviour or inline editing logicutils.js- Add shared helper functions available across all modules
Works on all modern browsers:
- Chrome/Edge (latest)
- Firefox (latest)
- Safari (latest)
- Mobile browsers (iOS Safari, Chrome Mobile)
This project intentionally avoids frameworks and libraries to demonstrate that powerful web applications can be built with just vanilla JavaScript and PHP. Benefits include:
- Fast Loading: No megabytes of framework code to download
- Easy Maintenance: No dependency updates or breaking changes
- Learning Tool: Great for understanding core web technologies
- Long-term Stability: Won't break when a framework updates
- Minimal Footprint: Entire project is lightweight and portable
- No Supply Chain Risk: Third-party packages can be compromised or inject malicious code without your knowledge
- Full Auditability: Every line that touches user data is code you wrote and can inspect — no opaque minified library logic
- No Hidden Data Exfiltration: Without external dependencies, there are no silent network calls you didn't author yourself
MIT License - feel free to use this project for personal or commercial purposes.
Contributions are welcome! Please feel free to submit issues or pull requests.