Okay, let's start building a basic, light CRM application. We'll use Node.js with Express for the backend API and simple HTML, CSS, and JavaScript for the frontend. This initial version will allow adding and viewing contacts. { "name": "light-crm", "version": "1.0.0", "description": "A simple CRM application", "main": "server.js", "scripts": { "start": "node server.js" }, "dependencies": { "express": "^4.18.2" }, "author": "", "license": "ISC" } const express = require('express'); const fs = require('fs/promises'); const path = require('path'); const crypto = require('crypto'); // For generating unique IDs const app = express(); const PORT = 3000; const DATA_DIR = path.join(__dirname, 'data'); const CONTACTS_FILE = path.join(DATA_DIR, 'contacts.json'); // Middleware app.use(express.json()); // Parse JSON request bodies app.use(express.static(path.join(__dirname, 'public'))); // Serve static files from 'public' // Helper function to read contacts async function readContacts() { try { await fs.access(CONTACTS_FILE); const data = await fs.readFile(CONTACTS_FILE, 'utf-8'); return JSON.parse(data); } catch (error) { // If file doesn't exist or is invalid JSON, return empty array if (error.code === 'ENOENT') { await ensureDataDir(); // Ensure directory exists await fs.writeFile(CONTACTS_FILE, '[]', 'utf-8'); // Create empty file return []; } console.error("Error reading contacts file:", error); return []; } } // Helper function to write contacts async function writeContacts(contacts) { try { await ensureDataDir(); await fs.writeFile(CONTACTS_FILE, JSON.stringify(contacts, null, 2), 'utf-8'); } catch (error) { console.error("Error writing contacts file:", error); } } // Helper function to ensure data directory exists async function ensureDataDir() { try { await fs.access(DATA_DIR); } catch (error) { if (error.code === 'ENOENT') { await fs.mkdir(DATA_DIR); } else { throw error; // Re-throw other errors } } } // --- API Routes --- // GET /api/contacts - Get all contacts app.get('/api/contacts', async (req, res) => { const contacts = await readContacts(); res.json(contacts); }); // POST /api/contacts - Add a new contact app.post('/api/contacts', async (req, res) => { const { name, email, phone } = req.body; if (!name || !email) { return res.status(400).json({ message: 'Name and email are required' }); } const contacts = await readContacts(); const newContact = { id: crypto.randomUUID(), // Generate a unique ID name, email, phone: phone || '', // Optional phone createdAt: new Date().toISOString() }; contacts.push(newContact); await writeContacts(contacts); res.status(201).json(newContact); }); // --- Serve Frontend --- // Route for the main HTML page (if not in 'public') // app.get('/', (req, res) => { // res.sendFile(path.join(__dirname, 'index.html')); // Adjust if index.html is not in public // }); // --- Start Server --- app.listen(PORT, async () => { await ensureDataDir(); // Ensure data directory exists on startup console.log(`Server running at http://localhost:${PORT}`); }); Light CRM

Light CRM

Add New Contact

Contacts

body { font-family: sans-serif; line-height: 1.6; margin: 20px; background-color: #f4f4f4; } h1, h2 { color: #333; text-align: center; } .container { display: flex; flex-wrap: wrap; gap: 20px; max-width: 900px; margin: 20px auto; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .add-contact, .contact-list { flex: 1; min-width: 300px; } .add-contact form div { margin-bottom: 10px; } .add-contact label { display: block; margin-bottom: 5px; font-weight: bold; } .add-contact input[type="text"], .add-contact input[type="email"], .add-contact input[type="tel"] { width: 95%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; } .add-contact button { padding: 10px 15px; background-color: #5cb85c; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 1em; } .add-contact button:hover { background-color: #4cae4c; } .contact-list ul { list-style: none; padding: 0; } .contact-list li { background-color: #e9e9e9; margin-bottom: 10px; padding: 10px; border-radius: 4px; border: 1px solid #ddd; } .contact-list li strong { display: block; margin-bottom: 5px; color: #333; } .message { margin-top: 10px; padding: 8px; border-radius: 4px; font-weight: bold; } .message.success { background-color: #dff0d8; color: #3c763d; border: 1px solid #d6e9c6; } .message.error { background-color: #f2dede; color: #a94442; border: 1px solid #ebccd1; } const contactList = document.getElementById('contacts'); const addContactForm = document.getElementById('add-contact-form'); const nameInput = document.getElementById('name'); const emailInput = document.getElementById('email'); const phoneInput = document.getElementById('phone'); const addMessage = document.getElementById('add-message'); // --- Functions --- // Function to display contacts function displayContacts(contacts) { contactList.innerHTML = ''; // Clear current list if (contacts.length === 0) { contactList.innerHTML = '

No contacts yet.

'; return; } contacts.forEach(contact => { const li = document.createElement('li'); li.innerHTML = ` ${contact.name} Email: ${contact.email}
${contact.phone ? `Phone: ${contact.phone}
` : ''} Added: ${new Date(contact.createdAt).toLocaleString()} `; // Add data attribute for potential future actions (edit/delete) li.dataset.id = contact.id; contactList.appendChild(li); }); } // Function to fetch contacts from the API async function fetchContacts() { try { const response = await fetch('/api/contacts'); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const contacts = await response.json(); displayContacts(contacts); } catch (error) { console.error('Error fetching contacts:', error); contactList.innerHTML = '

Error loading contacts.

'; } } // Function to add a new contact via the API async function addContact(event) { event.preventDefault(); // Prevent default form submission const newContact = { name: nameInput.value.trim(), email: emailInput.value.trim(), phone: phoneInput.value.trim(), }; // Basic validation if (!newContact.name || !newContact.email) { showAddMessage('Name and Email are required.', 'error'); return; } try { const response = await fetch('/api/contacts', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(newContact), }); if (!response.ok) { const errorData = await response.json(); throw new Error(errorData.message || `HTTP error! status: ${response.status}`); } const addedContact = await response.json(); // Clear form and show success addContactForm.reset(); showAddMessage(`Contact "${addedContact.name}" added successfully!`, 'success'); // Refresh the contact list fetchContacts(); } catch (error) { console.error('Error adding contact:', error); showAddMessage(`Error: ${error.message}`, 'error'); } } // Function to display messages below the add form function showAddMessage(message, type = 'info') { addMessage.textContent = message; addMessage.className = `message ${type}`; // Apply CSS class for styling // Clear message after a few seconds setTimeout(() => { addMessage.textContent = ''; addMessage.className = 'message'; }, 5000); } // --- Event Listeners --- addContactForm.addEventListener('submit', addContact); // --- Initial Load --- fetchContacts(); // Load contacts when the page loads [] Next steps: 1. Run `npm install` in the terminal to install Express. 2. Run `npm start` to start the server. 3. Open the provided preview link in your browser. You should see the basic CRM interface where you can add contacts and view the list. The data will be saved in the `data/contacts.json` file.