data display on clientSide

backend/seed.js

@@ -11,56 +11,54 @@ async function main() {
   await prisma.post.deleteMany();
   await prisma.profile.deleteMany();
 
-
 // Create 5 users
   const users = [];
-  for (let i = 0; i < 5; i++) {
+ for (let i = 0; i < 5; i++) {
-  const user = await prisma.user.create({
+    const user = await prisma.user.create({
       data: {
-      userId: faker.string.uuid(),
+        userId: faker.string.uuid(),
-      name: faker.person.fullName(),
+        name: faker.person.fullName(),
-      username: faker.internet.username(),
+        username: faker.internet.username(),
-      email: faker.internet.email(),
+        email: faker.internet.email(),
-      avatar: faker.image.avatar(),
+        avatar: faker.image.avatar(),
-      password: faker.internet.password(),
+        password: faker.internet.password(),
-      birthdate: faker.date.birthdate(),
+        birthdate: faker.date.birthdate(),
-      registeredAt: faker.date.past(),
+        registeredAt: faker.date.past(),
-      role: i === 0 ? 'ADMIN' : i === 1 ? 'EDITOR' : 'USER',
+        role: i === 0 ? 'ADMIN' : i === 1 ? 'EDITOR' : 'USER',
       },
-  });
+    });
+
     users.push(user);
     console.log(`User created: ${user.username}`);
   }
 
-
-  // Each user creates 2-4 posts
   for (const user of users) {
-  const postCount = faker.number.int({ min: 2, max: 4 });
+    const postCount = faker.number.int({ min: 2, max: 4 });
-  for (let i = 0; i < postCount; i++) {
+    for (let i = 0; i < postCount; i++) {
       const post = await prisma.post.create({
-      data: {
+        data: {
           title: faker.lorem.sentence(),
           content: faker.lorem.paragraphs(3),
           published: faker.datatype.boolean(),
           authorId: user.id,
-      },
+        },
       });
-      console.log(`Created post: ${post.title}`);
+      console.log(`Post created: ${post.title}`);
-  }
+    }
   }
 
-  for (const user of users){
+  for (const user of users) {
-      const profile = await prisma.profile.create({
+    const profile = await prisma.profile.create({
       data: {
-          bio: faker.person.bio(),
+        bio: faker.person.bio(),
-          avatar: faker.image.avatar(),
+        avatar: faker.image.avatar(),
-          //userId: user.id,
+        //userId: user.id,
-          userId: user.userId,
+        userId: user.userId,
       },
-  });
+    });
-  console.log(`Profile created for user: ${user.username}, Bio: ${profile.bio}`);
+    console.log(`Profile created for user: ${user.username}, Bio: ${profile.bio}`);
   }
-
+  
 }
 
 main()

frontend/src/main.js

@@ -16,19 +16,27 @@ async function fetchAndDisplayData() {
     dataContainer.textContent = 'No data found';
     return;
     }
-
+    
     // Create HTML for the data
     const html = `
         <ul>
             ${data.map(item => `
-                <li>
+        <li>
-                    <h2>${item.name}</h2>
+            <h2>${item.name}</h2>
-                    <strong>Role: </strong>${item.role}<br>
+            <strong>Role:</strong> ${item.role}<br>
-                    <strong>Email: </strong>${item.email}<br>
+            <strong>Email:</strong> ${item.email}<br>
-                </li>`
+            <strong>Username:</strong> ${item.username}<br>
-            ).join('')}
+            <strong>UUID:</strong> ${item.userId}<br>
-        </ul>
+            <strong>Avatar:</strong>${item.avatar}<br>
-    `
+            <strong>Initial Password:</strong> ${item.password}<br>
+            <strong>Birthdate:</strong> ${new Date(item.birthdate).toDateString()}<br>
+            <strong>Profile Bio:</strong> ${item.profile?.bio || 'N/A'}<br><br>
+            <ul>
+            </ul>
+        </li>
+    `).join('')}
+  </ul>
+`
     dataContainer.innerHTML = html;
 
     } catch (error) {