Please keep the following things in mind:
- which OS do you use? use tags for that information
- I use Intel core i3
- neo4j version, desktop version, browser version
- Version 1.6.1
Can you share your code and the error you are getting?
1 Like
Thank you sir, for your reply.
I'm trying to connect my frontend form to the backend server, but I’m unable to do that. I think it might not be connecting to the correct port or server address.**
My backend is running on port 8080, but the frontend seems to be trying something else or isn’t reaching it. Could you help me check if I’m using the correct endpoint or if there’s something wrong in my setup? Here's the backend code:
const express = require("express");
const neo4j = require("neo4j-driver");
const cors = require("cors");
const app = express();
app.use(express.json());
app.use(cors()); // Allow frontend to communicate with backend
// Connect to Neo4j
const driver = neo4j.driver(
"bolt://localhost:7687",
neo4j.auth.basic("neo4j", "password") // Replace with your Neo4j password
);
// API Endpoint to receive family form data and store it in Neo4j
app.post("/api/family", async (req, res) => {
const session = driver.session(); // Create session per request
const { name, father, mother, spouse, children } = req.body;
try {
// Create Person node
await session.run(`MERGE (p:Person {name: $name})`, { name });
// Create Father relationship
if (father) {
await session.run(
`MERGE (f:Person {name: $father})
MERGE (p:Person {name: $name})
MERGE (p)-[:CHILD_OF]->(f)`,
{ name, father }
);
}
// Create Mother relationship
if (mother) {
await session.run(
`MERGE (m:Person {name: $mother})
MERGE (p:Person {name: $name})
MERGE (p)-[:CHILD_OF]->(m)`,
{ name, mother }
);
}
// Create Spouse relationship
if (spouse) {
await session.run(
`MERGE (s:Person {name: $spouse})
MERGE (p:Person {name: $name})
MERGE (p)-[:MARRIED_TO]->(s)
MERGE (s)-[:MARRIED_TO]->(p)`,
{ name, spouse }
);
}
// Create Children relationships
if (children && Array.isArray(children)) {
for (const child of children) {
await session.run(
`MERGE (c:Person {name: $child})
MERGE (p:Person {name: $name})
MERGE (c)-[:CHILD_OF]->(p)`,
{ name, child }
);
}
}
res.json({ message: "✅ Family data added successfully to Neo4j!" });
} catch (error) {
console.error("❌ Error:", error);
res.status(500).json({ error: error.message });
} finally {
await session.close(); // Always close session
}
});
// Start server
app.listen(8080, () => console.log("
Server running on port 8080"));
Here's the frontend code:
Family Tree Form (Sample Details) body { background-image: url("https://cdn.glitch.global/8cec9c3c-87ec-44c8-96b6-d43d777eed7a/pngtree-aesthetic-textures-in-nature-image_16268301.jpg?v=1728312112765"); background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0; min-height: 100vh; display: flex; justify-content: center; align-items: start; } .adopted-children-container { display: flex; align-items: center; gap: 50px; /* Adjust gap as needed */ } /* Sub-container for Yes/No options */ .yes-no-container { display: flex; flex-direction: row; /* Yes and No horizontally */ gap: 50px; /* Space between Yes and No */ } .flex-container {
display: flex;
align-items: center;
gap: 10px; /* Controls space between label and checkbox */
}
.container {
width: 90%;
max-width: 1000px;
margin: 50px auto;
background-color: rgba(255, 255, 255, 0.9);
padding: 50px;
border-radius: 10px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
text-align: center;
}
h2 {
color: #4caf50;
font-size: 28px;
margin-bottom: 20px;
}
form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
text-align: left;
}
label {
display: flex;
flex-direction: column;
font-weight: bold;
color: #333;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
select {
width: 95%;
padding: 12px;
margin-top: 0px;
margin-bottom: 15px;
border: 2px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
input[type="submit"],
button {
background-color: #4caf50;
color: white;
padding: 12px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
.buttons {
grid-column: span 2;
display: flex;
justify-content: space-between;
gap: 15px;
}
.not-known-checkbox {
margin-left: 10px;
}
.inline-container {
display: flex;
align-items: center;
gap: 70px;
}
.family-tree-display {
margin-top: 30px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
text-align: left;
}
/* Modal styles */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.sample-image {
width: 100%;
height: auto;
}
</style>
Family Tree Information Form
View Sample Form <!-- Modal for Sample Form Image -->
<div id="sampleFormModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeModal()">×</span>
<h3>Sample Family Tree Form</h3>
<img
src="https://cdn.glitch.global/8cec9c3c-87ec-44c8-96b6-d43d777eed7a/Screenshot%202024-10-03%20184026.png?v=1728315196888"
class="sample-image"
alt="Sample Form Image"
/>
</div>
</div>
<br />
<br />
<!-- Family Tree Form -->
<form id="familyTreeForm">
<!-- Name and Family Details -->
<label for="firstName"
>First Name:
<input type="text" id="firstName" name="firstName" required />
</label>
<label for="middleName"
>Middle Name (If Present):
<input type="text" id="middleName" name="middleName" />
</label>
<label for="lastName"
>Last Name:
<input type="text" id="lastName" name="lastName" required />
</label>
<label for="name"
>Full Name:
<input type="text" id="name" name="name" required />
</label>
<div class="inline-container">
<label for="familyName"
>Family Name:
<input type="text" id="familyName" name="familyName"/>
</label>
<label class="not-known-checkbox">
<input
type="checkbox"
id="familyNameNotKnown"
onchange="toggleNotKnown('familyName')"
/>
Unknown
</label>
</div>
<!-- Personal Details -->
<label for="dob"
>Date of Birth:
<input type="date" id="dob" name="dob" required />
</label>
<label for="gender"
>Gender:
<select id="gender" name="gender" required>
<option value="">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
</label>
<!-- Gothra and Place of Birth -->
<div class="flex-container">
<label for="gothra"
>Gothra:
<input type="text" id="gothra" name="gothra"/>
</label>
<label class="not-known-checkbox">
<input
type="checkbox"
id="gothraNotKnown"
onchange="toggleNotKnown('gothra')"
/>
Unknown
</label>
</div>
<!-- Location and Additional Details -->
<label for="placeOfBirth"
>Place of Birth:
<input type="text" id="placeOfBirth" name="placeOfBirth" required />
</label>
<label for="community"
>Community:
<input type="text" id="community" name="community" />
</label>
<!-- Kuladevatha and Rashi (Moon Sign) -->
<div class="flex-container">
<label for="kuladevatha"
>Kuladevatha:
<input type="text" id="kuladevatha" name="kuladevatha"/>
</label>
<label class="not-known-checkbox">
<input
type="checkbox"
id="kuladevathaNotKnown"
onchange="toggleNotKnown('kuladevatha')"
/>
Unknown
</label>
</div>
<div class="flex-container">
<label for="rashi"
>Rashi (Moon Sign):
<select id="rashi" name="rashi">
<option value="">Select Rashi</option>
<option value="Aries">Aries (Mesha)</option>
<option value="Taurus">Taurus (Vrishabha)</option>
<option value="Gemini">Gemini (Mithuna)</option>
<option value="Cancer">Cancer (Karka)</option>
<option value="Leo">Leo (Simha)</option>
<option value="Virgo">Virgo (Kanya)</option>
<option value="Libra">Libra (Tula)</option>
<option value="Scorpio">Scorpio (Vrishchika)</option>
<option value="Sagittarius">Sagittarius (Dhanu)</option>
<option value="Capricorn">Capricorn (Makara)</option>
<option value="Aquarius">Aquarius (Kumbha)</option>
<option value="Pisces">Pisces (Meena)</option>
</select>
</label>
<label class="not-known-checkbox">
<input
type="checkbox"
id="rashiUnknown"
onchange="toggleNotKnown('rashi')"
/>Unknown
</label>
</div>
<!-- Nakshatra Field -->
<div class="flex-container">
<label for="nakshatra"
>Nakshatra (Star Sign):
<select id="nakshatra" name="nakshatra">
<option value="">Select Nakshatra</option>
<option value="Ashwini">Ashwini</option>
<option value="Bharani">Bharani</option>
<option value="Krittika">Krittika</option>
<option value="Rohini">Rohini</option>
<option value="Mrigashira">Mrigashira</option>
<option value="Other">Other</option>
</select>
</label>
<label class="not-known-checkbox">
<input
type="checkbox"
id="nakshatraUnknown"
onchange="toggleNotKnown('nakshatra')"
/>Unknown
</label>
</div>
<!-- Current Location -->
<label for="currentLocality"
>Current Locality:
<input
type="text"
id="currentLocality"
name="currentLocality"
required
/>
</label>
<label for="district"
>District:
<input type="text" id="district" name="district" required />
</label>
<label for="state"
>State:
<input type="text" id="state" name="state" required />
</label>
<label for="country"
>Country:
<input type="text" id="country" name="country" required />
</label>
<label for="postalCode"
>Postal Code:
<input type="text" id="postalCode" name="postalCode" required />
</label>
<!-- Mother Tongue -->
<label for="motherTongue"
>Mother Tongue:
<input type="text" id="motherTongue" name="motherTongue" />
</label>
<!-- Languages Known -->
<label for="languagesKnown"
>Languages Known:
<input type="text" id="languagesKnown" name="languagesKnown" />
</label>
<!-- Dietary Preference -->
<label for="dietaryPreference"
>Dietary Preference:
<select id="dietaryPreference" name="dietaryPreference" required>
<option value="">Select Preference</option>
<option value="Vegetarian">Vegetarian</option>
<option value="Non-Vegetarian">Non-Vegetarian</option>
<option value="Eggetarian">Eggetarian</option>
</select>
</label>
<!-- Family Profession -->
<label for="familyProfession"
>Family Profession (if any):
<input type="text" id="familyProfession" name="familyProfession" />
</label>
<!-- Marital Status, Spouse's Name, and Children -->
<label for="maritalStatus"
>Marital Status:
<select
id="maritalStatus"
name="maritalStatus"
onchange="toggleSpouseChildren()"
>
<option value="single">Single</option>
<option value="married">Married</option>
<option value="divorced">Divorced</option>
<option value="widowed">Widowed</option>
</select>
</label>
<div
id="spouseChildrenSection"
style="display: none"
class="flex-container"
>
<label for="spouseName"
>Spouse's Name:
<input type="text" id="spouseName" name="spouseName" />
</label>
<label for="numChildren"
>Number of Children:
<select
id="numChildren"
name="numChildren"
onchange="toggleBiologicalFather()"
>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</label>
</div>
<div class="adopted-children-container">
<label>Adopted Children:</label>
<div class="yes-no-container">
<label>
<input type="checkbox" name="adoptedChildren" value="yes" /> Yes
</label>
<label>
<input type="checkbox" name="adoptedChildren" value="no" /> No
</label>
</div>
</div>
<!-- Maternal Family Details -->
<fieldset>
<legend>Maternal Details</legend>
<label for="motherName"
>Mother's Name:
<input type="text" id="motherName" name="motherName" required />
</label>
<div class="inline-container">
<label for="mothersGothra"
>Mother's Gothra:
<input type="text" id="mothersGothra" name="mothersGothra" />
</label>
<label class="not-known-checkbox">
<input
type="checkbox"
id="mothersGothraNotKnown"
onchange="toggleNotKnown('mothersGothra')"
/>
Unknown
</label>
</div>
<div class="flex-container">
<label for="motherskuladevatha"
>Mother's Kuladevatha:
<input type="text" id="motherskuladevatha" name="motherskuladevatha"/>
</label>
<label class="not-known-checkbox">
<input
type="checkbox"
id="motherskuladevathaNotKnown"
onchange="toggleNotKnown('motherskuladevatha')"
/>
Unknown
</label>
</div>
<label for="motherSiblings"
>Mother's Siblings' Names:
<input
type="text"
id="motherSiblings"
name="motherSiblings"
placeholder="Enter names separated by commas"
/>
</label>
<label for="maternalGrandfatherName"
>Maternal Grandfather's Name:
<input
type="text"
id="maternalGrandfatherName"
name="maternalGrandfatherName"
/>
</label>
<label for="maternalGrandmotherName"
>Maternal Grandmother's Name:
<input
type="text"
id="maternalGrandmotherName"
name="maternalGrandmotherName"
/>
</label>
</fieldset>
<div id="biologicalFatherSection" style="display: none">
<label for="biologicalFatherName"
>Biological Father's Name:
<input
type="text"
id="biologicalFatherName"
name="biologicalFatherName"
/>
</label>
</div>
<!-- Paternal Family Details -->
<fieldset>
<legend>Paternal Details</legend>
<label for="fatherName"
>Father's Name:
<input type="text" id="fatherName" name="fatherName" required />
</label>
<div class="inline-container">
<label for="fathersGothra"
>Father's Gothra:
<input type="text" id="fathersGothra" name="fathersGothra" />
</label>
<label class="not-known-checkbox">
<input
type="checkbox"
id="fathersGothraNotKnown"
onchange="toggleNotKnown('fathersGothra')"
/>
Unknown
</label>
</div>
<div class="flex-container">
<label for="fatherskuladevatha"
>Father's Kuladevatha:
<input type="text" id="fatherskuladevatha" name="fatherskuladevatha"/>
</label>
<label class="not-known-checkbox">
<input
type="checkbox"
id="fatherskuladevathaNotKnown"
onchange="toggleNotKnown('fatherskuladevatha')"
/>
Unknown
</label>
</div>
<label for="fatherSiblings"
>Father's Siblings' Names:
<input
type="text"
id="fatherSiblings"
name="fatherSiblings"
placeholder="Enter names separated by commas"
/>
</label>
<label for="paternalGrandfatherName"
>Paternal Grandfather's Name:
<input
type="text"
id="paternalGrandfatherName"
name="paternalGrandfatherName"
/>
</label>
<label for="paternalGrandmotherName"
>Paternal Grandmother's Name:
<input
type="text"
id="paternalGrandmotherName"
name="paternalGrandmotherName"
/>
</label>
</fieldset>
<!-- Referred By -->
<label for="referredBy"
>Referred By: Member Name/ID (if any):
<input type="text" id="referredBy" name="referredBy" />
</label>
<!-- Buttons for Actions -->
<div class="buttons">
<input type="submit" value="Submit" />
<button type="reset">Reset</button>
<button id="viewDashboardButton">View Dashboard</button>
<button id="viewFamilyTreeButton">View Family Tree</button>
</div>
<div
class="dashboard-display"
id="dashboardDisplay"
style="display: none"
>
<h3>Dashboard</h3>
<p>[Family tree Dashboard will be displayed here]</p>
</div>
<div
class="family-tree-display"
id="familyTreeDisplay"
style="display: none"
>
<h3>Family Tree</h3>
<p>[Family tree will be displayed here]</p>
</div>
I am not an express guy, but is seems reasonable. I would start by send a POST using Postman (or an equivalent) to send a request directly without the front end. Verify that you are getting you request processed by your backend by logging the request to see it is getting handled. Next, verify the data is persisted to neo4j.
Two comments:
- You are going to want the driver created once and reuse it.
- You are creating your neo4j data in three separate transactions. You can combine this code into one session.run call.
1 Like