🚀 BlogPost React App

A modern, responsive Blog Management Application built with React (Vite) that integrates seamlessly with multiple backend technologies including .NET Core, Spring Boot, and NestJS.

Designed with scalability, clean architecture, and real-world usability in mind, this project demonstrates full-stack integration, authentication, and role-based UI behavior.

---

✨ Features

• 🔐 Authentication

  • User Registration & Login
  • JWT-based authentication with token persistence
  • Secure Logout functionality

• 📝 Blog Management

  • View all blogs (public access)
  • Create new blog posts
  • Edit existing blogs (only for owners/co-owners)
  • Delete blogs with confirmation

• 👥 User Collaboration

  • Assign co-owners to blogs
  • Owner-based access control (Edit/Delete visibility)

• 🔄 Multi-Backend Support

  • Works with:

    • .NET Core APIs
    • Spring Boot APIs
    • NestJS APIs

  • Configurable via environment variables

• 🎨 UI/UX

  • Clean and responsive UI using Bootstrap
  • Reusable components
  • Protected routes for authenticated users

---

📸 Screenshots

🏠 Dashboard

🔐 Login

📝 Register

✍️ Add / Edit Blog

---

🏗️ Tech Stack

Frontend

• React 19
• Vite
• React Router DOM
• Axios
• Bootstrap 5
• React Select

Architecture

• Context API for state management

• Separation of concerns:

  • api/ → API layer (Axios calls)
  • services/ → Business logic layer
  • context/ → Authentication state
  • components/ → Reusable UI components
  • pages/ → Feature-based views

---

📂 Project Structure

src/
├── api/            # API layer (Axios, endpoints)
├── services/       # Business logic
├── context/        # Auth management
├── components/     # Reusable UI components
├── pages/          # App screens
├── config.js       # Environment config

---

⚙️ Environment Configuration

Create or update your .env file:

# .NET Core
#VITE_API_BASE_URL=http://localhost:5006

# Spring Boot
# VITE_API_BASE_URL=http://localhost:8080

# Clean Architecture (.NET)
# VITE_API_BASE_URL=http://localhost:5186

# NestJS
# VITE_API_BASE_URL=http://localhost:3000

# Cloud (Spring Boot - Render)
VITE_API_BASE_URL=https://blogpostspringboot.onrender.com

👉 Only Cloud (Spring Boot - Render) will work.

---

▶️ Getting Started

1. Install dependencies

npm install

2. Run the application

npm run dev

3. Open in browser

http://localhost:5173/

---

🔐 Authentication Flow

• Login/Register → Receive JWT token
• Token stored in localStorage
• Axios interceptor attaches token to requests
• Protected routes restrict access to authenticated users

---

🧠 Key Learnings / Highlights

• Built a frontend that works with multiple backend technologies
• Implemented clean architecture separation (API vs Service layer)
• Handled JWT authentication and protected routing
• Designed role-based UI rendering (owner/co-owner logic)
• Managed CORS, token handling, and API inconsistencies

---

📌 Future Improvements

• Role-based permissions (Admin/User)
• Pagination & search for blogs
• Rich text editor for blog content
• Unit & integration testing
• Deployment (Vercel / Netlify)

---

👨‍💻 Author

Shuvo Joseph Software Developer | iOS | Full-Stack | React | Spring Boot

---

⭐ Final Note

This project demonstrates practical, production like integration between frontend and multiple backend systems, focusing on clean code, scalability, and real-world problem solving.

If you found this helpful or interesting, feel free to ⭐ the repo!

---