The frontend of the social media platform is a responsive single-page application that allows users to interact with the backend API to create profiles, publish posts, follow other users, and engage in real-time chat. The frontend is built using Angular 22, a popular TypeScript framework for building complex user interfaces. Navigation is managed by Angular Router with lazy-loaded routes and route guards, while signal-based stores (SocialPostsStore, SocialProfileStore, SocialChatStore, SocialNotificationsStore) keep the UI in sync with the backend API. You can see a description of the backend here.

The user interface is modern, clean, and intuitive, with Angular Material providing a consistent look and feel across all pages. Feature-level SCSS is kept minimal per project conventions. On the home page, users see an infinite-scrolling feed of posts and can create new posts with text and images. Search covers users and posts with pagination. Profile pages show avatar, name, friends and post counts, with options to edit profile details, send friend requests, and start a chat. Form validation on auth and profile screens uses Angular Reactive Forms; the authenticated user profile is cached in localStorage encrypted with CryptoJS.

Key real-time features include WebSocket-based chat for private messaging and a notification WebSocket that updates the unread badge in the navbar. JWT secures login, signup, chat, notifications, and profile editing; protected routes use authGuard with data.authJWT: true. Overall, the platform provides a powerful, modern, and intuitive interface for seamless interaction with the Django REST API—profiles, posts, friends, trends, search, chat, and notifications. Live demo: angular.karnaukh-webdev.com/social/home.