A full-stack social blogging platform that combines content creation with social networking features. Built with Angular 20 and Spring Boot 3.5, this platform enables users to create and share blog posts, interact through likes and comments, follow other users, and communicate in real-time via WebSocket-powered notifications and chat.
This platform creates an engaging environment where writers and readers can connect and interact. It goes beyond traditional blogging by integrating social features, real-time communication, and comprehensive user interaction capabilities, similar to modern social media platforms like Medium or Dev.to.
- Angular: 20.3.1 - Modern web framework with standalone components
- TypeScript: 5.8.0 - Type-safe development and enhanced IDE support
- RxJS: 7.8.0 - Reactive programming and asynchronous data streams
- Zone.js: 0.15.0 - Execution context for asynchronous operations
- Angular Material: 20.2.4 - Material Design component library
- Angular CDK: 20.2.4 - Component Development Kit for custom components
- Font Awesome: 7.0.1 - Comprehensive icon library with SVG support
- @fortawesome/angular-fontawesome: 3.0.0
- @fortawesome/fontawesome-svg-core: 7.1.0
- @fortawesome/free-solid-svg-icons: 7.0.1
- @fortawesome/free-regular-svg-icons: 7.1.0
- Lucide Angular: 0.548.0 - Modern, lightweight icon library
- SCSS - Advanced CSS preprocessor with variables, mixins, and nesting
- Quill.js: 2.0.3 - WYSIWYG rich text editor for blog content
- ngx-quill: 28.0.2 - Angular wrapper for Quill
- Editor.js: 2.31.0 - Block-style editor with modular architecture
- @stomp/ng2-stompjs: 8.0.0 - STOMP protocol client for Angular
- @stomp/rx-stomp: 2.2.0 - RxJS integration for STOMP
- @stomp/stompjs: 7.2.1 - JavaScript STOMP client
- SockJS Client: 1.6.1 - WebSocket emulation library
- Angular SSR: 20.3.2 - Server-side rendering support
- Express: 5.1.0 - Web server for SSR
- Angular CLI: 20.3.3 - Command-line interface for Angular
- Angular Build: 20.1.6 - Build system powered by Vite
- TypeScript Compiler: 5.8.0 - TypeScript compilation
- Spring Boot: 3.5.6 - Enterprise Java framework
- Java: 17 - LTS version with modern features
- Maven: 3.9.3 - Build automation and dependency management
- Spring Boot Starter Web - RESTful web services
- Spring Boot Starter Validation - Bean validation with Hibernate Validator
- SpringDoc OpenAPI: 2.8.14 - API documentation (Swagger UI)
- PostgreSQL: 18 - Advanced relational database
- PostgreSQL JDBC Driver - Database connectivity
- Spring Boot Starter Data JPA - Java Persistence API
- Hibernate ORM: 6.6+ - Object-relational mapping framework
- Flyway Core - Database migration management
- Flyway PostgreSQL - PostgreSQL-specific migrations
- Redis: latest - In-memory data structure store
- Spring Data Redis: 3.2.0 - Redis integration for Spring
- Jedis: 5.1.2 - Redis Java client
- Spring Boot Starter Security - Authentication and authorization
- JWT (JJWT): 0.11.5 - JSON Web Token implementation
- jjwt-api: 0.11.5 - JWT API
- jjwt-impl: 0.11.5 - JWT implementation
- jjwt-jackson: 0.11.5 - JWT Jackson integration
- BCrypt - Password hashing (via Spring Security)
- Spring Boot Starter WebSocket - WebSocket support
- STOMP Protocol - Simple Text Oriented Messaging Protocol
- SockJS - WebSocket fallback options
- Jackson Datatype JSR310: 2.20.1 - Java 8 date/time support
- Jackson Datatype Hibernate5: 2.20.1 - Hibernate lazy loading support
- Lombok: 1.18.32 - Boilerplate code reduction
- Embedded Tomcat - Application server (via Spring Boot)
- JUnit Jupiter: 5.9.2 - Unit testing framework
- REST Assured: 5.3.1 - REST API testing
- Spring Boot Starter Test - Testing utilities and assertions
- Docker - Container platform
- Docker Compose: 3.9 - Multi-container orchestration
- Nginx - Web server for frontend (production)
- Eclipse Temurin: 17-jdk - OpenJDK distribution
- PostgreSQL: 18 - Primary database with health checks
- Redis: latest - Caching layer with health checks
- Maven: 3.9.3-eclipse-temurin-17 - Backend build
- Node.js: 20+ - Frontend build and development
- Multi-stage Docker Builds - Optimized container images
Frontend (Angular) ←→ Backend (Spring Boot) ←→ Database (PostgreSQL)
Port: 4200 Port: 8080 Port: 5432
- UI Components - REST API - Users
- WebSocket Client - WebSocket Server - Posts
- State Management - Security Layer - Comments
- Rich Text Editor - Business Logic - Notifications
- Data Access - Messages
↓
Redis Cache
Port: 6379
- User Caching
- Rich Text Editor: Create blog posts with Quill.js editor supporting formatting, lists, code blocks, and more
- Banner Images: Add eye-catching images to posts
- Categories: Organize posts by categories (Technology, Science, Health, Sports, Business)
- Search & Filter: Find posts by keyword, category, or author
- Infinite Scroll: Smooth browsing experience with pagination
- Post Actions: Edit your own posts, delete content, share with others
- Threaded Discussions: Nested comment structure supporting replies to comments
- Rich Interactions: Like comments, view comment threads
- Comment Management: Edit and delete your own comments
- Customizable Profiles: Upload avatar, write bio, update personal information
- Profile Statistics: View post count, followers, following, and likes
- Public Profiles: Browse other users' profiles and content
- Follow Users: Stay updated with content from your favorite authors
- Followers & Following: View and manage your social connections
- Friends List: Quick access to mutual follows
- New Post Notifications: Get notified when followed users publish content
- Like Posts & Comments: Express appreciation for content
- Save for Later: Bookmark posts to read later with dedicated "Read Later" section
- Share Posts: Share interesting content with others
Receive real-time notifications for:
- Likes: When someone likes your posts or comments
- Comments: When users comment on your posts
- Followers: When someone starts following you
- New Posts: When users you follow publish new content
Notification Features:
- Unread count badge in navigation
- Toast notifications for new events
- Mark as read (individually or all at once)
- Notification history
- Real-time Chat: Instant messaging with other users
- Online Status: See who's currently online
- Chat History: Access previous conversations
- Friend List: Quick access to message friends
- Typing Indicators: Enhanced chat experience
- Analytics Overview: Total users, posts, comments, and reports
- User Management: View all users, ban/unban accounts, delete users
- Content Moderation: Hide/unhide posts, delete inappropriate content
- Report System: Review and resolve user reports
Users can report:
- Inappropriate posts
- Spam comments
- Problematic users
Report Features:
- Issue categorization
- Priority levels (Low, Medium, High)
- Status tracking (Solved/Unsolved)
- Admin review workflow
- Modern Landing Page:
- Hero section with gradient title and animated call-to-action buttons
- Statistics showcase (Active Writers, Articles Published, Monthly Readers)
- Feature cards with Lucide icons and floating animations
- "How It Works" step-by-step guide with numbered badges
- User testimonials section
- Animated gradient CTA section
- Dark Mode: Toggle between light and dark theme with persistence
- Responsive Design: Optimized for desktop, tablet, and mobile devices
- Material Design: Clean, modern UI with Angular Material components
- Smooth Animations: Fade-in, slide-in, float effects, and staggered animations
- Infinite Scroll: Seamless content loading
- Toast Notifications: Non-intrusive alerts for actions
- Click-Outside Functionality: Auto-close menus and dropdowns when clicking outside
- Modern Typography: Typography-only logo with hover effects
- Redis Caching: In-memory caching for user profiles and frequently accessed data
- Debounced Search: 500ms delay for optimized search performance
- Lazy Loading: Efficient component loading
- Signal-based Reactivity: Fine-grained UI updates
- Pagination: Optimized data loading (10 posts per page)
- Cache Invalidation: Automatic cache eviction on data updates
- OAuth2 Integration: Social login with Google, GitHub, and Facebook providers
- Secure Registration: BCrypt password encryption
- JWT Authentication: Token-based secure login with 12-hour expiration
- Role-based Access: USER and ADMIN roles with method-level security
- 3-Filter Security Chain: Multi-layer authentication system (Public, Guest, JWT)
- CORS Protection: Restricted cross-origin requests
- SQL Injection Prevention: JPA/Hibernate parameterized queries
- Rate Limiting: Server-level request throttling
The platform supports guest access without requiring authentication:
- View Content: Browse all blog posts and user profiles
- Public Access: Read posts, view comments, and explore user profiles
- Report System: Submit reports for inappropriate content
- Technical Access: All GET requests are available to guests (read-only access)
- No Account Required: Experience the platform before creating an account
Guests can explore the full content library but need to register to create posts, comment, like, follow users, or access real-time features.
Echo_Script/
├── frontend/ # Angular 20 Frontend Application
│ ├── src/app/
│ │ ├── pages/ # Page components (14 pages)
│ │ │ ├── home/
│ │ │ ├── feed/
│ │ │ ├── login/
│ │ │ ├── register/
│ │ │ ├── profile/
│ │ │ ├── posting/
│ │ │ ├── post-page/
│ │ │ ├── read-later/
│ │ │ ├── admin-panel/
│ │ │ ├── report/
│ │ │ ├── privacy-policy/
│ │ │ └── not-found/
│ │ │
│ │ ├── helper_components/ # Reusable UI components (12 components)
│ │ │ ├── navbar/
│ │ │ ├── chat-component/
│ │ │ ├── comments-container/
│ │ │ ├── post-component/
│ │ │ ├── posts/
│ │ │ ├── toast-component/
│ │ │ ├── user-list/
│ │ │ ├── user-table/
│ │ │ ├── post-table/
│ │ │ ├── reports-table/
│ │ │ ├── logo/
│ │ │ ├── confirmation-popup/
│ │ │ └── confirm-dialog-component/
│ │ │
│ │ ├── servises/ # Services (note: typo in directory name)
│ │ │ ├── data-service.ts
│ │ │ ├── WebsocketService.ts
│ │ │ ├── user-s.ts
│ │ │ ├── post-servise.ts # (note: typo)
│ │ │ ├── comment-service.ts
│ │ │ ├── notif-service.ts
│ │ │ ├── chat-service.ts
│ │ │ ├── analytics-service.ts
│ │ │ ├── report-serise.ts # (note: typo)
│ │ │ ├── oauth2-service.ts
│ │ │ ├── media.ts
│ │ │ ├── helper-service.ts
│ │ │ └── toaster-service.ts
│ │ │
│ │ ├── models/ # TypeScript data models (16 models)
│ │ ├── interceptors/ # HTTP interceptors
│ │ ├── guards/ # Route guards
│ │ ├── shared/ # Shared modules
│ │ ├── app.ts
│ │ ├── app.config.ts
│ │ └── app.routes.ts
│ │
│ ├── public/ # Static assets
│ ├── package.json
│ ├── angular.json
│ ├── tsconfig.json
│ ├── Dockerfile
│ └── README.md
│
├── backend/ # Spring Boot Backend Application
│ ├── src/main/java/com/blog/backend/
│ │ ├── config/ # Application configuration
│ │ │ ├── security/ # Security & authentication
│ │ │ │ ├── filters/ # 3-layer authentication filters
│ │ │ │ ├── cors/
│ │ │ │ └── service/
│ │ │ ├── redis/ # Redis cache configuration
│ │ │ ├── tomcat/ # Tomcat & rate limiting
│ │ │ └── seed/
│ │ │
│ │ ├── controllers/ # REST API endpoints (12 controllers)
│ │ ├── models/ # JPA entities (13 entities)
│ │ │ └── base/
│ │ ├── services/ # Business logic layer
│ │ │ ├── user/
│ │ │ ├── post/
│ │ │ ├── social/
│ │ │ └── media/
│ │ ├── repositories/ # Data access layer (12 repositories)
│ │ ├── dto/ # Data Transfer Objects
│ │ │ ├── user/
│ │ │ ├── post/
│ │ │ ├── comment/
│ │ │ ├── chat/
│ │ │ ├── report/
│ │ │ └── oauth2/
│ │ ├── websocket/ # WebSocket handlers
│ │ ├── enums/ # Enumerations
│ │ ├── exceptions/ # Exception handling
│ │ ├── records/ # Java records
│ │ └── Main.java
│ │
│ ├── src/main/resources/
│ │ ├── application.properties
│ │ ├── db/migration/ # 14 Flyway migrations
│ │ └── media/ # User-uploaded files
│ │
│ ├── pom.xml
│ ├── Dockerfile
│ ├── docker-compose.yml
│ └── README.md
│
├── database/
│ └── docker-compose.yml # Database-only setup
│
├── docker-compose.yaml # Root-level compose file
├── banner.png # Project banner image
├── diagram.svg # Architecture diagram
├── db_diagram.png # Database schema diagram
└── README.md # This file - Main project documentation
- Create and publish rich blog posts
- Build an audience through followers
- Engage with readers through comments
- Track post performance (likes, comments)
- Categorize and organize content
- Discover content through search and categories
- Follow favorite authors
- Save interesting posts for later
- Interact through likes and comments
- Get notified of new content
- Monitor platform activity
- Moderate content and users
- Handle user reports
- Access analytics dashboard
- Manage user accounts
For detailed setup instructions, please refer to:
- Frontend Documentation - Angular app setup, development, and deployment
- Backend Documentation - Spring Boot API setup, configuration, and deployment
Run the entire stack with Docker Compose:
docker-compose upAccess the application at http://localhost:4200
- Database: Set up PostgreSQL database
- Redis: Install and start Redis server (port 6379)
- Backend: Configure and run Spring Boot application (port 8080)
- Frontend: Install dependencies and start Angular dev server (port 4200)
- Access: Open browser to
http://localhost:4200
-
Frontend README - Complete Angular frontend documentation including:
- Component architecture
- State management
- API integration
- Real-time features
- Styling and theming
-
Backend README - Complete Spring Boot backend documentation including:
- REST API endpoints
- Security architecture
- Database schema
- WebSocket configuration
- Deployment guides
Potential features for future development:
- Email verification and password reset
- User mentions and hashtags
- Post drafts and scheduled publishing
- Rich media support (embedded content)
- Advanced search with filters
- User blocking and privacy controls
- Trending posts algorithm
- User reputation system
- Mobile applications (iOS, Android)
- Progressive Web App (PWA)
For technical documentation, setup instructions, and API details, please refer to the README files in the frontend/ and backend/ directories.