How to build a blog engine with React & Spring Boot - Part 1

Building a blog engine is always an interesting project with the right level of challenge to be able to understand a new framework or technology. In these multi part posts, you will learn how to create a blog engine with Reactjs & Spring Boot backend. The focus of this post would be on getting started on this project by first creating a UI prototype with mock data. You will see code samples on how to build a react app with functional components and manage state with react. All the code in this post can be acquired from it’s Github repository

Contents

Blog Engine How to create a blog engine with Reactjs & Spring Boot Perquisites Setup the posts reducer (redux)Components for home, post and post list view Setup routes Conclusion

Blog Engine

The end goal of this project is to build a simple, yet fully functional blog engine. It will be a full stack solution whereby you will build both the front end as well as the backend. In terms of the technologies, they are as follows,

Frontend	Backend
ReactJS: reactjs frontend framework with Javascript React-router: for navigation React-redux: for state	Spring Boot: for blog API JWT: for security H2: relational database engine Lombok: to reduce boilerplate code

your tech stack for the blog engine

How to create a blog engine with Reactjs & Spring Boot

You can start by building out the reactjs front-end components.

Perquisites

npx create-react-app blog-frontend
cd blog-frontend
npm install react-router-dom react-redux

Your package.json file should look something like this,

{
  "name": "blog-frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-redux": "^9.1.2",
    "react-router-dom": "^6.26.2",
    "react-scripts": "5.0.1",
    "redux": "^5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Create some mock data and the redux store

TestData.js file below, followed by store.js for the redux store

export const TEST_POSTS = [
    {
        id: 1, 
        authorId: 'USR_123',
        authorName: 'Bhuman Soni',
        pubDate: "12/12/2012",
        title: 'Awesome new post',
        content: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et"+
        " magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa"+
        " quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo."+
        " Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. "+
        "Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. "
    },
    {
        id: 2, 
        authorId: 'USR_987',
        title: 'Cptain Dankos first post',
        authorName: 'Cpt.Danko',
        pubDate: "12/12/2012",
        content: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et"+
        " magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa"+
        " quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo."+
        " Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. "+
        "Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. "
    }
]

Setup the posts reducer (redux)

Having some problems embedding the code here, so for now, you can look at the code here

https://github.com/cptdanko/react-redux-spring-boot-blog/blob/main/blog-frontend/src/store.js

Components for home, post and post list view

Home component to create new posts or view existing posts

import { Link } from "react-router-dom"

export const Home = () => {

    const createNewPost = () => {
        alert("to be added")
    }
    return (
        <div>
            <h1> Home to the best blog engine</h1>
            <div>
                <button onClick={createNewPost}>Create new post</button>
                <button><Link to="/blogs">View existing posts </Link></button>
            </div>
        </div>

    )
}

export const NewPost = () => {
    const [content, setContent] = useState("");
    
    return (
        <div className="Full-content">
            <div>
                <textarea className="Textarea" value={content}
                    rows={10}
                    onChange={editBlogPost}>
                </textarea>
            </div>
        </div>
    )
}

(ViewPost and NewPost component can be used for the same purpose, but you can fix that later)

import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useLocation, useParams } from "react-router-dom";

export const ViewPost = (props) => {

    const [content, setContent] = useState("");
    const dispatch = useDispatch();

    const { id } = useParams();
    const location = useLocation();

    const myParam = new URLSearchParams(location.search).get('canEdit');
    const canEdit = JSON.parse(myParam);
    // const {canEdit } = props;
    useEffect(() => {
        if(content == null || content.length < 1) {
            setContent(currentPost.content);
        }
    });
    const blogposts = useSelector(state => state.posts);
    const currentPost = blogposts.filter(p => p.id === Math.abs(id))[0];

    const editBlogPost = (e) => {
        e.preventDefault();
        setContent(e.target.value);
    }

    const updatePost = (e) => {
        e.preventDefault();
        dispatch({ type: 'UPDATE_POST', payload: { id: id, content: content } });
    }

    return (
        <div className="Post-detail">
            <div className="Blog-post-title">
                <span className="Name">{currentPost.title}</span>
                <span className="Author">by {currentPost.authorName} on {currentPost.pubDate}</span>
            </div>
            <div className="Full-content">
                {canEdit ?
                    <div>
                        <div>
                            <button onClick={updatePost}>Save</button>
                        </div>
                        <div>
                            <textarea className="Textarea" value={content} 
                            rows={10} 
                            onChange={editBlogPost}>
                            </textarea>
                        </div>
                    </div>
                    : <div className="Textarea">
                        {currentPost.content}
                    </div>
                }

            </div>
        </div>
    )
}

(ViewPost and NewPost component can be used for the same purpose, but you can fix that later)

As for the blog post list view, having some issues embedding the code here, so for now please look at the code on Github

https://github.com/cptdanko/react-redux-spring-boot-blog/blob/main/blog-frontend/src/components/BlogPostList.jsx

Setup routes

You can setup routes in your App.js file as follows,

import logo from './logo.svg';
import './App.css';
import { Login } from './LoginScreen';
import { BlogPosts } from './components/BlogPostList';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { ViewPost } from './components/ViewPost';
import Navbar from './Navbar';
import { Home } from './components/Home';

function App() {
  return (
    <div className="App" style={{ backgroundColor: 'beige' }}>
      <div className='Dashboard'>
        <Login />
        <div>
          <Router>
            <Navbar />
            <Routes>
              <Route path="/" element={<Home />} />
              <Route path="/blogs" element={<BlogPosts />} />
              <Route path="/blogs/:id" element={<ViewPost />} />
            </Routes>
          </Router>
        </div>
      </div>
    </div>
  );
}

export default App;

Conclusion

That’s it for this post, more posts will be added here as the entire solution comes together. For now, hope this post helped you in getting started in building out your full stack react app.

If you find any of my posts useful and want to support me, you can buy me a coffee 🙂

https://www.buymeacoffee.com/bhumansoni

While you are here, maybe try one of my apps for the iPhone.

Products – My Day To-Do (mydaytodo.com)

Here are some of my other bloposts,

How to unit test react-redux app – My Day To-Do (mydaytodo.com)