1

frontend/src/components/NavBarItem.tsx

@@ -1,6 +1,5 @@
-import React, {useEffect, useRef} from 'react'
+import React, {useEffect, useRef, useState} from 'react'
 import Link from 'next/link'
-import { useState } from 'react'
 import { mdiChevronUp, mdiChevronDown } from '@mdi/js'
 import BaseDivider from './BaseDivider'
 import BaseIcon from './BaseIcon'
@@ -129,4 +128,4 @@ export default function NavBarItem({ item }: Props) {
   }
 
   return <div className={componentClass} ref={excludedRef}>{NavBarItemComponentContents}</div>
-}
+}

frontend/src/components/Posts/SocialPostCard.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { mdiHeart, mdiHeartOutline, mdiChatOutline, mdiSendOutline, mdiBookmarkOutline } from '@mdi/js';
+import BaseIcon from '../BaseIcon';
+import UserAvatar from '../UserAvatar';
+import dataFormatter from '../../helpers/dataFormatter';
+import Link from 'next/link';
+
+type Props = {
+  post: any;
+  onLike?: (id: string) => void;
+  onComment?: (id: string) => void;
+};
+
+export default function SocialPostCard({ post, onLike, onComment }: Props) {
+  const imageUrl = post.images && post.images[0] ? post.images[0].publicUrl : null;
+  const authorName = post.author ? `${post.author.firstName} ${post.author.lastName}` : 'Anonymous';
+  const authorAvatar = post.author ? post.author.avatar : null;
+
+  return (
+    <div className="bg-white dark:bg-[#1a1d23] border border-gray-200 dark:border-gray-800 rounded-2xl overflow-hidden mb-6 max-w-lg mx-auto shadow-sm">
+      {/* Header */}
+      <div className="flex items-center justify-between p-4">
+        <div className="flex items-center space-x-3">
+          <UserAvatar username={authorName} image={authorAvatar} className="w-10 h-10" />
+          <div>
+            <p className="font-bold text-sm dark:text-white">{authorName}</p>
+            {post.location_name && <p className="text-xs text-gray-500 dark:text-gray-400">{post.location_name}</p>}
+          </div>
+        </div>
+        <button className="text-gray-500 dark:text-gray-400">
+          <span className="text-xl font-bold">···</span>
+        </button>
+      </div>
+
+      {/* Image/Video */}
+      <div className="aspect-square bg-gray-100 dark:bg-gray-900 flex items-center justify-center overflow-hidden">
+        {imageUrl ? (
+          <img src={imageUrl} alt="Post content" className="w-full h-full object-cover" />
+        ) : (
+          <div className="text-gray-400 italic">No media</div>
+        )}
+      </div>
+
+      {/* Interactions */}
+      <div className="p-4 space-y-3">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center space-x-4">
+            <button onClick={() => onLike && onLike(post.id)} className="hover:scale-110 transition-transform">
+              <BaseIcon path={mdiHeartOutline} size={28} className="dark:text-white" />
+            </button>
+            <button onClick={() => onComment && onComment(post.id)} className="hover:scale-110 transition-transform">
+              <BaseIcon path={mdiChatOutline} size={26} className="dark:text-white" />
+            </button>
+            <button className="hover:scale-110 transition-transform">
+              <BaseIcon path={mdiSendOutline} size={26} className="dark:text-white" />
+            </button>
+          </div>
+          <button className="hover:scale-110 transition-transform">
+            <BaseIcon path={mdiBookmarkOutline} size={26} className="dark:text-white" />
+          </button>
+        </div>
+
+        {/* Likes Count */}
+        <p className="text-sm font-bold dark:text-white">
+          {post.post_reactions_count || 0} likes
+        </p>
+
+        {/* Caption */}
+        <div className="text-sm space-x-2">
+          <span className="font-bold dark:text-white">{authorName}</span>
+          <span className="dark:text-gray-300">{post.caption}</span>
+        </div>
+
+        {/* View Comments */}
+        {post.post_comments_count > 0 && (
+          <button className="text-sm text-gray-500 dark:text-gray-400">
+            View all {post.post_comments_count} comments
+          </button>
+        )}
+
+        {/* Time */}
+        <p className="text-[10px] text-gray-400 uppercase tracking-wider">
+          {dataFormatter.dateTimeFormatter(post.published_at)}
+        </p>
+      </div>
+    </div>
+  );
+}

frontend/src/layouts/Authenticated.tsx

@@ -1,5 +1,4 @@
-import React, { ReactNode, useEffect } from 'react'
-import { useState } from 'react'
+import React, { ReactNode, useEffect, useState } from 'react'
 import jwt from 'jsonwebtoken';
 import { mdiForwardburger, mdiBackburger, mdiMenu } from '@mdi/js'
 import menuAside from '../menuAside'
@@ -126,4 +125,4 @@ export default function LayoutAuthenticated({
       </div>
     </div>
   )
-}
+}

frontend/src/menuAside.ts

@@ -2,6 +2,11 @@ import * as icon from '@mdi/js';
 import { MenuAsideItem } from './interfaces'
 
 const menuAside: MenuAsideItem[] = [
+  {
+    href: '/feed',
+    icon: icon.mdiHomeOutline,
+    label: 'Feed',
+  },
   {
     href: '/dashboard',
     icon: icon.mdiViewDashboardOutline,
@@ -232,4 +237,4 @@ const menuAside: MenuAsideItem[] = [
   },
 ]
 
-export default menuAside
+export default menuAside

frontend/src/pages/feed.tsx

@@ -0,0 +1,61 @@
+import React, { useEffect } from 'react';
+import type { ReactElement } from 'react';
+import Head from 'next/head';
+import LayoutAuthenticated from '../layouts/Authenticated';
+import SectionMain from '../components/SectionMain';
+import { getPageTitle } from '../config';
+import { useAppDispatch, useAppSelector } from '../stores/hooks';
+import { fetch as fetchPosts } from '../stores/posts/postsSlice';
+import SocialPostCard from '../components/Posts/SocialPostCard';
+import LoadingSpinner from '../components/LoadingSpinner';
+
+export default function FeedPage() {
+    const dispatch = useAppDispatch();
+    const { posts, loading } = useAppSelector((state) => state.posts);
+
+    useEffect(() => {
+        dispatch(fetchPosts({ page: 1, limit: 10 }));
+    }, [dispatch]);
+
+    return (
+        <>
+            <Head>
+                <title>{getPageTitle('Feed')}</title>
+            </Head>
+            <SectionMain>
+                <div className="max-w-2xl mx-auto py-8">
+                    <h1 className="text-3xl font-black mb-8 dark:text-white tracking-tight px-4">Your Feed</h1>
+                    
+                    {loading && (
+                        <div className="flex justify-center py-20">
+                            <LoadingSpinner />
+                        </div>
+                    )}
+
+                    {!loading && posts && Array.isArray(posts) && posts.length > 0 && (
+                        <div className="space-y-4">
+                            {posts.map((post: any) => (
+                                <SocialPostCard 
+                                    key={post.id} 
+                                    post={post} 
+                                    onLike={(id) => console.log('Like', id)}
+                                    onComment={(id) => console.log('Comment', id)}
+                                />
+                            ))}
+                        </div>
+                    )}
+
+                    {!loading && (!posts || (Array.isArray(posts) && posts.length === 0)) && (
+                        <div className="text-center py-20 bg-gray-50 dark:bg-gray-800/50 rounded-3xl border border-dashed border-gray-300 dark:border-gray-700 mx-4">
+                            <p className="text-gray-500 dark:text-gray-400">No posts yet. Be the first to share something!</p>
+                        </div>
+                    )}
+                </div>
+            </SectionMain>
+        </>
+    );
+}
+
+FeedPage.getLayout = function getLayout(page: ReactElement) {
+    return <LayoutAuthenticated>{page}</LayoutAuthenticated>;
+};

frontend/src/pages/index.tsx

@@ -1,166 +1,172 @@
-
 import React, { useEffect, useState } from 'react';
 import type { ReactElement } from 'react';
 import Head from 'next/head';
 import Link from 'next/link';
 import BaseButton from '../components/BaseButton';
-import CardBox from '../components/CardBox';
 import SectionFullScreen from '../components/SectionFullScreen';
 import LayoutGuest from '../layouts/Guest';
-import BaseDivider from '../components/BaseDivider';
-import BaseButtons from '../components/BaseButtons';
 import { getPageTitle } from '../config';
 import { useAppSelector } from '../stores/hooks';
-import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
-import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
+import { getPexelsImage } from '../helpers/pexels';
+import BaseIcon from '../components/BaseIcon';
+import { mdiInstagram, mdiLightningBolt, mdiEarth, mdiAccountGroup } from '@mdi/js';
 
+export default function LandingPage() {
+    const [illustrationImage, setIllustrationImage] = useState<any>(null);
+    const { currentUser } = useAppSelector((state) => state.auth);
 
-export default function Starter() {
-    const [illustrationImage, setIllustrationImage] = useState({
-        src: undefined,
-        photographer: undefined,
-        photographer_url: undefined,
-    })
-    const [illustrationVideo, setIllustrationVideo] = useState({video_files: []})
-    const [contentType, setContentType] = useState('image');
-    const [contentPosition, setContentPosition] = useState('left');
-    const textColor = useAppSelector((state) => state.style.linkColor);
-
-    const title = 'Ultra Sosyal'
-
-    // Fetch Pexels image/video
     useEffect(() => {
         async function fetchData() {
             const image = await getPexelsImage();
-            const video = await getPexelsVideo();
             setIllustrationImage(image);
-            setIllustrationVideo(video);
         }
         fetchData();
     }, []);
 
-    const imageBlock = (image) => (
-        <div
-            className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'
-            style={{
-                backgroundImage: `${
-                    image
-                        ? `url(${image?.src?.original})`
-                        : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
-                }`,
-                backgroundSize: 'cover',
-                backgroundPosition: 'left center',
-                backgroundRepeat: 'no-repeat',
-            }}
-        >
-            <div className='flex justify-center w-full bg-blue-300/20'>
-                <a
-                    className='text-[8px]'
-                    href={image?.photographer_url}
-                    target='_blank'
-                    rel='noreferrer'
-                >
-                    Photo by {image?.photographer} on Pexels
-                </a>
-            </div>
+    return (
+        <div className="bg-[#0b0e14] min-h-screen text-white overflow-x-hidden font-sans">
+            <Head>
+                <title>{getPageTitle('Ultra Sosyal - Connect. Share. Shine.')}</title>
+            </Head>
+
+            {/* Neon Glow Accents */}
+            <div className="fixed top-[-10%] left-[-10%] w-[40%] h-[40%] bg-blue-600/20 blur-[120px] rounded-full pointer-events-none"></div>
+            <div className="fixed bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-purple-600/20 blur-[120px] rounded-full pointer-events-none"></div>
+
+            <SectionFullScreen bg="void">
+                <div className="container mx-auto px-6 py-12 flex flex-col items-center relative z-10">
+                    {/* Header/Nav */}
+                    <nav className="w-full flex justify-between items-center mb-16">
+                        <div className="flex items-center space-x-2">
+                            <div className="w-10 h-10 bg-gradient-to-tr from-blue-500 to-purple-600 rounded-xl flex items-center justify-center shadow-lg shadow-blue-500/20">
+                                <BaseIcon path={mdiInstagram} size={24} className="text-white" />
+                            </div>
+                            <span className="text-2xl font-black tracking-tighter bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-400">
+                                ULTRA SOSYAL
+                            </span>
+                        </div>
+                        <div className="space-x-4">
+                            {!currentUser ? (
+                                <>
+                                    <Link href="/login" className="px-6 py-2 rounded-full font-medium hover:text-blue-400 transition-colors">
+                                        Login
+                                    </Link>
+                                    <Link href="/register" className="px-6 py-2 bg-gradient-to-r from-blue-600 to-purple-600 rounded-full font-bold shadow-lg shadow-blue-600/20 hover:scale-105 transition-transform">
+                                        Join Now
+                                    </Link>
+                                </>
+                            ) : (
+                                <Link href="/feed" className="px-6 py-2 bg-gradient-to-r from-blue-600 to-purple-600 rounded-full font-bold shadow-lg shadow-blue-600/20 hover:scale-105 transition-transform">
+                                    Go to Feed
+                                </Link>
+                            )}
+                        </div>
+                    </nav>
+
+                    {/* Hero Section */}
+                    <div className="flex flex-col lg:flex-row items-center justify-between w-full gap-12">
+                        <div className="lg:w-1/2 space-y-8 text-center lg:text-left">
+                            <div className="inline-flex items-center space-x-2 px-3 py-1 bg-blue-500/10 border border-blue-500/20 rounded-full text-blue-400 text-sm font-bold animate-pulse">
+                                <BaseIcon path={mdiLightningBolt} size={14} />
+                                <span>THE NEXT GENERATION OF SOCIAL</span>
+                            </div>
+                            <h1 className="text-5xl lg:text-7xl font-black leading-tight tracking-tight">
+                                Share your <br />
+                                <span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 via-purple-500 to-pink-500">
+                                    Digital Soul.
+                                </span>
+                            </h1>
+                            <p className="text-lg text-gray-400 max-w-xl mx-auto lg:mx-0">
+                                Experience a borderless world of connection. Posts, Stories, Reels, and real-time interaction, all in a stunning neon aesthetic.
+                            </p>
+                            <div className="flex flex-col sm:flex-row items-center justify-center lg:justify-start space-y-4 sm:space-y-0 sm:space-x-4">
+                                <BaseButton
+                                    href={currentUser ? "/feed" : "/register"}
+                                    label={currentUser ? "Explore Feed" : "Get Started - It's Free"}
+                                    color="info"
+                                    className="px-8 py-4 rounded-2xl font-black text-lg bg-blue-600 hover:bg-blue-700 shadow-2xl shadow-blue-600/40"
+                                />
+                                <div className="flex -space-x-3">
+                                    {[1, 2, 3, 4].map((i) => (
+                                        <div key={i} className="w-10 h-10 rounded-full border-2 border-[#0b0e14] bg-gray-800 flex items-center justify-center text-[10px] font-bold">
+                                            U{i}
+                                        </div>
+                                    ))}
+                                    <div className="pl-6 text-sm text-gray-500 font-medium">
+                                        Joined by 20k+ creators
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        {/* Interactive Card Mockup */}
+                        <div className="lg:w-1/2 relative">
+                            <div className="relative z-10 w-[300px] h-[500px] bg-gray-900 border border-white/10 rounded-[3rem] p-4 shadow-2xl rotate-2 hover:rotate-0 transition-transform duration-500 overflow-hidden">
+                                <div className="absolute inset-0 bg-gradient-to-b from-transparent via-black/20 to-black/80"></div>
+                                {illustrationImage && (
+                                    <img 
+                                        src={illustrationImage.src?.large} 
+                                        alt="Mockup" 
+                                        className="absolute inset-0 w-full h-full object-cover opacity-60"
+                                    />
+                                )}
+                                <div className="relative h-full flex flex-col justify-end space-y-4 p-4">
+                                    <div className="flex items-center space-x-2">
+                                        <div className="w-8 h-8 rounded-full bg-blue-500"></div>
+                                        <div className="flex-1">
+                                            <div className="h-2 w-20 bg-white/40 rounded"></div>
+                                            <div className="h-1.5 w-12 bg-white/20 rounded mt-1"></div>
+                                        </div>
+                                    </div>
+                                    <div className="space-y-2">
+                                        <div className="h-3 w-full bg-white/10 rounded"></div>
+                                        <div className="h-3 w-2/3 bg-white/10 rounded"></div>
+                                    </div>
+                                    <div className="flex justify-between items-center text-white/60">
+                                        <div className="flex space-x-4">
+                                            <BaseIcon path={mdiInstagram} size={20} />
+                                            <div className="w-5 h-5 border-2 border-white/60 rounded"></div>
+                                        </div>
+                                        <div className="w-5 h-5 border-2 border-white/60 rounded-full"></div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-blue-600/30 blur-[100px] rounded-full"></div>
+                        </div>
+                    </div>
+
+                    {/* Features Grid */}
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-32 w-full">
+                        {[
+                            { icon: mdiEarth, title: "Global Reach", desc: "Connect with people from every corner of the world instantly." },
+                            { icon: mdiLightningBolt, title: "Hyper Fast", desc: "Built for speed. Real-time notifications and instant uploads." },
+                            { icon: mdiAccountGroup, title: "Community Driven", desc: "Groups, forums, and shared collections to grow together." }
+                        ].map((f, i) => (
+                            <div key={i} className="p-8 bg-white/5 border border-white/10 rounded-3xl hover:bg-white/10 transition-colors">
+                                <div className="w-12 h-12 bg-blue-500/20 rounded-2xl flex items-center justify-center mb-6">
+                                    <BaseIcon path={f.icon} size={24} className="text-blue-400" />
+                                </div>
+                                <h3 className="text-xl font-bold mb-2">{f.title}</h3>
+                                <p className="text-gray-400">{f.desc}</p>
+                            </div>
+                        ))}
+                    </div>
+
+                    {/* Footer */}
+                    <footer className="mt-32 w-full pt-12 border-t border-white/10 flex flex-col md:flex-row justify-between items-center text-gray-500 text-sm">
+                        <p>© 2026 ULTRA SOSYAL. Built for the bold.</p>
+                        <div className="flex space-x-6 mt-4 md:mt-0">
+                            <Link href="/privacy-policy" className="hover:text-white transition-colors">Privacy</Link>
+                            <Link href="/terms-of-use" className="hover:text-white transition-colors">Terms</Link>
+                            <a href="mailto:ultrasosyal.destek@gmail.com" className="hover:text-white transition-colors">Support</a>
+                        </div>
+                    </footer>
+                </div>
+            </SectionFullScreen>
         </div>
     );
-
-    const videoBlock = (video) => {
-        if (video?.video_files?.length > 0) {
-            return (
-                <div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
-                    <video
-                        className='absolute top-0 left-0 w-full h-full object-cover'
-                        autoPlay
-                        loop
-                        muted
-                    >
-                        <source src={video?.video_files[0]?.link} type='video/mp4'/>
-                        Your browser does not support the video tag.
-                    </video>
-                    <div className='flex justify-center w-full bg-blue-300/20 z-10'>
-                        <a
-                            className='text-[8px]'
-                            href={video?.user?.url}
-                            target='_blank'
-                            rel='noreferrer'
-                        >
-                            Video by {video.user.name} on Pexels
-                        </a>
-                    </div>
-                </div>)
-        }
-    };
-
-  return (
-      <div
-          style={
-              contentPosition === 'background'
-                  ? {
-                      backgroundImage: `${
-                          illustrationImage
-                              ? `url(${illustrationImage.src?.original})`
-                              : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
-                      }`,
-                      backgroundSize: 'cover',
-                      backgroundPosition: 'left center',
-                      backgroundRepeat: 'no-repeat',
-                  }
-                  : {}
-          }
-      >
-      <Head>
-        <title>{getPageTitle('Starter Page')}</title>
-      </Head>
-
-      <SectionFullScreen bg='violet'>
-      <div
-          className={`flex ${
-              contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'
-          } min-h-screen w-full`}
-      >
-          {contentType === 'image' && contentPosition !== 'background'
-              ? imageBlock(illustrationImage)
-              : null}
-          {contentType === 'video' && contentPosition !== 'background'
-              ? videoBlock(illustrationVideo)
-              : null}
-          <div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
-        <CardBox className='w-full md:w-3/5 lg:w-2/3'>
-            <CardBoxComponentTitle title="Welcome to your Ultra Sosyal app!"/>
-        
-            <div className="space-y-3">
-                <p className='text-center '>This is a React.js/Node.js app generated by the <a className={`${textColor}`} href="https://flatlogic.com/generator">Flatlogic Web App Generator</a></p>
-                <p className='text-center '>For guides and documentation please check
-                    your local README.md and the <a className={`${textColor}`} href="https://flatlogic.com/documentation">Flatlogic documentation</a></p>
-            </div>
-        
-            <BaseButtons>
-                <BaseButton
-                    href='/login'
-                    label='Login'
-                    color='info'
-                    className='w-full'
-                />
-
-            </BaseButtons>
-        </CardBox>
-        </div>
-      </div>
-      </SectionFullScreen>
-      <div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
-        <p className='py-6 text-sm'>© 2026 <span>{title}</span>. All rights reserved</p>
-        <Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
-            Privacy Policy
-        </Link>
-      </div>
-
-    </div>
-  );
 }
 
-Starter.getLayout = function getLayout(page: ReactElement) {
-  return <LayoutGuest>{page}</LayoutGuest>;
-};
-
+LandingPage.getLayout = function getLayout(page: ReactElement) {
+    return <LayoutGuest>{page}</LayoutGuest>;
+};