This is a complete full-stack blogging platform built with Java Spring Boot (Backend) and React (Frontend). It supports user authentication, blog creation, interaction through likes and comments, community features, and real-time notifications.
- Java 17
- Spring Boot
- Spring Security with JWT
- Hibernate (JPA)
- PostgreSQL
- Lombok
- React.js
- Axios
- Formik
- Context API
- Plain CSS / Inline styling
- Postman (API Testing)
- GitHub
- IntelliJ & VS Code
- ✅ User registration with optional profile picture
- ✅ Login with JWT authentication
- ✅ Create, edit, and delete blogs
- ✅ Add images to blog posts
- ✅ Like/unlike posts
- ✅ Comment on blog and community posts
- ✅ Real-time notifications using Observer pattern (like/comment)
- ✅ Create, join, leave communities
- ✅ Write posts in communities
- ✅ View public blogs & search by title/content
- ✅ See account stats and recent activity
- ✅ Admin role for moderation
- ✅ Fully responsive UI
Want to see the app in action?
👉 Watch the project walkthrough on LinkedIn
The landing page when a user visits the web app for the first time.
User signs in to access features like writing, liking, and commenting.
User registration screen with name, email, date of birth, optional profile picture, username (must be unique), and password.
Feed showing all public blogs sorted by newest first. Users can like, comment, and explore other blogs.
User browsing various blogs, each showing number of likes and comments.
Continuation of the blog feed.
User liked several posts including "How I Stayed Focused" and "Coding Daily".
User reading Olivia's blog about solo travel.
Continuation of Olivia’s blog and user liked it.
User commented on Olivia’s post. Other comments are visible too.
User can edit or delete their own comment.
User opens the blog creation form.
User enters title, content, and uploads an image.
New blog appears in the public feed alongside others.
Search by keyword (e.g., “Java”) returns relevant blogs.
User added another blog post to the platform.
User accesses their own blogs via the "My Blogs" page.
User can choose to edit or delete their own blog.
Blog editor to modify title, content, or image.
Confirmation and ability to delete the blog post.
User receives a notification when someone likes their blog.
User is notified when someone comments on their blog.
Toast popup allows user to mark notification as read or dismiss it.
User views comments on their own blog (e.g., “Java Code”).
Another post (e.g., “Waking Up Early”) with comments.
Displays user’s name, username, email, stats (total blogs, likes, comments), and recent activity.
User can logout via the red button or from the sidebar under the profile picture.
FullStackBlogApp/ ├── Backend/ │ └── BlogApp/ # Spring Boot project ├── Frontend/ # React application ├── Screenshots/ # App UI screenshots └── README.md # This file
The backend handles all business logic, database interaction, security, and API endpoints for authentication, blogs, likes, comments, communities, and notifications.
📌 Full documentation available at:
Backend/BlogApp/README.md
The frontend is a fully responsive SPA built using React with inline styling. It connects to the backend using Axios and manages auth state via Context API.
📌 See:
Frontend/README.md
Ahmed Hossam