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, post messages, follow other users, and engage in real-time chat. The frontend is built using Vue.js, a popular JavaScript framework that simplifies the development of complex user interfaces. Navigation is managed by Vue Router, allowing seamless transitions between pages, while Vuex handles state management to ensure the frontend stays in sync with the backend API. You can see a description of the backend here.

The user interface is modern, clean, and intuitive, with Vuetify providing a consistent look and feel across all pages. Custom CSS adds additional styling and interactivity. On the home page, users can see recent posts from users they follow and search for other users by username to follow them. The post creation page allows users to enter a title, content, and image, with form validation implemented using Vuelidate. The user profile page displays profile information such as username, email, and follower count, with options to edit profile details.

One key feature of the platform is its WebSocket-based chat, enabling users to communicate in real-time. Additionally, JWT is used for authentication, ensuring secure access to user-specific resources and actions. Overall, the platform provides a powerful, modern, and intuitive interface for seamless interaction with the backend API, facilitating profile creation, messaging, following, and chat.