Index: reactapp/src/App.css
===================================================================
--- reactapp/src/App.css	(revision 3a44163af6d587748f82a3fedf08f1a492e83220)
+++ reactapp/src/App.css	(revision 2998dc401de4529373b17f60fbfea3c66b65dea0)
@@ -2,37 +2,2 @@
   text-align: center;
 }
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
Index: reactapp/src/App.js
===================================================================
--- reactapp/src/App.js	(revision 3a44163af6d587748f82a3fedf08f1a492e83220)
+++ reactapp/src/App.js	(revision 2998dc401de4529373b17f60fbfea3c66b65dea0)
@@ -4,13 +4,5 @@
   return (
     <div>
-      <h1>Main App Page</h1>
-      <nav
-        style={{
-          borderBottom: "solid 1px",
-          paddingBottom: "1rem",
-        }}
-      >
-        <Link to="/professor">Professor</Link>
-      </nav>
+      <h1>profesori.mk</h1>
       <Outlet />
     </div>
Index: reactapp/src/Components/OpinionTree.js
===================================================================
--- reactapp/src/Components/OpinionTree.js	(revision 3a44163af6d587748f82a3fedf08f1a492e83220)
+++ reactapp/src/Components/OpinionTree.js	(revision 2998dc401de4529373b17f60fbfea3c66b65dea0)
@@ -1,9 +1,14 @@
 function OpinionTree({ professor }) {
-  function displayChildPosts(post) {
-    if (post == null) return;
+  var renderedOpinionIds = [];
+  var postCount; // za da ne go pokazuva ispod postot
+
+  function displayChildPosts(child) {
+    if (child == null) return;
+    postCount = renderedOpinionIds.push(child.postId);
     return (
-      <div key={post.postId}>
-        <p>Содржина: {post.content}</p>
-        {post.children.map((child) => displayChildPosts(child))}
+      <div key={child.postId}>
+        <p>{child.author.username} реплицирал</p>
+        <p>Содржина: {child.content}</p>
+        {child.children.map((childOfChild) => displayChildPosts(childOfChild))}
       </div>
     );
@@ -13,10 +18,13 @@
     <div className="opinionTree">
       {professor.relatedOpinions.map((opinion) => {
-        if (opinion.hasOwnProperty("title")) {
+        if (!renderedOpinionIds.includes(opinion.postId)) {
+          postCount = renderedOpinionIds.push(opinion.postId);
           return (
             <div key={opinion.postId}>
+              <p>{opinion.author.username} напишал</p>
               <p>Наслов: {opinion.title}</p>
               <p>Содржина: {opinion.content}</p>
               {opinion.children.map((child) => displayChildPosts(child))}
+              <hr />
             </div>
           );
Index: reactapp/src/Pages/Professor.js
===================================================================
--- reactapp/src/Pages/Professor.js	(revision 3a44163af6d587748f82a3fedf08f1a492e83220)
+++ reactapp/src/Pages/Professor.js	(revision 2998dc401de4529373b17f60fbfea3c66b65dea0)
@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from "react";
 import { Outlet, useParams } from "react-router-dom";
+import JSOG from "jsog";
 import OpinionTree from "../Components/OpinionTree";
 
@@ -15,6 +16,8 @@
       try {
         const response = await fetch(url);
-        const json = await response.json();
-        setProfessor(json);
+        var cyclicGraph = await response.json();
+        var jsogStructure = JSOG.encode(cyclicGraph); // has { '@ref': 'ID' } links instead of cycles
+        cyclicGraph = JSOG.decode(jsogStructure);
+        setProfessor(cyclicGraph);
         setLoaded(true);
       } catch (error) {
