The Palos Publishing Company

Follow Us On The X Platform @PalosPublishing
Categories We Write About

Build a micro-survey system for friends_family

Written by

Bernardo Palos

in

Here’s a simple and functional micro-survey system you can build to collect quick responses from friends or family. This version includes a frontend (to collect responses) and a backend (to store and retrieve responses). The system is ideal for questions like “What’s a good time for dinner?” or “Which movie should we watch?”

🧠 Key Features

  • Create a survey with 1–5 questions

  • Share a unique link with friends/family

  • Each response is recorded with a timestamp

  • View live results

🔧 Tech Stack

  • Frontend: HTML + TailwindCSS + JavaScript

  • Backend: Node.js (Express)

  • Storage: JSON file (for simplicity)

📁 Project Structure

pgsql
micro-survey/
├── server.js
├── public/
│   ├── index.html
│   ├── survey.js
│   └── styles.css (optional)
└── data/
    └── responses.json

server.js (Backend)

javascript
const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();
const PORT = 3000;

app.use(express.static('public'));
app.use(express.json());

const RESPONSES_FILE = path.join(__dirname, 'data', 'responses.json');

// Ensure data folder and file exist
if (!fs.existsSync('data')) fs.mkdirSync('data');
if (!fs.existsSync(RESPONSES_FILE)) fs.writeFileSync(RESPONSES_FILE, '[]');

app.post('/submit', (req, res) => {
    const response = { ...req.body, timestamp: new Date().toISOString() };
    const data = JSON.parse(fs.readFileSync(RESPONSES_FILE));
    data.push(response);
    fs.writeFileSync(RESPONSES_FILE, JSON.stringify(data, null, 2));
    res.json({ message: 'Response recorded!' });
});

app.get('/results', (req, res) => {
    const data = JSON.parse(fs.readFileSync(RESPONSES_FILE));
    res.json(data);
});

app.listen(PORT, () => console.log(`Server running on http://localhost:${PORT}`));

public/index.html (Frontend)

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Quick Survey</title>
  <script defer src="survey.js"></script>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 text-gray-800 p-4">
  <div class="max-w-xl mx-auto bg-white p-6 rounded shadow">
    <h1 class="text-2xl font-bold mb-4">Family & Friends Survey</h1>
    <form id="surveyForm" class="space-y-4">
      <div>
        <label class="block font-medium">What's your favorite meal of the day?</label>
        <input name="meal" class="w-full border rounded p-2" required />
      </div>
      <div>
        <label class="block font-medium">Ideal time to meet?</label>
        <input name="time" class="w-full border rounded p-2" required />
      </div>
      <div>
        <label class="block font-medium">Preferred weekend activity?</label>
        <input name="activity" class="w-full border rounded p-2" required />
      </div>
      <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Submit</button>
    </form>
    <div id="thankyou" class="hidden mt-4 text-green-600 font-semibold">Thanks for your response!</div>
  </div>
</body>
</html>

public/survey.js

javascript
document.getElementById('surveyForm').addEventListener('submit', async (e) => {
    e.preventDefault();

    const formData = new FormData(e.target);
    const data = Object.fromEntries(formData.entries());

    const response = await fetch('/submit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data),
    });

    if (response.ok) {
        e.target.reset();
        document.getElementById('thankyou').classList.remove('hidden');
    }
});

Optional: View Responses

Create a basic admin page to view responses:

public/results.html

html
<!DOCTYPE html>
<html>
<head>
  <title>Survey Results</title>
  <script>
    async function loadResults() {
      const res = await fetch('/results');
      const data = await res.json();
      const container = document.getElementById('results');
      container.innerHTML = data.map((r, i) =>
        `<li class="mb-2">
          <strong>Response ${i + 1}</strong><br>
          Meal: ${r.meal}<br>
          Time: ${r.time}<br>
          Activity: ${r.activity}<br>
          <small>${r.timestamp}</small>
        </li>`
      ).join('');
    }

    window.onload = loadResults;
  </script>
</head>
<body>
  <h1>All Responses</h1>
  <ul id="results"></ul>
</body>
</html>

🔄 To Run the Project

  1. Make sure Node.js is installed

  2. Create the directory and files

  3. Run npm init -y and npm install express

  4. Start the server: node server.js

  5. Open browser at: http://localhost:3000

This micro-survey system is lightweight, expandable, and perfect for personal group polling or fun family planning. You can deploy it on platforms like Render, Vercel (frontend), or Railway (backend). Let me know if you want a multi-question dynamic builder or authentication.

Share this Page your favorite way: Click any app below to share.
See all the ways to share this page

Enter your email below to join The Palos Publishing Company Email List

We respect your email privacy

Check Out Our Newest Posts we wrote about

Categories We Write About