📝 Blogify – Full Stack Blog Application
Blogify is a modern full-stack blog platform with a client-facing website and a powerful admin dashboard. It is built using React.js with Material UI for the frontend and Java (REST APIs) for the backend, featuring authentication, role-based access, and content management.
🚀 Features 👤 Client (User)
User authentication (Login / Register)
View blog posts
Read full blog content
Responsive UI using Material UI
🛠 Admin
Admin authentication
Create, edit, delete blog posts
Manage blog content
Separate admin UI
🔐 Authentication
Secure login & signup
Role-based access (Client / Admin)
🧱 Tech Stack Frontend
React.js
Material UI (MUI)
React Router
Axios
Environment variables (.env)
Backend
Java
REST APIs
Authentication & Authorization
Database (SQL)
📁 Frontend Folder Structure
src/
├─── admin/
│ ├── AdminLayout.jsx
│ ├── AdminLogin.jsx
│ ├── Dashboard.jsx
│ ├── EditUserModal.jsx
│ ├── InviteUserModal.jsx
│ ├── PostModal.jsx
│ ├── Posts.jsx
│ ├── Settings.jsx
│ └── Users.jsx
│
├─── components/
│ ├── Categories.jsx
│ ├── FeaturedBlogs.jsx
│ ├── Footer.jsx
│ ├── Hero.jsx
│ ├── Navbar.jsx
│ ├── Newsletter.jsx
│ ├── StatsSection.jsx
│ └── Testimonials.jsx
│
├─── pages/
│ ├── About.jsx
│ ├── Blog.jsx
│ ├── BlogDetail.jsx
│ ├── BlogList.jsx
│ ├── Contact.jsx
│ ├── Home.jsx
│ └── NotFound.jsx
│
├── assets/
├── utils/
├── letter/
├── env/
│
├── App.js
└── index.js
📁 **Backend Folder Structure (Java)**
backend/
├── controller/
├── service/
├── repository/
├── model/
├── config/
└── application.properties
# Entity classes<br/>
# Security & app configuration<br/>
⚙️ Environment Variables
Create a .env file in the frontend root:
REACT_APP_API_BASE_URL=http://localhost:8080/api
Backend
Open project in IDE (IntelliJ / Eclipse)
Run the main Java application
Backend runs on: http://localhost:8080
🔑 *Authentication Flow
Admin registers or logs in
Backend validates credentials
Token/session is generated
Protected routes are accessible based on role
🎨 UI Design
Material UI components
Fully responsive layout
Clean and modern admin dashboard
User-friendly blog reading experience
🌐 Project Name
Blogify – Write. Read. Inspire.
📌 Future Enhancements
Comment system
Blog categories & tags
Image upload
SEO optimization
👨💻 Author
Md Jawed Hussain
Full Stack Web Developer
MERN & Java Enthusiast
📜 License
This project is for learning and portfolio purposes.
axios.delete(http://localhost:8080/blogs/${id});
axios.put(http://localhost:8080/blogs/${id}, blogData);