🌐 Social Media App with Real-Time Chat and Post Feed (Spring Boot + React)

💡 What Is It?

This project is a full-stack Social Media Application where users can:

• Create personal or business profiles

• Post text updates, images, or videos

• Connect and interact with friends

• Chat with other users in real time

• Manage content visibility and privacy

It's built using Spring Boot for the backend and React.js for the frontend, incorporating features like JWT authentication, WebSocket real-time messaging, and responsive UI with Material UI.

---

🎯 Key Features

• 🔐 User Authentication: Register/Login with JWT-based secure sessions.

• 📝 News Feed: Users can create, update, delete, and view posts.

• 💬 Live Chat: WebSocket-based real-time chat using STOMP and SockJS.

• 📱 Responsive Design: UI adapts to desktop and mobile.

• 🧩 Modular Codebase: Component-based frontend and service-layered backend.

• 📸 Media Uploads (extensible): Designed to support file/image/video uploads.

• ⚙️ Admin-friendly setup: REST APIs documented via Swagger (if enabled).

---

🔧 Tech Stack

---

❗ Problems Faced and ✅ Solutions

1. JWT Conflicts Between Multiple UserDetailServices

Problem:
Spring Boot threw an error because both AuthService and UserService implemented UserDetailsService, and Spring couldn’t resolve which one to inject.

Solution:

• Marked the correct AuthService with @Primary annotation.

• Alternatively, used @Qualifier("authService") in the JWT filter to inject the appropriate service.

---

2. Deprecated Methods in JWT Library

Problem:
Methods like Jwts.parser() and signWith(SignatureAlgorithm, String) were deprecated in newer jjwt versions.

Solution:

• Updated the JWT signing code to use signWith(key, algorithm) with SecretKeySpec.

• Used Jwts.parserBuilder() instead of the deprecated parser.

---

3. Duplicate <Router> Error in React

Problem:
React app crashed due to <Router> being rendered inside another <Router>.

Solution:

• Ensured <BrowserRouter> is only declared once at the root level (App.jsx).

• All route components use Routes and Route correctly within that scope.

---

4. WebSocket STOMP Client Was Not Connecting

Problem:
Frontend was not able to connect to the /ws endpoint or receive messages.

Solution:

• Confirmed that WebSocket endpoint /ws was correctly registered in Spring Boot with SockJS.

• Allowed CORS in WebSocketConfig and ensured Spring Boot server was running at correct host/port.

• Used stompClient.connect() callback to manage post-connect subscriptions.

---

5. Material UI Styling & Responsiveness

Problem:
Raw React components lacked polish and responsiveness.

Solution:

• Replaced basic HTML inputs with Material UI <TextField>, <Button>, <Box>, etc.

• Used MUI’s sx prop and breakpoints to make chat and post UIs responsive.

---

6. Frontend Fails on combineReducers()

Problem:
Store does not have a valid reducer error was thrown when setting up Redux.

Solution:

• Verified that all reducers were functions and imported correctly.

• Ensured combineReducers({ key: reducer }) was returning a valid object.

---

📌 Learnings and Best Practices

• Prefer @Primary or @Qualifier to avoid ambiguity in Spring's auto-wiring.

• Keep WebSocket logic modular to support future chat features like private messaging or typing indicators.

• Always ensure CORS and endpoint paths are aligned across frontend and backend.

• Avoid deeply nested routers in React. Keep your routing hierarchy clean.

• Separate chat components (ChatRoom, MessageInput, MessageBubble) for maintainability.

---

🚀 What's Next?

Planned enhancements:

• 🔒 Private 1-on-1 Chat

• 🖼️ Media Upload and Preview

• 🧵 Hashtags and Topic Trends

• 🔍 Post search/filter

• 🧠 AI moderation or summarization of chats and posts (using OpenAI)

---

🧠 Conclusion

This Social Media App showcases how a full-stack developer can create a scalable, interactive social platform using Spring Boot and React. From authentication to real-time chat, it includes key modern app features and solves common development issues with practical, production-ready solutions.