Skip to main content

Frontend Architecture

Architecture and design of the React frontend application. The same frontend is also loaded inside the mobile app (Expo WebView); see Mobile App.

Technology Stack​

  • React 18: UI library
  • Vite: Build tool and dev server
  • Redux Toolkit: State management
  • React Router: Routing
  • Axios: HTTP client
  • WebSocket: Real-time communication

Project Structure​

The frontend lives under Src/frontend/src/. Routes are split into plain (public/landing) and social (authenticated app):

src/
├── app/
│   ├── plain/              # Public / marketing pages
│   │   ├── landing/        # Landing page
│   │   ├── authentication/ # Sign-in, sign-up, forgot-pass, verify-email, impersonate
│   │   ├── contact/        # Contact form
│   │   ├── about/, team/, pricing/, documentation/, download/
│   │   ├── bellamy/        # Bellamy page
│   │   └── offline/       # Offline page
│   └── social/             # Authenticated social app
│       ├── feed/           # Home (stories, feeds), groups, albums, celebration, post-videos, videos
│       ├── profile/        # Profile (about, activity, feed, followers, following, connections, media, etc.)
│       ├── settings/       # Account, notification, privacy, messaging, ticket, close-account
│       ├── help/           # Help center
│       └── with-topbar/    # Main app shell with top bar
│           ├── feed/       # Post details
│           ├── blogs/      # Blog listing, blog detail
│           ├── hashtag/    # Hashtag page
│           ├── messaging/  # Chat, groups, video call
│           ├── notifications/
│           ├── posts/      # All posts
│           ├── chat/       # Chat
│           ├── search/
│           └── privacy-terms/
├── components/             # Reusable UI components
├── store/                  # Redux store (auth, theme, ui)
├── services/               # API services
├── hooks/                  # Custom hooks
├── utils/
└── assets/

Component Architecture​

App structure​

  • Plain: Landing, auth, contact, about — no auth required.
  • Social: Feed, profile, messaging, blogs, hashtags, notifications — behind login. with-topbar is the main layout (navbar + content).

State Management​

Redux Store Structure​

{
  auth: {
    user: {...},
    token: "...",
    isAuthenticated: true
  },
  posts: {
    feed: [...],
    userPosts: {...},
    currentPost: {...}
  },
  users: {
    currentUser: {...},
    friends: [...],
    searchResults: [...]
  },
  ui: {
    theme: "light",
    notifications: [...],
    modals: {...}
  }
}

API Integration​

Service Layer​

The backend uses controller-based routes (e.g. api/Post, api/Authentication). Example:

// services/api.js – align with backend routes
export const api = {
  auth: {
    login: (body) => axios.post('/api/Authentication/login', body),
    me: () => axios.get('/api/Authentication/me'),
    refresh: (body) => axios.post('/api/Authentication/refresh-token', body),
  },
  posts: {
    getFeed: (userId, params) => axios.get(`/api/Post/feed/home`, { params: { userId, ...params } }),
    create: (userId, formData) => axios.post(`/api/Post/users/${userId}`, formData),
    update: (id, data) => axios.put(`/api/Post/${id}`, data),
    delete: (id) => axios.delete(`/api/Post/${id}`),
  },
  // Comment: api/Comment; Chat: api/Chat; Story: api/Story; Friendship: api/Friendship; etc.
};

Real-time Features​

WebSocket Connection​

// hooks/useWebSocket.js
export function useWebSocket() {
  const [socket, setSocket] = useState(null);
  
  useEffect(() => {
    const ws = new WebSocket('ws://localhost:5000/ws');
    ws.onmessage = (event) => {
      const data = JSON.parse(event.data);
      // Handle real-time updates
    };
    setSocket(ws);
    return () => ws.close();
  }, []);
  
  return socket;
}

Routing​

Route Configuration​

Routes are organized by plain (e.g. /, /landing — marketing landing; /self-hosted-social-network redirects to /landing; /authentication/sign-in) and social (e.g. /feed/home, /profile/feed, /profile/user/:userId/feed, /messaging, /blogs, /hashtag/:hashtagName, /settings/account). Social routes are typically under a layout with top bar (with-topbar).

Performance Optimization​

Code Splitting​

const Profile = lazy(() => import('./pages/Profile'));
const Messages = lazy(() => import('./pages/Messages'));

Memoization​

const Post = memo(({ post }) => {
  // Component implementation
});

Virtual Scrolling​

For long lists, use virtual scrolling to improve performance.

Styling​

CSS Modules​

import styles from './Post.module.css';

function Post() {
  return <div className={styles.post}>...</div>;
}

Theme Support​

const theme = {
  light: {
    primary: '#1877f2',
    background: '#f0f2f5'
  },
  dark: {
    primary: '#1877f2',
    background: '#18191a'
  }
};

Next Steps​