DEV Community: WebCraft Notes

Smart Content Management: Integrating Search, Filters, and Pagination with React and Node.js

WebCraft Notes — Tue, 01 Jul 2025 11:51:58 +0000

In one of our previous tutorials, we implemented a table-based interface to display our posts, organizing content across different columns including an 'Actions' column that enabled basic CRUD operations. Now it's time to enhance our CMS with more advanced features to improve user experience: search capabilities, filtering options, and pagination. These features must be implemented at both the backend and frontend levels to ensure smooth, efficient operation. Let's begin by setting up the server-side infrastructure needed to support these new functionalities.

1. Building the Backend Foundation: Search, Filter, and Pagination Infrastructure

Okay, for pagination we will need to get from the frontend page number and rows per page; for search, we will get a string (we will search in titles and subtitles); for filters, we will wait for status, language, and date range (you can add any filters you need). Great, now we can start with the posts controller.

we will wait for additional data from the URL query, and in this case, we need to modify the "getPostsList" function. Get all the data that we mentioned earlier from the request value, setting default values where it is possible. Send those values as params into our model, and return as a response all the data to the client;

async function getPostsList(req, res) {
    try {
        const { 
            page = 1,
            rowsPerPage = 10,
            status,
            language,
            startRangeFilter,
            endRangeFilter,
            search
        } = req.query;
        const data = await postsModel.getPostsList({
            page,
            rowsPerPage,
            status,
            language,
            startRangeFilter,
            endRangeFilter,
            search
        });
        return res.status(200).json({
            status: 200,
            ...data
        });
    } catch (error) {
        console.error('Error getting posts list:', error);
        return res.status(500).json({
            status: 500,
            message: 'Internal server error'
        });
    }
}

open our "posts.model.js" file and find the "getPostsList" function;
we need to add new checkers and filters, and modify our main query;

async function getPostsList({
    page = 1,
    rowsPerPage = 10,
    status,
    language,
    startRangeFilter,
    endRangeFilter,
    search
}) {
    try {
// Converts rowsPerPage to a number (limit), which determines how many posts to fetch per request.
// Converts page to a number and calculates skip, which determines how many posts to skip before retrieving data.
        const limit = parseInt(rowsPerPage, 10);
        const skip = (parseInt(page, 10) - 1) * limit;
        const query = {};
// If status is provided and not 'all', it is added to the query, status.trim() removes extra spaces.
        if (status && status !== 'all' && status.trim()) {
            query.status = status.trim();
        }
// If language is provided, it is added to the query.
        if (language && language.trim()) {
            query.language = language.trim();
        }
// If both startRangeFilter and endRangeFilter are provided, it filters posts where the created.date falls within the range ($gte means greater than or equal to, $lte means less than or equal to).
        if (startRangeFilter && startRangeFilter.trim() && endRangeFilter && endRangeFilter.trim()) {
            const [startDay, startMonth, startYear] = startRangeFilter.trim().split('-').map(Number);
            const [endDay, endMonth, endYear] = endRangeFilter.trim().split('-').map(Number);
            query['created.date'] = {
                $gte: {
                    day: startDay,
                    month: startMonth,
                    year: startYear,
                },
                $lte: {
                    day: endDay,
                    month: endMonth,
                    year: endYear,
                }
            };
// If only startRangeFilter is provided, it filters posts from that date onward.
        } else if (startRangeFilter && startRangeFilter.trim()) {
            const [startDay, startMonth, startYear] = startRangeFilter.trim().split('-').map(Number);
            query['created.date'] = {
                $gte: {
                    day: startDay,
                    month: startMonth,
                    year: startYear,
                }
            };
// If only endRangeFilter is provided, it filters posts up to that date.
        } else if (endRangeFilter && endRangeFilter.trim()) {
            const [endDay, endMonth, endYear] = endRangeFilter.trim().split('-').map(Number);
            query['created.date'] = {
                $lte: {
                    day: endDay,
                    month: endMonth,
                    year: endYear,
                }
            };
        }
// If search is provided, it performs a case-insensitive search ('i' flag) on title or subTitle.
        if (search && search.trim()) {
            const searchRegex = new RegExp(search.trim(), 'i');
            query.$or = [
                { title: searchRegex },
                { subTitle: searchRegex }
            ];
        }
// The function fetches:
// - postsList: Retrieves paginated posts from the database based on the query.
// - totalCount: Gets the total number of posts matching the filters.
// Both queries run in parallel using Promise.all(), improving performance.
        const [postsList, totalCount] = await Promise.all([
            posts.find(query).skip(skip).limit(limit),
            posts.countDocuments(query)
        ]);
// The function returns an object containing:
// - posts: The list of fetched posts.
// - totalCount: The total number of matching posts.
        return { posts: postsList, totalCount };
    } catch (error) {
        console.error('Error getting posts list:', error);
        throw error;
    }
}

And that's it, we prepared our server for additional functionality, and now can move to the frontend part.

2. Crafting the User Interface: Implementing Interactive Search and Navigation Components

It was fast with the backend and now let's jump into the frontend part, but previously, please, create a few more posts for testing purposes.

modify the "getPostsList" function from the "posts.services.js" file that we use to call the "posts" endpoint;

export const getPostsList = (data, query) => {
    const params = new URLSearchParams();
// URLSearchParams is a built-in JavaScript object used to build a URL query string.

    params.set('page', query?.page || 1);
    params.set('rowsPerPage', query?.rowsPerPage || 10);
// If query.page is provided, it's set; otherwise, it defaults to 1.
// If query.rowsPerPage is provided, it's set; otherwise, it defaults to 10.


    if (query?.status) params.set('status', query.status);
    if (query?.language) params.set('language', query.language);
    if (query?.search) params.set('search', query.search);
    if (query?.endRangeFilter) params.set('endRangeFilter', query.endRangeFilter);
    if (query?.startRangeFilter) params.set('startRangeFilter', query.startRangeFilter);
// If these filters exist in query, they are added to params.

    const queryString = params.toString();
//Converts params into a URL-encoded query string

    return HTTP.get(`/posts?${queryString}`, data).then(({ data }) => data);
// Sends a GET request to posts?{query parameters}.
// Uses HTTP.get, which is an Axios instance.
// .then(({ data }) => data) extracts data from the response.
};

we will store all the filters and search fields data in the "Redux" storage, in that case, we need to add additional functionality and state values to the "posts" storage;

// new state values
totalPostsCount: 0,
postsPage: 0,
postsPerPage: 10,
statusFilter: 'all',
languageFilter: null,
startRangeFilter: null,
endRangeFilter: null,
searchFilter: '',

// new reducer cases
case POST_ACTION_TYPES.SET_TOTAL_POSTS_COUNT:
    return { ...state, totalPostsCount: payload };
case POST_ACTION_TYPES.SET_POSTS_PAGE:
    return { ...state, postsPage: payload };
case POST_ACTION_TYPES.SET_POSTS_PER_PAGE:
    return { ...state, postsPerPage: payload };
case POST_ACTION_TYPES.SET_STATUS_FILTER:
    return { ...state, statusFilter: payload };
case POST_ACTION_TYPES.SET_LANGUAGE_FILTER:
    return { ...state, languageFilter: payload };
case POST_ACTION_TYPES.SET_START_RANGE_FILTER:
    return { ...state, startRangeFilter: payload };
case POST_ACTION_TYPES.SET_END_RANGE_FILTER:
    return { ...state, endRangeFilter: payload };
case POST_ACTION_TYPES.SET_SEARCH_FILTER:
    return { ...state, searchFilter: payload };

//new selectors
export const sTotalPostsCount = (state) => state.post.totalPostsCount;
export const sPostsPage = (state) => state.post.postsPage;
export const sPostsPerPage = (state) => state.post.postsPerPage;
export const sStatusFilter = (state) => state.post.statusFilter;
export const sLanguageFilter = (state) => state.post.languageFilter;
export const sStartRangeFilter = (state) => state.post.startRangeFilter;
export const sEndRangeFilter = (state) => state.post.endRangeFilter;
export const sSearchFilter = (state) => state.post.searchFilter;

//new types
SET_TOTAL_POSTS_COUNT: 'post/SET_TOTAL_POSTS_COUNT',
SET_POSTS_PAGE: 'post/SET_POSTS_PAGE',
SET_POSTS_PER_PAGE: 'post/SET_POSTS_PER_PAGE',
SET_STATUS_FILTER: 'post/SET_STATUS_FILTER',
SET_LANGUAGE_FILTER: 'post/SET_LANGUAGE_FILTER',
SET_START_RANGE_FILTER: 'post/SET_START_RANGE_FILTER',
SET_END_RANGE_FILTER: 'post/SET_END_RANGE_FILTER',
SET_SEARCH_FILTER: 'post/SET_SEARCH_FILTER',

apply "Search" functionality to our "Search" field inside the "PostsAction.component.jsx" file. Add the "onClick" event to the "Search" button, create a new "applySearch" function that will send all necessary params to the endpoint, and update our "posts list" with data from the response;

const applySearch = async () => {
    try {
        const response = await getPostsList({}, {
            page: 1,
            rowsPerPage: postsPerPage,
            status: statusFilter,
            language: languageFilter,
            search: searchFilter,
            endRangeFilter: endRangeFilter,
            startRangeFilter: startRangeFilter,
        });
        dispatch(aSetPostsList(response.posts));
        dispatch(aSetTotalPostsCount(response.totalCount));
    } catch (error) {
        console.error("Error fetching Posts:", error);
        dispatch(aPushNewNotification({ type: 'error', text: 'Failed to fetch Posts' }));
    }
}

create new "filters" modal type with date pickers, status and language dropdowns, also we will add "Apply" and "Clear Filters" buttons, all these fields will modify data from storage, and the "Apply" button will call the same function that we are using on the search button (I will not copy-paste this component because that will be more than 200 lines of code, you can develop this feature by your own or check in my repo). In my case, it will look like this:

Nice, and the last feature that we need to finish, is our pagination. We will use the "TablePagination" component from the MUI library, it's an awesome solution with minimum effort.

import the "TablePagination" component from MUI;

import TablePagination from '@mui/material/TablePagination';

add pagination component at the bottom of the table, and define necessary values like "total posts amount", "page number", "rows per page", and events that will call predefined functions on some values change;

<TablePagination
    className="table-container--pagination"
    component="div"
    count={totalPostsCount}
    page={postsPage}
    onPageChange={handleChangePage}
    rowsPerPage={postsPerPage}
    onRowsPerPageChange={handleChangeRowsPerPage}
/>

add two functions that will update "page" and "rowsPerPage" values;

const handleChangePage = (event, newPage) => {
    dispatch(aSetPostsPage(newPage));
};
const handleChangeRowsPerPage = (event) => {
    dispatch(aSetPostsPerPage(parseInt(event.target.value, 10)));
    dispatch(aSetPostsPage(0));
};

add set "useEffect" hook, that will fetch posts data if page or ros amount were updated;

useEffect(() => {
    fetchData();
}, [postsPage, postsPerPage]);

Nice, we finished with pagination, now we can relaunch our app, and check the results.

In this tutorial, we've enhanced our Content Management System by implementing advanced search, filtering, and pagination features. By carefully designing both backend and frontend components, we've created a more dynamic and user-friendly content management experience. These improvements transform our CMS from a basic listing tool into a powerful platform that allows users to efficiently navigate and discover content. The implementation demonstrates the importance integration between server-side logic and client-side interfaces, showcasing how modern web technologies like React and Node.js can work together to create content management solutions. As developers continue to build more complex applications, techniques like these become crucial in delivering intuitive and performant user experiences.

The complete code for this tutorial is available in the repository.

Found this post useful? ☕ A coffee-sized contribution goes a long way in keeping me inspired! Thank you)

Next step: "React and Node.js CMS Series: Finish Line"

CMS Development: Adding Post Preview and Status Management in React and Node.js

WebCraft Notes — Wed, 18 Jun 2025 12:47:31 +0000

Throughout our CMS development series, we've progressively enhanced our application's functionality. After implementing post CRUD operations, we're now focusing on two new features: a "Preview" page that allows authors to review their content before publication, and a status management system to control post visibility. These additions will provide content creators with more control and flexibility in managing their posts. Let's dive into the implementation:

1. Implementing a Dynamic Post Preview Mechanism

We already added a "Preview" button to our "Actions" menu for each post, and now we will simply finish with its functionality.

add the "onClick" event to the "Edit" button, inside our "TableComponent", with the "handlePreview" function with two parameters;

<MenuItem onClick={(event) => handleEdit(selectedItem, event)}>Edit</MenuItem>

define the "handlePreview" function, that will take "slug" from the post and navigate the user to the new "preview" route, with dynamic router parameter;

const handlePreview = (item, event) => {
    event.preventDefault();
    navigate(`/preview/${item.slug}`);
};

inside the "App.jsx" file we need to import the "Preview" component from the "views" folder, and set this component as an "element" to our new route;

<Route path='preview/:slug' element={<Preview />} />

now, let's create this new "Preview" component inside the "views" folder;
we need to import "useState", "useEffect" hooks from "React", "useParams" from "Router", and "getPostBySlug" function from our services;
create a new function that will fetch posts by "slug" from the database and update our state;
we will need to fetch the post in the "useEffect" hook, before rendering the page, and then return JSX which represents our post page;

const Preview = () => {
    const [post, setPost] = useState(null);
    const { slug } = useParams();
    const [mainImage, setMainImage] = useState(null);
// post: Stores the post data retrieved from the API.
// mainImage: Stores the URL of the main post image.

    useEffect(() => {
        fetchPost();
    }, []);
    const fetchPost = async () => {
        try {
            const response = await getPostBySlug(slug);
            if (response.status === 200) {
                setPost(response.post);
                setMainImage(import.meta.env.VITE_API_BASE_URL + `/posts/image/` + response.post.mainImage.file.name);
            }
        } catch (error) {
            console.log(error);
        }
    }
// The useEffect hook runs once when the component mounts ([] as the dependency array).
// It calls fetchPost(), which:
// - Retrieves the post using getPostBySlug(slug).
// - If successful (status === 200), it updates post with the response data.
// - Constructs the mainImage URL using import.meta.env.VITE_API_BASE_URL.

    return (
        <div className="preview-page">
            <section className="preview-page__content">
                <h1 className="preview-page__content--title">{post?.title}</h1>
                <p className='preview-page__content--subtitle'>{post?.subTitle}</p>
// Displays the post title and subtitle.
                <div className='preview-page__content--image'>
                    <img className='preview-page__content--image-pic' src={mainImage} alt={post?.mainImage?.alt} />
                </div>
// Renders the mainImage.
                <div>
                    {post?.body.map((item, idx) => {
                        switch (item.type) {
                            case 'text':
                                return (
                                    <div key={idx} dangerouslySetInnerHTML={{ __html: item.content }} className='preview-page__content--text'/>
                                );
                            case 'image':
                                return (
                                    <div className='preview-page__content--image'  key={idx}>
                                        <img 
                                            src={import.meta.env.VITE_API_BASE_URL + `/posts/image/` + item.file.name} 
                                            alt={item.alt || 'Image'} 
                                            className='preview-page__content--image-pic'/>
                                    </div>
                                );
                            default:
                                return null;
                        }
                        })
                    }
// Iterates over post.body to render different types of content dynamically:
// - Text (type: "text"): Uses dangerouslySetInnerHTML to render HTML content.
// - Image (type: "image"): Displays images dynamically with their source and alt text.
                </div>
            </section>
        </div>
    );
};

Cool, cool, cool... Let's relaunch the app and check the result, or let's check it at the end of this article.

2. Managing Post Visibility: Status Control System

We will need to define which post to show to the clients, and which is not, and for that case, we added a "status" value, and the "activate - deactivate" button to our "Action" menu.

To change the article "status" we will create an additional endpoint that will have a "partial update" functionality so that if we need to update another field we could use this endpoint also. In this case, we will start from the frontend first:

create a new "partial update" function inside the "posts.services.js" file, that will send a "Post" request and data to our server;

export const postPartialUpdate = (data) => 
    HTTP.post('/posts/partial-update', data).then(({data}) => data );

update the "Action" menu in the "Table.component" with the "status update" logic;

<MenuItem onClick={(event) => handleStatus(selectedItem, event)}>{
    selectedItem?.status === 'online'
        ? 'Deactivate'
        : 'Activate'
}</MenuItem>

next, we need to define a "handleStatus" function, then create a new object that will store an article id and new status, then send this object to our endpoint and get an updated posts list;

const handleStatus = async (item, event) => {
    event.preventDefault();
    try {
        const newUpdate = {
            _id: item._id,
            status: item.status === "offline" ? "online" : "offline"
        }
        await postPartialUpdate({post: newUpdate});
        const data = await getPostsList();
        dispatch(aSetPostsList(data.posts));
        dispatch(aPushNewNotification({ type: 'success', text: 'Post status updated' }));
    } catch (error) {
        console.error("Error updating Post status:", error);
        dispatch(aPushNewNotification({ type: 'error', text: 'Failed to update Post status' }));
    }
    handleClose();
};

Nice, now we need to configure our backend so that our server will receive data and update the article we need to be updated.

add a new route inside the "posts.router.js" file;

postsRouter.post('/partial-update', protect, postsController.partialUpdatePost);

create a new controller that will get data from the request and send it to our "posts" model;

async function partialUpdatePost(req, res) {
    const { post } = req.body;
    try {
        const updatedPost = await postsModel.partialUpdatePost(post);
        return res.status(200).json({
            status: 200,
            message: 'Post updated successfully',
            post: updatedPost
        });
    } catch (error) {
        return res.status(500).json({
            status: 500,
            message: 'Internal server error'
        });
    }
}

add a new model function that gets payload and then finds an "updateOne" article status or archive value from the post;

async function partialUpdatePost(payload) {
    try {
        if (payload.status) {
            const newStatus = payload.status;
            const updatedPost = await posts.updateOne({ _id: payload._id }, {$set: { status: newStatus }});
            return updatedPost;
        }
        if (payload.archived) {
            const newArchived = payload.archived;
            const updatedPost = await posts.updateOne({ _id: payload._id }, {$set: { archived: newArchived }});
            return updatedPost;
        }
    } catch (error) {
        console.error('Error updating post:', error);
        throw error;
    }
}

In the future, we can update this model and make it dynamical, so that it would search and replace fields without the necessity to add instructions manually.

Okay, let's relaunch our app and check the result.

Throughout this development phase, we've enhanced our CMS with two essential features that work together to create a more powerful content management experience. The new preview system ensures content creators can confidently review their work before publication, eliminating uncertainty about how posts will appear to readers. This combines with our new status control system, which provides precise management over post visibility through a partial update mechanism.

The architecture we've implemented is particularly noteworthy for its extensibility. While currently focused on status updates and content preview, the partial update system we've built serves as a foundation for future enhancements. This approach ensures that as our CMS grows and evolves, we can easily integrate new features without significant structural changes to our codebase.

The complete code for this tutorial is available in the repository. If you have any questions or run into issues, feel free to leave them in the comments section below.

Found this post useful? ☕ A coffee-sized contribution goes a long way in keeping me inspired! Thank you)

Next step: "Smart Content Management: Integrating Search, Filters, and Pagination with React and Node.js"

React and Node.js CMS Series: Implementing Advanced Post Editing Functionality

WebCraft Notes — Wed, 11 Jun 2025 09:47:42 +0000

There gonna be many JS code sections, and the best way to learn something is to go through this knowledge by yourself but you always can get the whole code here.

In our ongoing journey of building a Content Management System (CMS), we've already established the foundation for creating and listing posts. Now, it's time to tackle one of the most critical aspects of content management: post-editing. In this tutorial, we'll dive deep into creating a post-editing system that combines React's dynamic frontend capabilities with Node.js's backend infrastructure.

To transform our vision into reality, we'll first decide on the post-update workflow. I would like to have a functionality that would allow us to open existing posts inside the "Post Form" by "id" or by URL "slug", we would modify post data and press the "save" button, and then our server would modify our post in the backend. Okay, I think in this case it would be better to start from the backend and prepare server infrastructure for this new feature.

1. Create New Routes for Post Editing in Node.js

We will need a few new routes, like the route for getting posts by "slug" (in web development, a slug is the user-friendly, URL-safe, and human-readable part of a URL that identifies a specific page or resource, typically derived from the title), route for update post itself, and probably that would be nice to have a remove post route and functionality in the future. Okay let's jump into coding:

open the "posts.router.js" file inside the "server" directory and add three more routes;

postsRouter.get('/:slug', postsController.getPostBySlug);
postsRouter.post('/update', postsController.updatePost);
postsRouter.post('/remove', postsController.removePost);

Yes, I know that for the "remove" functionality I should use "DELETE", but I like to use "POST" because of better control, and the possibility to return some modified data back to the client.

create new three controllers: the first one will get "slug" from params, then make a model call, and send back the post; the second one will get an updated post from the request body, send it to the model, and then send back to the client updated post; and the third one that will get the post from request body, then call the model and return removed post to the client;

async function getPostBySlug(req, res) {
    const { slug } = req.params;
    try {
        const post = await postsModel.getPostBySlug(slug);
        return res.status(200).json({
            status: 200,
            post
        });
    } catch (error) {
        return res.status(500).json({
            status: 500,
            message: 'Internal server error'
        });
    }
}

async function updatePost(req, res) {
    const { post } = req.body;
    try {
        const updatedPost = await postsModel.updatePost(post);
        return res.status(200).json({
            status: 200,
            message: 'Post updated successfully',
            post: updatedPost
        });
    } catch (error) {
        return res.status(500).json({
            status: 500,
            message: 'Internal server error'
        });
    }
}

async function removePost(req, res) {
    const { post } = req.body;
    try {
        const removedPost = await postsModel.removePost(post);
        return res.status(200).json({
            status: 200,
            message: 'Post removed successfully',
            post: removedPost
        });
    } catch (error) {
        return res.status(500).json({
            status: 500,
            message: 'Internal server error'
        });
    }
}

open the "posts.model.js" file (which stores functions that querying our "MongoDB" with the help of "Mongoose"), and we will use the "findOne" method with the "slug" as a parameter (In Mongoose, findOne is a query method that retrieves the first document matching the specified condition (e.g., { slug }) from the MongoDB collection.), "findOneAndUpdate" (In Mongoose, findOneAndUpdate is a query method that finds a single document matching the specified condition (e.g., { _id: payload._id }), updates it with the given data, and optionally returns the modified document when { new: true } is set.), and "deleteOne" (In Mongoose, deleteOne is a query method that removes the first document matching the specified condition (e.g., { _id: payload._id }) from the MongoDB collection.);

async function getPostBySlug(slug) {
    try {
        const post = await posts.findOne({ slug });
        return post;
    } catch (error) {
        console.error('Error getting post by slug:', error);
        throw error;
    }
}

async function updatePost(payload) {
    try {
        const updatedPost = await posts.findOneAndUpdate({ _id: payload._id }, payload, { new: true });
        return updatedPost;
    } catch (error) {
        console.error('Error updating post:', error);
        throw error;
    }
}

async function removePost(payload) {
    try {
        const removedPost = await posts.deleteOne({"_id": payload._id});
        return removedPost;
    } catch (error) {
        console.error('Error removing post:', error);
        throw error;
    }
}

And that's it, we finished with our backend part, we can call created new routes and update our Mongo database from the server, and now we can move to the client side.

2. Frontend Editing Interface Modernization

As was mentioned earlier we will add a new click event to the "Edit" button in the "Action" menu list in the posts table. That event will redirect the client to the "Post Form" page and add a post "slug" to the main URL. After the "Post Form" page is entered, we will check if the URL has a "slug" and send a request to the backend with that string, just to get post data, and populate our form with that data. The client will have a chance to update that data and press the "Save" button to send an updated post to the server. Looks complicated, so let's do all this modernization step-by-step:

first, we need to add three new endpoints (that we created in the previous stage) into our "posts.service.js" file;

export const getPostBySlug = (slug) => 
    HTTP.get(`/posts/${slug}`).then(({data}) => data );
export const updatePost = (data) => 
    HTTP.post('/posts/update', data).then(({data}) => data );
export const deletePost = (data) => {
    HTTP.post('/posts/remove', data).then(({data}) => data );
}

open our "TableComponent" file, import the "useNavigate" hook, and set the "onClick" event on the "Edit" menu button that will redirect to the "Post Form" page;

import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();

const handleEdit = (item, event) => {
    event.preventDefault();
    navigate(`/post-form/${item.slug}`);
};

<MenuItem onClick={(event) => handleEdit(selectedItem, event)}>Edit</MenuItem>

we will need to have a first, not modified version of our post (to check if the post was updated, and what exactly was updated), so for that purpose, we will use our Redux store. Types: create a new "SET_POST_CLONE" type, add a new "updatedPostClone" reducer, don't forget to add new action and selector also;

SET_UPDATE_POST_CLONE: 'post/SET_UPDATE_POST_CLONE', // new type

export const aSetUpdatePostClone = (post) => { // new action
  return createAction(POST_ACTION_TYPES.SET_UPDATE_POST_CLONE, post);
};

updatePostClone: {}, // initial state

case POST_ACTION_TYPES.SET_UPDATE_POST_CLONE:
  return { ...state, updatePostClone: payload }; // new reducer

export const sUpdatePostClone = (state) => state.post.updatePostClone; // selector

now we can go to the "PostForm" component. We need to import the newly created "action", "selector", and "useEffect" hooks from React, and the "useParams" hook from Router;

import React, { useState, useEffect } from "react";
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate, useParams } from 'react-router-dom';
import { aSetUpdatePostClone } from '../../store/posts/post.action';
import { sUpdatePostClone } from '../../store/posts/post.selector';

const dispatch = useDispatch();
const updatePostClone = useSelector(sUpdatePostClone);
const navigate = useNavigate();
const { slug } = useParams();

let's create a "fetchPostData" function, that will send a request to the server and get back the post data, then save that post data into the storage, and into our "postForm" state. This function should be called from the "useEffect" hook, and only if the "slug" exists, because if we use this form for creating new posts then we simply can not get such data;

useEffect(() => {
    if (slug) {
        fetchPostData(slug);
    }
}, [slug]);

const fetchPostData = async (slug) => {
    const response = await getPostBySlug(slug);
    if (response.status === 200) {
        setpostForm(prev => ({
            ...prev,
            ...response.post
        }));
        let postDeepClone = _.cloneDeep(response.post);
        dispatch(aSetUpdatePostClone(postDeepClone));
    } else {
        dispatch(aPushNewNotification({ type: 'error', message: response.message }));
    }
};

we prepared our "ImageUploader" and "QuillEditor" components for the edit functionality, and now we should simply update the properties values in the "renderSectionComponent" so that they can receive data (images, and text) and render that data in the form;

const renderSectionComponent = (type, index) => {
    switch (slug && typeof type !== "string" ? type.type : type) {
        case 'image':
        return (
            <div className="post-form__container--header">
                <div className="post-form--item">
                    <ImageUploader 
                        key={index} 
                        index={index}
                        onEditPostImage={slug && typeof type !== "string" ? type.file : null}
                        onImageUpload={handleImageUpload}/>
                </div>
                <div className="post-form--item">
                    <TextField 
                        className="post-form--item-input"
                        label="Image Description"
                        id="outlined-size-normal"
                        value={slug ? type.description : ''}
                        onChange={(e) => handleImageDescritionChange(e, index)}/>
                </div>
                <div className="post-form--item">
                    <TextField 
                        className="post-form--item-input"
                        label="Image Alt Text"
                        id="outlined-size-normal"
                        value={slug ? type.alt : ''}
                        onChange={(e) => handleImageAltTextChange(e, index)}/>
                </div>
            </div>
        );
        case 'text':
        return (
            <div className="flex-column">
                <QuillEditor 
                    key={index} 
                    index={index}
                    content={slug && typeof type !== "string" ? type.content : null}
                    onChange={handleQuillTextChange} />
            </div>
        );
        default:
        return null;
    }
};

Nice. Now, we can relaunch our app, and use the "Edit" button, as a result, we will be redirected to the "Post Form" page, and data will be prepopulated in 1-2 seconds.

we have a "handleSubmit" function that sends a new post to the backend, and we will simply modify it with an additional check of "slug", if "slug" exists, then we will use the update feature and not create. Also, we need to check if the main image is the same as was, if not we will remove it and send another, and the same thing we should do to all body images. After that we will push the "update" value to the post body and send the updated post to the server;

const handleSubmit = async (e) => {
    e.preventDefault();
    if (slug) {
        setLoading(true);
        if (!postForm.mainImage.fileData && !postForm.mainImage.file.name) {
            console.log("Please upload a main image");
            dispatch(aPushNewNotification({type: 'error', text: 'Please upload a main image'}));
            setLoading(false);
            return;
        }
         // remove images from the storage, if they were removed from the form
        for (let i = 0; i < updatePostClone.body.length; i++) {
            const bodyElement = postForm.body.find((elem) => elem._id === updatePostClone.body[i]._id);
            if (!bodyElement) {
                if (updatePostClone.body[i].type === 'image') {
                    await removePostImage({imageName:updatePostClone.body[i].file.name});
                }
            }
        }
        // update main image
        if (postForm.mainImage.fileData) {
            let resp1 = await removePostImage({imageName:postForm.mainImage.file.name});
            if (resp1.status === 200) {
                const fileNameParts = postForm.mainImage.fileData.name.split('.');
                const extension = fileNameParts.pop();
                const newImageName = `${fileNameParts.join('.')}_${uuid()}.${extension}`;
                postForm.mainImage.file.name = newImageName;


                const newFile = new File([postForm.mainImage.fileData], newImageName, {
                    type: postForm.mainImage.fileData.type,
                });

                const formData = new FormData();
                formData.append('file', newFile);
                const response = await uploadPostImage(formData);
                postForm.mainImage.file.url = response.imageUrl;
                delete postForm.mainImage.fileData;
            }
        }
        // update or add new images functionality
        for (let i = 0; i < postForm.body.length; i++) {
            if (postForm.body[i].type === 'image') {
                if (postForm.body[i].file instanceof File) {
                    if (postForm.body[i].file.name !== postForm.body[i].name) {
                        let resp2 = await removePostImage({imageName:postForm.body[i].name});
                        if (resp2.status === 200) {
                            const fileNameParts = postForm.body[i].file.name.split('.');
                            const extension = fileNameParts.pop();
                            const newImageName = `${fileNameParts.join('.')}_${uuid()}.${extension}`;
                            const newFile = new File([postForm.body[i].file], newImageName, {
                                type: postForm.body[i].file.type,
                            });
                            const formData = new FormData();
                            formData.append('file', newFile);
                            const response = await uploadPostImage(formData);
                            delete postForm.body[i].file;
                            postForm.body[i].name = newImageName;
                            postForm.body[i].file = {};
                            postForm.body[i].file.url = response.imageUrl;
                            postForm.body[i].file.name = newImageName;
                        }
                    } else {
                        // upload new image
                    }
                }
            }
        }
        postForm.updated = {
            date: {
                day: String(new Date().getDate()).padStart(2, '0'),
                month: String(new Date().getMonth() + 1).padStart(2, '0'),
                year: String(new Date().getFullYear()),
                time: new Date().toTimeString().split(' ')[0],
            }
        };
        try {
            const response = await updatePost({ post: postForm });
            if (response.status === 200) {
                dispatch(aPushNewNotification({
                    type: 'success',
                    text: response.message,
                }));
                setpostForm({}); // set default post value
                setLoading(false);
                navigate('/posts');
            }
        } catch (error) {
            dispatch(aPushNewNotification({
                type: 'error',
                text: response.message,
            }));
            setLoading(false);
            console.log("Error:", error);
        }
    } else {
        // create new post functionality
    }
};

Looks like we did it, let's relaunch our app and run some tests.

3. Removing Posts

This is also an important feature, that takes part in the base "CRUD" operations of every app. We already prepared the backend functionality and part of the frontend, so let's continue...

add "postToRemove" value into our "Redux" store with all settings (reducer, action, selector, type);

postToRemove: null, // post initial state

case POST_ACTION_TYPES.SET_POST_TO_REMOVE:  //post reducer
    return { ...state, postToRemove: payload };

export const aSetPostToRemove = (post) => { // post action
  return createAction(POST_ACTION_TYPES.SET_POST_TO_REMOVE, post);
}

SET_POST_TO_REMOVE: 'post/SET_POST_TO_REMOVE', // post type

export const sPostToRemove = (state) => state.post.postToRemove; //post selector

modify the "Remove" button from the "TableComponent" actions list, with the event listener;

<MenuItem onClick={(event) => handleRemove(selectedItem, event)}>Remove</MenuItem>

create a new "handleRemove" function, that will show the modal window (we already added the "Modal" feature into our app, in one of our previous articles) with the "Remove Post" modal type, and save post data that we are removing into the storage;

const handleRemove = (item, event) => {
    event.preventDefault();
    dispatch(aUpdateModalType('removePost'));
    dispatch(aUpdateModalStatus(true));
    dispatch(aSetPostToRemove(item));
};

create a new "RemovePost.component.jsx" file in the modal folder;
import all necessary hooks, actions, and selectors;

import React, { useState } from "react";
import { useDispatch, useSelector } from 'react-redux';
import { deletePost, removePostImage, getPostsList } from "../../../../http/services/posts.services";
import { aUpdateModalStatus, aUpdateModalType, aPushNewNotification } from '../../../../store/base/base.action';
import { sPostToRemove } from '../../../../store/posts/post.selector';
import { aSetPostsList } from '../../../../store/posts/post.action';

create a "RemovePost" functional component that returns some text with two (remove, cancel) buttons;
add the "hanfleRemovePost" function that will first remove all the images from the storage, and then send a request to remove a post by itself;

const RemovePost = () => {
    const [loading, setLoading] = useState(false);
    const dispatch = useDispatch();
    const postToRemove = useSelector(sPostToRemove);

    const fetchPosts = async () => {
        try {
            const data = await getPostsList();
            dispatch(aSetPostsList(data.posts));
        } catch (error) {
            console.error("Error fetching Posts:", error);
        }
    };

    const handleRemovePost = async () => {
        setLoading(true);
        try {
            if (postToRemove.mainImage.file.name) {
                await removePostImage({imageName:postToRemove.mainImage.file.name});
            }
            if (postToRemove.body.length) {
                for (let i = 0; i < postToRemove.body.length; i++) {
                    if (postToRemove.body[i].type === 'image') {
                        await removePostImage({imageName:postToRemove.body[i].name});
                    }
                }
            }
            await deletePost({post:postToRemove});
            dispatch(aPushNewNotification({
                type: 'success',
                text: 'Post removed successfully',
            }));
            setLoading(false);
            dispatch(aUpdateModalType(null));
            dispatch(aUpdateModalStatus(false));
            fetchPosts();
        } catch (error) {
            dispatch(aPushNewNotification({
                type: 'error',
                text: error.message,
            }));
            setLoading(false);
        }
    };
    const cancel = () => {
        dispatch(aUpdateModalType(null));
        dispatch(aUpdateModalStatus(false));
    };
    return (
        <div className="remove-post-modal">
            {
                loading 
                    ? <Loader />
                    : <p>Are you sure you want to remove this Post?</p>
            }
            <div className="remove-post-modal--buttons">
                <Button variant="outlined" color="success"
                    onClick={handleRemovePost}>
                    Yes, remove!
                </Button>
                <Button variant="outlined" color="error"
                    onClick={cancel}>
                    Cancel
                </Button>
            </div>
        </div>
    );
};

Awesome. You did a great job, and we need to summarize all we were working on and move on.

In this tutorial, we've significantly enhanced our Content Management System by implementing post-editing and removal capabilities. We've successfully:

Developed backend routes and controllers for retrieving, updating, and deleting posts
Created frontend mechanisms to interact with these new server-side functionalities
Implemented complex image handling during post-updates
Added a complete post-removal workflow with image cleanup
These improvements transform our CMS from a basic posting platform to a more dynamic and flexible content management tool. By integrating editing, image management, and deletion features, we've created a more professional and user-friendly content management experience.

The complete code for this tutorial is available in the repository. If you have any questions or run into issues, feel free to leave them in the comments section below.

Found this post useful? ☕ A coffee-sized contribution goes a long way in keeping me inspired! Thank you)

Next step: "CMS Development: Adding Post Preview and Status Management in React and Node.js"

Node.js Image Upload System: File Handling, Storage, and Database Integration

WebCraft Notes — Wed, 04 Jun 2025 13:30:54 +0000

In our previous article, we implemented a client-side image upload functionality using React. Now, it's time to build out the server-side infrastructure to handle these uploads effectively. In this tutorial, we'll create a backend system that not only receives and stores images but also manages their metadata and serves them back to our application. We'll cover setting up file storage, integrating with a database to track image information, and creating endpoints that return essential image data like storage locations. Let's dive into building a complete image management system with Node.js.

1. Configuring New Route, Controller, and Multer for handling multipart/form-data

So, what is the idea? Ok, we will create a separate route that will accept the image, send the file to the storage, and then return some data about that file to the frontend. On the frontend, we will get that data, and add it to the post payload before sending the "create new post" request. Now we will start with configuring a new route in our Node.js server.

inside our "posts.router.js" file we need to add one more route;

postsRouter.post('/post-image', protect, postsController.uploadPostImage);

use the "npm i multer" command to install the "multer" module to our server;
import "fs" (is a built-in Node.js module that provides an API for interacting with the file system, allowing us to read, write, delete, and manage files and directories), path (is a built-in Node.js module that provides utilities for working with file and directory paths, allowing us to resolve, join, normalize, and manipulate paths in a cross-platform way), multer (is a Node.js middleware for handling multipart/form-data, primarily used for uploading files in Express applications);

const multer = require('multer');
const fs = require('fs');
const path = require('path');

define the "uploadPostImage" controller. First, create a "directory" structure where we will store our images, with the help of the "path" module. Second, check if the directory exists, if not create one with the help of the "fs" module. Third, create a storage variable that will store all necessary data for our file success upload (like name, directory, etc...). Finally, build an "upload" function that will use all "storage" and "file" data to upload the file and return the resulting code;

function uploadPostImage(req, res) {
    let uploadDir = path.join(__dirname, '../../../../public/uploads/post-images');
    if (!fs.existsSync(uploadDir)) {
        fs.mkdirSync(uploadDir, { recursive: true });
    }
    const storage = multer.diskStorage({
        destination: (req, file, cb) => {
            cb(null, uploadDir);
        },
        filename: (req, file, cb) => {
            cb(null, file.originalname);
        }
    });
    const upload = multer({ storage }).single('file');
    upload(req, res, (err) => {
        if (err) {
            console.error('Error uploading file:', err);
            return res.status(500).json({ error: 'File upload failed' });
        }
        res.status(200).json({
            status: 200,
            message: 'Post image uploaded successfully',
            imageUrl: req.file.path
        });
    });
}

Nice, now, we have a file uploading feature ready to use in our "server" app, and let's move on.

2. DELETE Endpoint for Image Removal Functionality

We will start from "posts.router.js" file:

create a new "remove-image" route inside our post router list;

postsRouter.post('/remove-image', protect, postsController.deletePostImage);

define the "deletePostImage" controller, which will: receive the image name, create a file path to the folder with our images, and "fs.unlink" (fs.unlink is a Node.js method used to asynchronously delete a file from the filesystem) image we need;

function deletePostImage(req, res) {
    const { imageName } = req.body;
    let uploadDir = path.join(__dirname, '../../../../public/uploads/post-images');
    const filePath = path.join(uploadDir, imageName);
    fs.unlink(filePath, (err) => {
        if (err) {
            console.error('Error deleting file:', err);
            return res.status(500).json({ error: 'File deletion failed' });
        }
        res.status(200).json({
            status: 200,
            message: 'Post image deleted successfully'
        });
    });
}

Great. But we have functionality that allows us to save posts to our database, to fix this we need to modify our frontend part, it should send images into our new routes before saving the post.

3. Sending Images from Frontend Part

We need to open our "posts.services.js" file from the "admin" folder once again and add two more endpoints.

export const uploadPostImage = (data) => 
    HTTP.post('/posts/post-image', data).then(({data}) => data );
export const removePostImage = (data) => 
    HTTP.post('/posts/remove-image', data).then(({data}) => data );

Then, inside the "PostForm.jsx" file we need to import these functions.

import {
    createNewPost,
    uploadPostImage,
    removePostImage
} from "../../http/services/posts.services";

And we need to modify the "handleSubmit" function, we will make "main image" as required so that our post will always have at least one image, and we need to add functionality to save additional images into the post body.

Okay, let's figure out how it should work from the start: we will check if "main image" was added, and if not we will return an error message, then we will create a "newFile" (formData type) variable which will store our image, then we will send this formData into "upload-image" endpoint, then we will modify our "postForm" state and add "main image" data and additional "created" date and time. Additionally, we need to parse "post body" to check if there were additional images and send them to the server in the same way.

const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    if (!postForm.mainImage.fileData) {
        console.log("Please upload a main image");
        dispatch(aPushNewNotification({type: 'error', text: 'Please upload a main image'}));
        setLoading(false);
        return;
    }
    const fileNameParts = postForm.mainImage.fileData.name.split('.');
    const extension = fileNameParts.pop();
    const newImageName = `${fileNameParts.join('.')}_${uuid()}.${extension}`;
    postForm.mainImage.file.name = newImageName;
    const newFile = new File([postForm.mainImage.fileData], newImageName, {
        type: postForm.mainImage.fileData.type,
    });
    const formData = new FormData();
    formData.append('file', newFile);
    const response = await uploadPostImage(formData);
    postForm.mainImage.file.url = response.imageUrl;
    delete postForm.mainImage.fileData;
    for (let i = 0; i < postForm.body.length; i++) {
        if (postForm.body[i].type === 'image') {
            const fileNameParts = postForm.body[i].file.name.split('.');
            const extension = fileNameParts.pop();
            const newImageName = `${fileNameParts.join('.')}_${uuid()}.${extension}`;
            const newFile = new File([postForm.body[i].file], newImageName, {
                type: postForm.body[i].file.type,
            });
            const formData = new FormData();
            formData.append('file', newFile);
            const response = await uploadPostImage(formData);
            delete postForm.body[i].file;
            postForm.body[i].name = newImageName;
            postForm.body[i].file = {};
            postForm.body[i].file.url = response.imageUrl;
            postForm.body[i].file.name = newImageName;
        }
    }
    postForm.created = {
        date: {
            day: String(new Date().getDate()).padStart(2, '0'),
            month: String(new Date().getMonth() + 1).padStart(2, '0'),
            year: String(new Date().getFullYear()),
            time: new Date().toTimeString().split(' ')[0],
        }
    };
    try {
        const response = await createNewPost({ post: postForm });
        if (response.status === 200) {
            dispatch(aPushNewNotification({
                type: 'success',
                text: response.message,
            }));
            setpostForm({
                title: '',
                subTitle: '',
                slug: '',
                status: 'offline',
                archived: false,
                meta: {
                    description: '',
                    keywords: '',
                    schema: '',
                },
                mainImage: {
                    description: '',
                    alt: '',
                    name: '',
                    file: null,
                    fileData: null
                },
                body: [],
                aboutThePost: {
                    preparation: '',
                    cookTime: '',
                    portions: '',
                    difficulty: '',
                }
            });
            setLoading(false);
            navigate('/posts');
        }
    } catch (error) {
        dispatch(aPushNewNotification({
            type: 'error',
            text: response.message,
        }));
        setLoading(false);
        console.log("Error:", error);
    }
};

Yeaks... Yes, I understand that it could be complicated a little bit, but it's ok. Also, that would be a nice fit to you, to separate some "image uploading" functionality into another function to make our "handleSubmit" function more readable. And do not forget to update our "Post" schema in the "posts.mongo.js" file.

Let's reload our app and check the results.

The system we've built provides a solid foundation for handling images in your CMS. You can extend this further by adding features like image optimization, different storage providers like AWS S3, or image transformation capabilities.

Remember to properly handle errors and implement security measures in a production environment. Also, consider implementing file size limits and file type validation to make your system more robust.

The complete code for this tutorial is available in the repository. If you have any questions or run into issues, feel free to leave them in the comments section below.

Found this post useful? ☕ A coffee-sized contribution goes a long way in keeping me inspired! Thank you)

Next step: "React and Node.js CMS Series: Implementing Advanced Post Editing Functionality"

Integrating Quill Editor and Image Upload Functionality in a React CMS

WebCraft Notes — Wed, 28 May 2025 12:10:43 +0000

In any modern CMS system, rich text editing and image management are essential features that significantly enhance content creation. This is why we're integrating these capabilities into our CMS right from the start. For this implementation, we'll be using Quill Editor - a powerful and flexible rich text editor that comes packed with all the necessary formatting tools. Additionally, we'll build a reusable image upload component that can be seamlessly integrated not only with our editor but throughout the entire CMS wherever image handling is needed. Let's start with the Editor first.

1. Implementing Quill Editor: Configuration and Custom Toolbar Setup

A few weeks earlier I was writing about Quill Editor implementation, you can check it here: "Integrating Quill Editor into Your React App: A Step-by-Step Guide". But we will also go through this process step-by-step again over here:

install react-quill dependency into our project with the "npm i react-quill" command;
create a new "QuillEditor.component.jsx" file inside the "components" folder;
we need to import React, ReactQuill, and snow.css styles;

import React, { useState, useEffect } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

create a new "QuillEditor" functional component, with 3 properties in our case: index, content, and onChange event;

const QuillEditor = ({ content, index, onChange }) => {
    const [value, setValue] = useState('');
};
export default QuillEditor;

we need to return "ReactQuill" from our function with theme, value, modules, and onChange listener that will update editor value;

return (
    <ReactQuill 
        theme="snow"
        value={value}
        modules={modules}
        style={{ height: '300px', marginBottom: '80px', maxWidth: '100%' }}
        onChange={handleChange}
    />
);

we will use the "useEffect" hook to respond to content updates, and update value in such cases. Content is a property that will send value from the parent component in case we will need to edit our post, and the "handleChange" function will update data from the editor;

useEffect(() => {
    setValue(content);
}, [content]);

const handleChange = (content) => {
    setValue(content);
    onChange(index, content);
};

and one last touch, we will add a modules object that will identify which modules we should add to the rich editor;

const modules = {
    toolbar: [
        ['bold', 'italic', 'underline', 'strike'],
        ['blockquote', 'code-block'],
        ['link', 'image', 'video', 'formula'],
    ]
};

And that's it, we configure the "QuillEditor" component for the next use in our app, and now we can import this component whenever we need it, for example in our "PostForm.jsx" file.

We need to import our "QuillEditor" component into the posting form, and then fill the "Editor" space in the "renderSectionComponent" function with our "ready to use "Quill Editor".

case 'text':
return (
    <div className="flex-column">
        <QuillEditor 
            key={index} 
            index={index}
            content={type.content}
            onChange={handleQuillTextChange} />
    </div>
);

We will add our main props like index (if we add fue editors to the page we need to know which one should update, and the index will help us with that), content (for future update process), and onChange will trigger handler function to update post text.

const handleQuillTextChange = (index, content) => {
    postForm['body'][index].content = content;
};

Great, we added Quill Editor into our post creation page, we can relaunch our app and check the results, but we should also add image uploader, because visual part of each post is also very important. Let's move to the second part.

2. Creating and Integrating a Custom Image Uploader

As usual, we will implement new functionality step by step, and will start by creating a new file in the "post-form" folder, we will call that file "ImageUploader.component.jsx".

let's create a functional component "ImageUploader" and continue with JSX;
we need to return an "image" in case we already uploaded the image, and input that will accept the file in case we have not uploaded the image yet, also we will add a "replace image" functionality;

return (
  <div>
    {!image ? (
      <div>
        <input
          type="file"
          accept="image/*"
          onChange={handleImageUpload}
          style={{ display: 'none' }}
          id={`fileInput-${index}`}
        />
        <label htmlFor={`fileInput-${index}`} style={{ cursor: 'pointer' }}>
          Drag & drop an image here, or click to select one
        </label>
        {error && <p style={{ color: 'red' }}>{error}</p>}
      </div>
    ) : (
      <div style={{ position: 'relative', display: 'inline-block' }}>
        <img src={import.meta.env.VITE_API_BASE_URL + `/posts/image/` + image.name} alt="Uploaded" style={{ maxWidth: '100%', maxHeight: '300px' }} />
        <button
          onClick={removeImage}
        >
          &times;
        </button>
        <input
          type="file"
          accept="image/*"
          onChange={replaceImage}
          style={{ display: 'none' }}
          id={`replaceInput-${index}`}
        />
        <label htmlFor={`replaceInput-${index}`} style={{ cursor: 'pointer', display: 'block', marginTop: '10px' }}>
          Replace Image
        </label>
      </div>
    )}
  </div>
);

add new image state (place where we will store our uploaded image);

const [image, setImage] = useState(null);

create a new "handleDrop" function, that should receive an event as a parameter, then read the file and save it in the "image" state, and after that, it will be rendered in our "img" tag that we defined earlier;

const handleDrop = (event) => {
  event.preventDefault();
  const file = event.dataTransfer.files[0];
  if (file && file.type.startsWith('image/')) {
    const reader = new FileReader();
    reader.onloadend = () => {
      const result = reader.result;
      setImage(result);
      onImageUpload(file, index);
    };
    reader.readAsDataURL(file);
    setError(null);
  } else {
    setError('Please drop a valid image file.');
  }
};

add "remove" and "replace" image functionalities;

const removeImage = () => {
  setImage(null);
};

const replaceImage = (event) => {
  handleImageUpload(event);
};

define "handleImageUpload" functionality that will be almost the same as "handleDrop", but "handleImageUpload" handles file upload via file input, and "handleDrop" handles file upload via drag-and-drop (that would be nice to create only one function to handle both cases, probably I'm too lazy for this, so if you'll have some time please share with me your results);

const handleImageUpload = (event) => {
  const file = event.target.files[0];
  if (file && file.type.startsWith('image/')) {
    const reader = new FileReader();
    reader.onloadend = () => {
      const result = reader.result;
      setImage(result);
      onImageUpload(file, index);
    };
    reader.readAsDataURL(file);
    setError(null);
  } else {
    setError('Please select a valid image file.');
  }
};

In one of our next articles, we will be implementing "edit" functionality into our app, so I suggest we add this type of functionality to our "Image Uploader" component in this stage.

define new "onImageUpload" (event, that will send image data from the child "Uploader" component to the parent component), "index" (we might have few images in one post, so the index will define each image to each uploader component), "onEditPostImage" (in case we will edit a post, this parameter will send image data from parameter to child) parameters;

const ImageUploader = ({ onImageUpload, index, onEditPostImage }) => {}

That's it, we have a reusable "Image Uploader" and now we can import and use it in our "Post Form", but also we need to add two more inputs that will be updated "image alt text" and "image description" (in case we need to show a simple description of image under that picture).

case 'image':
return (
    <div className="post-form__container--header">
        <div className="post-form--item">
            <ImageUploader 
                key={index} 
                index={index}
                onEditPostImage={slug && typeof type !== "string" ? type.file : null}
                onImageUpload={handleImageUpload}/>
        </div>
        <div className="post-form--item">
            <TextField 
                className="post-form--item-input"
                label="Image Description"
                id="outlined-size-normal"
                value={slug ? type.description : ''}
                onChange={(e) => handleImageDescritionChange(e, index)}/>
        </div>
        <div className="post-form--item">
            <TextField 
                className="post-form--item-input"
                label="Image Alt Text"
                id="outlined-size-normal"
                value={slug ? type.alt : ''}
                onChange={(e) => handleImageAltTextChange(e, index)}/>
        </div>
    </div>
);

Nice, let's rebuild our app and check the results. You should have a fully workable post creation form, but we still can not save all the post data in our database, we will fix it in ournext article.

In this article, we covered two new implementations for a React-based CMS: the Quill Editor integration and a custom Image Uploader component. First, we walked through setting up the Quill Editor, including its installation, component creation, and configuration of modules and event handlers. The implementation features a reusable QuillEditor component that can be easily integrated into forms and supports rich text formatting.

Next, we developed an ImageUploader component that provides both drag-and-drop and click-to-upload functionality. This component includes features like image preview, replacement options, and integration with parent components through props. We also added support for image metadata with fields for alt text and descriptions, making it suitable for both new content creation and post-editing scenarios.

Both implementations were designed with reusability in mind, allowing them to be used throughout the CMS wherever rich text editing or image upload capabilities are needed. The components are also prepared for future functionality, such as post-editing, making them valuable additions to any React-based CMS system.

If you will need a source code for this tutorial you can get it here.

Found this post useful? ☕ A coffee-sized contribution goes a long way in keeping me inspired! Thank you)

Next step: "Integrating Quill Editor and Image Upload Functionality in a React CMS"

React Post Creation Form: Building the Frontend for Your Content Management System

WebCraft Notes — Wed, 21 May 2025 08:34:27 +0000

Following our successful backend implementation for post creation, it's time to build an intuitive frontend interface that will bring our CMS to life. While we've already added a posts page, today we'll focus on implementing a crucial feature - the post creation form.

In this comprehensive guide, we'll walk through building a dynamic post creation interface using React. We'll create a user-friendly form that includes all essential fields from our MongoDB schema - from basic title and subtitle inputs to meta information and a rich text editor for content management. We'll also implement proper navigation from the posts list to our new creation form, ensuring a seamless user experience. Okay, so let's start:

1. Preparing a new "create-post" route

As was mentioned we already have a "posts" page and now we need to add a top section with "create new post", and "filters" buttons, and also a "search" field.

create new "posts" folder inside the "views" folder of the "components" directory;
add new "PostsAction.component.jsx" and "postsAction.styles.scss" files;
we need to import some icons from the "MUI-icons" and "useNavigate" hook, and the "TextField" component for the search field and then return the JSX component;

import React from "react";
import { useNavigate } from "react-router-dom";
import "./postsAction.styles.scss";
import TextField from '@mui/material/TextField';
import AddIcon from '@mui/icons-material/Add';
import FilterAltIcon from '@mui/icons-material/FilterAlt';
import SearchIcon from '@mui/icons-material/Search';

const PostsAction = () => {
    const navigate = useNavigate();
    return (
        <div className="posts-action">
            <div className="posts-action__buttons">
                <button className="posts-action__buttons--item"
                    onClick={() => navigate("/post-form") }>
                    <AddIcon />
                </button>
                <button className="posts-action__buttons--item">
                    <FilterAltIcon />
                </button>
            </div>
            <div className="posts-action__search">
            <TextField
                label="Search"
                id="outlined-size-small"
                size="small"
                value={}
                onChange={(e) => ()}
                />
                <button className="posts-action__search--button">
                    <SearchIcon />
                </button>
            </div>
        </div>
    );
}

export default PostsAction;

open the "Posts.jsx" file from the "posts" folder in the "views" directory, import our "PostsAction" component, and add it to the page;

import React from 'react';
import './posts.styles.scss';
import PostsAction from '../../components/views/posts/PostsAction.component';

const Posts = () => {
    return (
        <div className="Posts">
            <PostsAction />
        </div>
    );
}

export default Posts;

we have to add a new "PostForm.jsx" file into the "post-form" folder in the "views" directory;
import "PostForm" into our "App.jsx" file, and then register a new route;

<Route path="/" element={<MainLayout />}>
  <Route index element={<Dashboard />} />
  <Route path='analytics' element={<Analytics />} />
  <Route path='posts' element={<Posts />} />
  <Route path="post-form" element={<PostForm />} />
</Route>

Great. In this part, we created a new section in the "posts" page with the control buttons and registered a new "create post" page. Let's go further and start working on a new post creation form.

2. Creating a Post Form Component

we need to import a few icons, hooks, our loader component, and some "MUI" components;
we will start from the end, and configure the return JSX section. We need to build a structured form with the text fields for each backend defined values like "title", "subTitle" etc...;
we have a body key in the post object, it is an array of possible sections (in our case Text or Image), and we will render through an Array method "map", and need to add an "Autocomplete" dropdown of those sections. Our starting component will look like:

import React, { useState, useEffect } from "react";
import { useNavigate, useParams } from 'react-router-dom';
import Loader from "../../components/ui/loader/Loader.component";
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
const postForm = () => {
return (
    <div className="post-form">
        <div className="post-form__container">
            <div className="post-form__container--header">
                <p className="post-form__container--header-text">Header</p>
                <div className="post-form--item">
                    <TextField 
                        className="post-form--item-input"
                        label="Title"
                        id="outlined-size-normal"
                        value={postForm.title}
                        onChange={(e) => setpostForm((prev) => ({ ...prev, title: e.target.value }))}/>
                </div>
                ... Additional Fields ...
            </div>
        </div>
        <div className="post-form__container">
            <div className="post-form__container--header">
                <p className="post-form__container--header-text">Body</p>
                <div className="post-form__body">
                    {sections.map((section, index) => (
                        <div key={index} className="post-form__body--section">
                            {renderSectionComponent(section, index)}
                        </div>
                    ))}
                </div>
                <div className="post-form--item post-form--item--body">
                <Autocomplete
                    disablePortal
                    id="combo-box-demo"
                    options={bodyOptions}
                    sx={{ width: 300 }}
                    value={bodyOptions.find(option => option.value === selectedSection) || null}
                    onChange={(event, newValue) => setSelectedSection(newValue ? newValue.value : null)}
                    renderInput={(params) => <TextField {...params} label="Choose Section Type" />}
                    />
                    <button className="post-form--item--body-button"
                        onClick={handleAddSection}>
                        {loading ? <Loader /> : 'Add Section'}
                    </button>
                </div>
            </div>
        </div>
         ... Settings Section ...
        <div className="post-form__actions">
            <div className="post-form__actions--button">
                <button className="post-form__actions--button-create" 
                    onClick={handleSubmit}>
                    {loading ? <Loader /> : slug ? 'Update Post' : 'Create Post'}
                </button>
            </div>
        </div>
    </div>
);

let's create a "renderSectionComponent" function that will get type and return a JSX (image or text) editor or image uploader (we will take care of it in the next article);

const renderSectionComponent = (type, index) => {
    switch (slug && typeof type !== "string" ? type.type : type) {
        case 'image':
        return (
            <div className="post-form__container--header">
                ImageUploader
            </div>
        );
        case 'text':
        return (
            <div className="flex-column">
                Editor
            </div>
        );
        default:
        return null;
    }
};

also we need to define the "selectedSection", and "postForm" value itself, loading;

const navigate = useNavigate();
const [loading, setLoading] = useState(false);
const [selectedSection, setSelectedSection] = useState(null);
const [postForm, setpostForm] = useState({
    title: '',
    subTitle: '',
    slug: '',
    status: 'offline',
    archived: false,
    meta: {
        description: '',
        keywords: '',
        schema: '',
    },
    body: []
});
const bodyOptions = [
    { label: 'Image', value: 'image' },
    { label: 'Text', value: 'text' },
];
const languages = [
    { label: 'Ukrainian', value: 'uk' },
    { label: 'English', value: 'en' },
    { label: 'Spanish', value: 'es' },
];

and our final touch, for now, will be creating a "handleSubmit" function that will get the form data, push created value, handle loader, and notification and send it to the server;

const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    postForm.created = {
        date: {
            day: String(new Date().getDate()).padStart(2, '0'),
            month: String(new Date().getMonth() + 1).padStart(2, '0'),
            year: String(new Date().getFullYear()),
            time: new Date().toTimeString().split(' ')[0],
        }
    };
    try {
        const response = await createNewPost({ post: postForm });
        if (response.status === 200) {
            dispatch(aPushNewNotification({
                type: 'success',
                text: response.message,
            }));
            setpostForm({
                title: '',
                subTitle: '',
                slug: '',
                status: 'offline',
                archived: false,
                meta: {
                    description: '',
                    keywords: '',
                    schema: '',
                },
                body: [],
            });
            setLoading(false);
            navigate('/posts');
        }
    } catch (error) {
        dispatch(aPushNewNotification({
            type: 'error',
            text: response.message,
        }));
        setLoading(false);
        console.log("Error:", error);
    }
};

Let's restart our React app and check the UI result.

Looks great, but we still do not have the possibility to upload images and work with the text, I suggest we fix this temporary problem in the next article.

You can find the complete code for this implementation in the archive.

Stay tuned for the next part where we'll transform this basic form into a full-featured post editor with media handling capabilities!

Found this post useful? ☕ A coffee-sized contribution goes a long way in keeping me inspired! Thank you)

Next step: "Integrating Quill Editor and Image Upload Functionality in a React CMS"

Content Management System: Building a Post Creation System from Scratch with Node js

WebCraft Notes — Wed, 14 May 2025 10:45:01 +0000

If you will need a source code for this tutorial you can get it here.

Building a content management system is an exciting journey, and today we're diving into its core functionality - post creation. In this comprehensive guide, we'll walk through implementing a robust post management system from the ground up. We'll start by establishing a solid backend foundation with Node.js, setting up the necessary routes, models, and controllers. Then, we'll move forward to create an intuitive frontend interface that integrates with our API.

This approach - beginning with the backend and then progressing to the frontend - will help us understand the complete data flow and ensure a well-structured application architecture. So let's start from building the typical "post schema", probably while developing or adding more features to the post we will modify it's schema, but for now we will add simple necessary fields.

1. Setting Up the Post Model (MongoDB Schema)

In one of our previous articles, we created our first "user" schema. Now we need to repeat this process, but only for our article entity. Let's do it:

define necessary "post" fields. For example, I will set fields like title, subtitle, three meta fields (keywords, description, and schema), URL, language, status, archive, created, updated, and body (Array), which will store a list of text parts... ;
create new "posts" folder inside the "models" folder;
add new "posts.mongo.js" file;
import "mongoose" and define a new "postSchema" with the "mongoose.Schema" method;

const mongoose = require('mongoose');

const postSchema = new mongoose.Schema({
    title: {
        type: String,
        default: ''
    },
    subTitle: {
        type: String,
        default: ''
    },
    status: {
        type: String,
        default: ''
    },
    archived: {
        type: Boolean,
        default: false
    },
    slug: {
        type: String,
        default: ''
    },
    language: {
        type: String,
        default: ''
    },
    created: {
        date: {
            day: {
                type: String,
                default: ''
            },
            month: {
                type: String,
                default: ''
            },
            year: {
                type: String,
                default: ''
            },
            time: {
                type: String,
                default: ''
            }
        },
        user: {
            type: String,
            default: ''
        }
    },
    updated: {
        date: {
            day: {
                type: String,
                default: ''
            },
            month: {
                type: String,
                default: ''
            },
            year: {
                type: String,
                default: ''
            },
            time: {
                type: String,
                default: ''
            }
        },
        user: {
            type: String,
            default: ''
        }
    },
    meta: {
        description: {
            type: String,
            default: ''
        },
        keywords: {
            type: String,
            default: ''
        },
        schema: {
            type: String,
            default: ''
        }
    },
    body: [
        {
            type: {
                type: String,
                default: ''
            },
            content: {
                type: String,
                default: ''
            },
        }
    ],
});

module.exports = mongoose.model('Post', postSchema);

Something like that. You can change those fields, depending on your post structure. Okay, let's move to creating new post functionality.

2. Creating Post Functions (Service Layer)

In this section, we need to simply add a function that will get the post as a payload and save it in our "posts" db.

import our "posts" schema from "posts.mongo";
add a "createNewPost" function with the "mongoose" create method;

async function createNewPost(payload) {
    try {
        const newPost = await posts.create(payload);
        return newPost;
    } catch (error) {
        console.error('Error creating new post:', error);
        throw error;
    }
}

3. Establishing Post Routes (API Endpoints)

The most interesting part is where we will define the new "posts" API group with the first route.

create a new "posts" folder inside the "routes" directory;
add new "posts.router.js" file, where we need to import express, define new "postsRouter" and set the first post route;

const express = require('express');
const postsRouter = express.Router();

postsRouter.post('/create', postsController.createNewPost);

module.exports = postsRouter;

inside the "api.js" file import and use our posts routes;

const express = require('express');
const usersRouter = require('./users/users.router');
const postsRouter = require('./posts/posts.router');
const api = express.Router();

api.use('/api/users', usersRouter);
api.use('/api/posts', postsRouter);

module.exports = api;

That's it, now we have the first post route that should trigger "controller" which we will define in the next part and save a new post.

4. Building the Post Controller

It will be a simple controller that will receive a post from the request body, use the "createNewPost" function from the post model, and return some result (success or error, if success then it's a good fit to return the created post).

async function createNewPost(req, res) {
    const { post } = req.body;
    if (!post) {
        return res.status(400).json({
            status: 400,
            message: 'Post is required'
        });
    }
    try {
        const newPost = await postsModel.createNewPost(post);
        return res.status(200).json({
            status: 200,
            message: 'Post created successfully',
            post: newPost
        });
    } catch (error) {
        return res.status(500).json({
            status: 500,
            message: 'Internal server error'
        });
    }
}

Awesome, we did it, we prepared our backend infrastructure to accept and save post from the client side.

In this guide, we've successfully built a foundational backend structure for post creation in our content management system. We've covered all essential components:

Created a flexible MongoDB schema that can accommodate various post attributes
Implemented a service layer with a robust post creation function
Set up API routing with Express
Built a controller to handle post creation requests with proper error handling
This backend infrastructure now serves as a solid foundation for building the frontend interface. With these components in place, you can now securely create and store posts in your CMS, and easily extend the functionality to include features like post updating, deletion, and retrieval.

In the next article, we'll focus on building the frontend interface that will interact with these endpoints, allowing users to create posts through an intuitive UI. See you on the next article and Happy Coding!

If you need a source code for this tutorial you can get it here.

Found this post useful? ☕ A coffee-sized contribution goes a long way in keeping me inspired! Thank you)

Next step: "React Post Creation Form: Building the Frontend for Your Content Management System"

React and Node.js CMS Series: Implementing Post Lists with Advanced Table Features

WebCraft Notes — Wed, 07 May 2025 10:29:21 +0000

If you will need a source code for this tutorial you can get it here.

Following our previous article 'Building a React CMS: Fonts, SCSS Resets, and Layout Implementation' where we established our core layout structure, we're ready to enhance our Posts page with dynamic functionality. In this tutorial, we'll transform the static Posts page into an interactive data management interface. We'll build a feature-rich posts table in React and develop the corresponding Node.js backend endpoints to serve our post data efficiently. Okay, let's do it:

1. Step-by-Step: Building and Implementing Posts Table from Scratch.

create a new "Table.component.jsx" file inside the "components" folder, with the "TableComponent" function that will return JSX;
create "table" tag with 5 headers: post, status, language, created at, action;
continue with "table body", each table row will render a small post image and post title, language, post created date, and action (small menu with the list of additional functionality like edit, change status, or preview...);
implement a "TablePagination" component from MUI;

const TableComponent = () => {
return (
        <div className="table-container">
            <table className="custom-table">
                <thead>
                    <tr>
                        <th>POST</th>
                        <th>STATUS</th>
                        <th>LANGUAGE</th>
                        <th>CREATED AT</th>
                        <th>ACTION</th>
                    </tr>
                </thead>
                <tbody>
                {data.map((item, index) => {
                    let imageUrl = import.meta.env.VITE_API_BASE_URL + `/posts/image/` + item.mainImage.file.name;
                    return (
                        <tr key={index}>
                            <td className="PostTableItem-cell">
                                <img src={imageUrl} alt={item.mainImage.alt} className="PostTableItem-image" />
                                <div className="PostTableItem-details">
                                    <p className="PostTableItem-title">{item.title}</p>
                                    <p className="PostTableItem-subTitle">{item.subTitle}</p>
                                </div>
                            </td>
                            <td className="status-cell">
                                {
                                    item?.status === 'online'
                                        ? <span className="status-cell-online">{item?.status}</span>
                                        : <span className="status-cell-offline">{item?.status}</span>
                                }
                            </td>
                            <td className="language-cell">{item.language}</td>
                            <td className="created-cell">
                                <span>
                                    {item.created.date.day}
                                    /
                                    {item.created.date.month}
                                    /
                                    {item.created.date.year + ' ' + item.created.date.time}
                                </span>
                            </td>
                            <td className="action-cell">
                                <Button
                                    id="basic-button"
                                    aria-controls={open ? 'basic-menu' : undefined}
                                    aria-haspopup="true"
                                    aria-expanded={open ? 'true' : undefined}
                                    onClick={(event) => handleClick(event, item)}
                                >
                                    <SettingsIcon />
                                </Button>
                                <Menu
                                    id="basic-menu"
                                    anchorEl={anchorEl}
                                    open={open}
                                    onClose={handleClose}
                                    MenuListProps={{
                                    'aria-labelledby': 'basic-button',
                                    }}
                                >
                                    <MenuItem >Preview</MenuItem>
                                    <MenuItem >Edit</MenuItem>
                                    <MenuItem >{
                                        selectedItem?.status === 'online'
                                            ? 'Deactivate'
                                            : 'Activate'
                                    }</MenuItem>
                                    <MenuItem >Remove</MenuItem>
                                </Menu>
                            </td>
                        </tr>
                    );
                })}
                </tbody>
            </table>
            <TablePagination
                className="table-container--pagination"
                component="div"
            />
        </div>
    );
};

export default TableComponent;

Something like this, unfortunately, I can not paste all styles but you can find them in the repo.

We have a table but with no data, we need to configure data fetching functionality to get data from the server, that is what we will do next.

import "useEffect", and "useState" hooks from "React", and main hooks from "Redux" (we will store posts in our Redux Store), also we will use our "Notification" module (we need to import actions too), and MUI components;

import React, { useState, useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { aPushNewNotification } from '../../../../../store/base/base.action';
import { aSetPostsList } from '../../../../../store/posts/post.action';
import { getPostsList } from '../../../../../http/services/posts.services';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import Button from '@mui/material/Button';
import SettingsIcon from '@mui/icons-material/Settings';
import TablePagination from '@mui/material/TablePagination';

create new "posts" store structure with "SET_POSTS" type, "sPostsList" selector, "aSetPostsList" action, and "posts" reducer;

import POST_ACTION_TYPES from './post.types';

export const POST_INITIAL_STATE = {
    postsList: [],
};
export const postReducer = (state = POST_INITIAL_STATE, action = {}) => {
    const { type, payload } = action;
    switch (type) {
        case POST_ACTION_TYPES.SET_POSTS_LIST:
            return { ...state, postsList: payload };
        default:
            return state;
    }
};

inside the "services" folder, in our new "posts.services.js" file we will add the "getPostsList" function;

export const getPostsList = (data) => {
    return HTTP.get(`/posts`, data).then(({ data }) => data);
};

after we prepared all the structure we can start fetching data. Add a new "fetchData" function inside the "Table" component, and call this function in the "useEffect" hook, after the page is created. The "fetchData" function after receiving data will save the "posts" list into the storage;

const data = useSelector(sPostsList);
const fetchData = async () => {
    try {
        const response = await getPostsList();
        dispatch(aSetPostsList(response.posts));
    } catch (error) {
        console.error("Error fetching Posts:", error);
        dispatch(aPushNewNotification({ type: 'error', text: 'Failed to fetch Posts' }));
    }
};
useEffect(() => {
    fetchData();
}, []);

You can check that we also use "data" to render our table. It will not work now correctly until we configure the backend part (soon).

import our "Table" component into the newly created "PostsTable.component.jsx" file, a new functional component that will wrap our Table in an additional "div", for design purposes;

import TableComponent from './table-component/Table.component';
const PostsTable = () => {
    return (
        <div className="posts-table">
            <h2 className="posts-table__title">Posts</h2>
            <div className="posts-table__content">
                <TableComponent />
            </div>
        </div>
    );
};
export default PostsTable;

create a new "PostsAction.component.jsx" file, that will render the "create" and "filters" buttons, and probably the "search" field;

const PostsAction = () => {
    return (
        <div className="posts-action">
            <div className="posts-action__buttons">
                <button className="posts-action__buttons--item">
                    <AddIcon />
                </button>
                <button className="posts-action__buttons--item">
                    <FilterAltIcon />
                </button>
            </div>
            <div className="posts-action__search">
            <TextField
                label="Search"
                id="outlined-size-small"
                size="small"
                />
                <button className="posts-action__search--button">
                    <SearchIcon />
                </button>
            </div>
        </div>
    );
}
export default PostsAction;

the last step, is to modify our "Posts" page and import the list and action components;

Great, we can move to the backend part finally.

2. Prepare the Server Structure to Return Posts List.

Before working with the posts module, we need to update our server structure.

create a new "api.js" file inside the "routes" folder, which will be general API storage for different routes;

const express = require('express');
const usersRouter = require('./users/users.router');
const postsRouter = require('./posts/posts.router');
const api = express.Router();

api.use('/api/users', usersRouter);
api.use('/api/posts', postsRouter);

module.exports = api;

apply our API middleware function into our express server, inside the "app.js" file;

app.use(api);

create a new "posts" folder inside our routes and add "router" and "controller" files. Import "express" and "posts.controller" and define first our "get" route;

const express = require('express');
const postsController = require('./posts.controller');
const postsRouter = express.Router();

postsRouter.get('/', postsController.getPostsList);
module.exports = postsRouter;

configure a new "getPostsList" controller, that will use the "posts" model and try to get data from the database;

async function getPostsList(req, res) {
    try {
        const data = await postsModel.getPostsList();
        return res.status(200).json({
            status: 200,
            ...data
        });
    } catch (error) {
        console.error('Error getting posts list:', error);
        return res.status(500).json({
            status: 500,
            message: 'Internal server error'
        });
    }
}

now we should create a model file, that will get data from the "MongoDB" and return it to the client;

async function getPostsList() {
    try {
        const postsList = await posts.find();
        return { posts: postsList };
    } catch (error) {
        console.error('Error getting posts list:', error);
        throw error;
    }
}

But we do not have a post creation functionality yet, so we can simply return some hardcoded list of posts now, and that would be fine for us.

Fantastic, we need to reload the app and check the results on our "Posts" page.

In this tutorial, we've transformed our CMS Posts page from a static interface to a dynamic, feature-rich data management system using React and Node.js. We've successfully implemented a comprehensive posts table that not only displays data efficiently but also sets the groundwork for advanced functionality like sorting, filtering, and pagination.

Remember that building a robust CMS is an iterative process. Each feature you add should focus on improving user experience and making content management more efficient and intuitive. The skills and patterns demonstrated in this tutorial are transferable to many types of web applications, providing you with valuable insights into modern web development practices. Stay tuned, we will continue soon.

If you need a source code for this tutorial you can get it here.

Found this post useful? ☕ A coffee-sized contribution goes a long way in keeping me inspired! Thank you)

Next step: "Content Management System: Building a Post Creation System from Scratch with Node js"

Enhancing User Experience: Implementing Notifications, Modals and Loaders in a React-based CMS

WebCraft Notes — Wed, 30 Apr 2025 11:16:01 +0000

If you need a source code for this tutorial you can get it here.

Enhancing user experience is crucial for any modern Content Management System. In this article, we'll dive into implementing three essential UI components that will significantly improve the interactivity and feedback of our React-based CMS: Notifications for user feedback, and Loaders for managing loading states. These components will not only make our CMS more professional but also provide users with clear visual feedback during their interactions. So, let's start:

1. Implementing the Notification System

One of the most important things that we need to understand is that all these UX parts will be components that we will need to use on many different pages, so they need to be available globally. This task will solve our "Redux" storage, which we implemented in our previous article. Also, we will create a notification system where we can show many messages at the same time, that is why we will need an Array as a container for messages list and message component itself. Don't worry, everything will be clear when we start coding.

create a new folder in the "store", we will call it "base";
inside "base" folder we will create "base.reducer.js", "base.action.js", "base.selector.js", "base.types.js" files;
inside the "types" file we need to add two types for creating and removing messages;

const BASE_ACTION_TYPES = {
    PUSH_NEW_NOTIFICATION: 'base/PUSH_NEW_NOTIFICATION',
    REMOVE_NOTIFICATION: 'base/REMOVE_NOTIFICATION',
};

export default BASE_ACTION_TYPES;

"state" will contain an empty array of our notifications, and "reducer" will have two cases (push new notification, and filter only active notifications);

import BASE_ACTION_TYPES from './base.types';

export const BASE_INITIAL_STATE = {
    notifications: [],
};
export const baseReducer = (state = BASE_INITIAL_STATE, action = {}) => {
    const { type, payload } = action;
    switch (type) {
        case BASE_ACTION_TYPES.PUSH_NEW_NOTIFICATION:
            return { ...state, notifications: [payload, ...state.notifications] };
        case BASE_ACTION_TYPES.REMOVE_NOTIFICATION:
            return { ...state, notifications: state.notifications.filter((n) => n.id !== payload) };
        default:
            return state;
    }
};

the "action" file will also contain two actions, the first one will create a new notification with a unique ID and set a timeout value that will remove this notification from the list, and the second one will remove one notification by ID;

import { v4 as uuid } from 'uuid';
import BASE_ACTION_TYPES from './base.types';
import { createAction } from '../../utils/reducer.utils';

export const aPushNewNotification = (notification) => {
  return (dispatch) => {
    notification.id = uuid();
    dispatch(createAction(BASE_ACTION_TYPES.PUSH_NEW_NOTIFICATION, notification));
    setTimeout(() => {
      dispatch(aRemoveNotification(notification.id));
    }, 5000);
  };
};

export const aRemoveNotification = (id) =>
  createAction(BASE_ACTION_TYPES.REMOVE_NOTIFICATION, id);

"selector" will simply return the list of notifications;

export const sNotificationsList = (state) => state.base.notifications;

It looks great, we prepared our storage for implementing Notifications functionality into our React CMS, now we can move to the "notifications" components.

create a new "UI" folder inside "components", and a new "notification" folder;
add a new "Notification.component.jsx" file that will import the "useDispatch" hook, a list of icons from the "MUI" library, and a "remove" notification action. It will have a remove notification function that will call our action, and this component will return three types of notifications (success, error, warning), that will depend on the notification type;

import React from 'react';
import { useDispatch } from 'react-redux';
import { aRemoveNotification } from '../../../store/base/base.action';
import CheckIcon from '@mui/icons-material/Check';
import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
import PriorityHighOutlinedIcon from '@mui/icons-material/PriorityHighOutlined';
import ReportProblemOutlinedIcon from '@mui/icons-material/ReportProblemOutlined';

const Notification = ({ notification }) => {
    const dispatch = useDispatch();
    const closeNotification = () => {
        dispatch(aRemoveNotification(notification.id));
    }

    if (notification.type === 'error') {
        return (
            <div className="notification">
                <div className="alert alert-error">
                    <div className="icon__wrapper">
                        <PriorityHighOutlinedIcon className="icon-style" />
                    </div>
                    <p>{notification.text}</p>
                    <CloseOutlinedIcon className="close" onClick={closeNotification} />
                </div>
            </div>
        );
    } else if (notification.type === 'success') {
        return (
            <div className="notification">
                <div className="alert alert-success">
                    <div className="icon__wrapper">
                        <CheckIcon className="icon-style" />
                    </div>
                    <p>{notification.text}</p>
                    <CloseOutlinedIcon className="close" onClick={closeNotification} />
                </div>
            </div>
        );
    } else if (notification.type === 'warning') {
        return (
            <div className="notification">
                <div className="alert alert-warning">
                    <div className="icon__wrapper">
                        <ReportProblemOutlinedIcon className="icon-style" />
                    </div>
                    <p>{notification.text}</p>
                    <CloseOutlinedIcon className="close" onClick={closeNotification} />
                </div>
            </div>
        );
    }
};
export default Notification;

add a "NotificationContainer.component.jsx" file that will import our "Notification" component, and render a list of notifications from our storage;

import React from 'react';
import { useSelector } from 'react-redux';
import { sNotificationsList } from '../../../store/base/base.selector';
import Notification from './Notification.component';
import './notification.styles.scss';

const NotificationContainer = () => {
    const notificationsList = useSelector(sNotificationsList);
    return (
        <div className="notification-container">
            {notificationsList.map((notification) => (
                <Notification key={notification.id} notification={notification} />
            ))}
        </div>
    );
};
export default NotificationContainer;

Awesome. We finished with notification development, now we can add this container to the layouts.

import React from 'react';
import { Outlet } from 'react-router-dom';
import NotificationContainer from '../../components/ui/notification/NotificationContainer.component';
import './emptyLayout.styles.scss';

const EmptyLayout = () => {
  return (
    <div className='emptyLayout'>
      <NotificationContainer />
      <Outlet />
    </div>
  );
};
export default EmptyLayout;

And finally, we can use it on every page we will need it. For example, let's add a notification to our "registration" function so that our app can inform users about successes or errors.

const handleSubmit = async (e) => {
    e.preventDefault();
    const result = await registerNewUser({name, email, password});
    if (result.status === 'success') {
        navigate('/auth/login');
        dispatch(aPushNewNotification({
            type: 'success',
            text: 'You have successfully registered. Please login.',
        }));
    } else {
        dispatch(aPushNewNotification({
            type: 'error',
            text: result.message,
        }));
    }
}

Restart the CMS frontend part, and try the registration process from the beginning to check the result.

Yes, it works, great job and let's move on.

2. Reusable Modal System

A modal is a UI component that appears as an overlay on top of the main content, typically used to display important information, forms, or user actions without navigating away from the current page. It often requires user interaction to close or proceed. We will create a reusable "modal" component so that we can use it whenever we need, as a confirmation popup for example, let's start:

add new data (modal status and modal type) into the state and new reducers to update those states into the "base.reducer.js" file;

modalStatus: false,
modalType: '',

case BASE_ACTION_TYPES.UPDATE_MODAL_STATUS:
    return { ...state, modalStatus: payload };
case BASE_ACTION_TYPES.UPDATE_MODAL_TYPE:
    return { ...state, modalType: payload };

we will need two new selectors;

export const sModalStatus = (state) => state.base.modalStatus
export const sModalType = (state) => state.base.modalType

two new actions and types;

export const aUpdateModalStatus = (status) =>
  createAction(BASE_ACTION_TYPES.UPDATE_MODAL_STATUS, status);
export const aUpdateModalType = (type) =>
  createAction(BASE_ACTION_TYPES.UPDATE_MODAL_TYPE, type);

UPDATE_MODAL_STATUS: 'base/UPDATE_MODAL_STATUS',
UPDATE_MODAL_TYPE: 'base/UPDATE_MODAL_TYPE',

create a new "Modal.component.jsx" file in the "components" folder;
we need to import modal selectors, actions, and main hooks;

import React from "react";
import { useDispatch, useSelector } from 'react-redux';

import { aUpdateModalStatus } from '../../../store/base/base.action';
import { sModalType } from '../../../store/base/base.selector';
import "./modal.styles.scss";

we will create a "Modal" functional component, that will return "div" that will contain a function that will dynamically return the component as a type of modal itself;

const Modal = () => {
    const dispatch = useDispatch();
    const modalType = useSelector(sModalType);
    const renderModalType = (type) => {
        switch (type) {
            case 'removePost':
                return <RemovePost />;
            case 'filterModal':
                return <FilterModal />;
            default:
                return null;
        }
    }
    return (
        <div className="modal">
            <div className="modal__content">
                <div className="modal__close">
                    <CloseOutlinedIcon onClick={() => dispatch(aUpdateModalStatus(false))}/>
                </div>
                {renderModalType(modalType)}
            </div>
        </div>
    );
};
export default Modal;

Great, now, whenever we would need a modal, we can create a neccesary component itself, and our reusable modal will render that component. We will check its functionality in one of our next article.

3. Basic Loader Implementation

A Loader is a visual element that provides feedback to users when content or data is being processed, typically displayed during asynchronous operations like API calls or page transitions. It helps improve user experience by indicating that the application is working rather than frozen, and can take various forms such as spinning animations, progress bars, or skeleton screens.

I like spinners and I like the "CSS Loaders" service with a huge amount of beautiful loaders. I chose a simple spinner, and let's start implementing it.

create a new "loader" folder inside the "ui" folder;
create new, simple "Loader.component.jsx", and "loader.styles.scss" files;
add a simple component that will return a "div" tag;

import React from "react";
import "./loader.styles.scss";

const Loader = () => {
    return (
        <div className="loader"></div>
    );
};
export default Loader;

copy and paste CSS styles from the "CSS Loaders" service;
open the "Registration" component and import the "Loader" component;
create a new "loading" state, that will control appearance;
update "Create Account" button (we need to show loader or text);

<button 
    className='ghost-round full-width loader-styles'
    onClick={handleSubmit}>
    {loading ? <Loader /> : 'Create Account'}
</button>

and we need to update our "Submit" function so that it changes the "loading" state (true at the beginning and false at the end);

const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    const result = await registerNewUser({name, email, password});
    if (result.status === 'success') {
        setLoading(false);
        navigate('/auth/login');
        dispatch(aPushNewNotification({
            type: 'success',
            text: 'You have successfully registered. Please login.',
        }));
    } else {
        setLoading(false);
        dispatch(aPushNewNotification({
            type: 'error',
            text: result.message,
        }));
    }
}

Done. We finished with Loader and Notifications, and we can restart our dev server and check the result.

In this article, we've successfully enhanced our React-based CMS with two essential UI components that significantly improve user experience. We implemented a flexible notification system that provides clear feedback through success, error, and warning messages, managed globally through Redux. We also added a sleek loader component that gives users visual feedback during asynchronous operations.

These additions make our CMS more professional and user-friendly. With these components in place, our CMS now offers a more polished and responsive user experience. In the next articles, we'll continue building more advanced features to make our CMS even more powerful and user-friendly.

If you need a source code for this tutorial you can get it here.

Found this post useful? ☕ A coffee-sized contribution goes a long way in keeping me inspired! Thank you)

Next step: "React and Node.js CMS Series: Implementing Post Lists with Advanced Table Features"

Redux Integration: Enhancing Your Node.js and React CMS

WebCraft Notes — Wed, 23 Apr 2025 15:31:00 +0000

We've reached the next crucial milestone in building our CMS: configuring Redux, which we installed in the previous step. Before we dive into the configuration process, it's important to address a fundamental question: Why do we need additional storage on the front-end side?

In modern web applications, especially complex ones like content management systems, managing state becomes increasingly challenging as the application grows. While React provides a local component state, it can become cumbersome to pass data between deeply nested components or share states across unrelated parts of the application. This is where Redux comes in.

Redux offers a centralized store for all the states in your application. This centralization brings several benefits:

Single Source of Truth: All your application state is stored in one place, making it easier to understand and manage.
Predictable State Updates: State changes become more predictable as they follow a strict unidirectional data flow.
Improved Debugging: With tools like Redux DevTools, you can easily track state changes over time.
Performance Optimization: By avoiding unnecessary re-renders and simplifying data flow, Redux can help improve your application's performance.
Persistence and Hydration: Redux makes it easier to persist and rehydrate the state on page reload, which is crucial for a robust CMS.

Now that we understand the 'why,' let's proceed with configuring Redux in our Node.js and React CMS. We'll walk through the setup process step-by-step, ensuring our application is prepared to handle complex state management efficiently.

1. Add "createAction" Helper Util

The "createAction" utility function simplifies the process of creating action objects in Redux, promoting consistency and reducing boilerplate code throughout your application. Abstracting the action creation process ensures that all actions follow the same structure (with type and payload properties), which makes debugging easier and helps maintain a predictable state shape. This utility function also makes it easier to refactor action creators in the future, as any changes to the action structure can be implemented in one place rather than scattered throughout the codebase.

So let's add a new "utils" folder inside the "admin" root folder. Create a new "reducer.utils.js" file, from which we will export the "createAction" helper:

export const createAction = (type, payload) => ({ type, payload });

And that's it, now we can move to the store itself.

2. Structuring "Redux" Store

create a new "store" folder inside the "admin" root;
add a new "store.js" file, which will store all configures and accumulate separate stores;
import "configureStore" function that will create a main store, with reducer as object parameter;
just for beginning, we will create our first "auth" store;

import { configureStore } from '@reduxjs/toolkit';
import { authReducer } from './auth/auth.reducer';

export const store = configureStore({
    reducer: {
        auth: authReducer
    }
})

create a new "auth" folder inside the "store" folder;
add new "auth.reducer.js", "auth.action.js", "auth.selector.js", "auth.types.js" files. This will be our typical store structure. Our "auth" folder will contain data for authentication, "posts" for example will be created for our posts, etc...
inside the types file we will create the first "SET_USER" action type that will define an action that will update the user state inside the reducer;

const AUTH_ACTION_TYPES = {
    SET_USER: 'auth/SET_USER',
};

export default AUTH_ACTION_TYPES;

reducer file will contain "AUTH_INITIAL_STATE" which will store all the data, and authReducer itself, which depends on the action type will modify stored data;

import AUTH_ACTION_TYPES from './auth.types';

export const AUTH_INITIAL_STATE = {
    user: null,
};

export const authReducer = (state = AUTH_INITIAL_STATE, action = {}) => {
    const { type, payload } = action;
    switch (type) {
        case AUTH_ACTION_TYPES.SET_USER:
            return { ...state, user: payload };
        default:
            return state;
    }
};

next action file that will use our "createAction" helper and create a function that will call the reducer;

import AUTH_ACTION_TYPES from './auth.types';
import { createAction } from '../../utils/reducer.utils';

export const aSetUser = (user) =>
  createAction(AUTH_ACTION_TYPES.SET_USER, user);

finally, the selector, will simply give a "get" access to the storage value. In other words it will return the value of the stored data.

export const sUser = (state) => state.auth.user;

Great. We configured our first storage data with its functionality (to get and to set data).

3. Use the "Redux" Store in React App

Open "main.jsx" file and import "Provider" and "store", then wrap our App the "Provider".

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './store/store';
import App from './App.jsx';
import './assets/styles/styles.scss';

ReactDOM.createRoot(document.getElementById('root')).render()

Let's open our "Login.jsx" component from our previous article. Import "useDispatch" (provides a way to dispatch actions to the Redux store from within functional components, allowing you to trigger state updates without needing to manually connect your component to the store) from "react-redux". Then we will modify our "Login" function and dispatch "aSetUser" action to update "user" inside reducer.

import React from 'react';
import { useState } from 'react';
import { NavLink, useNavigate } from 'react-router-dom';
import { login } from '../../http/services/auth.services';
import { useDispatch } from 'react-redux';
import { aSetUser } from '../../store/auth/auth.action';
import Loader from '../../components/ui/loader/Loader.component';
import './login.styles.scss';

const Login = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const handleLogin = async () => {
  try {
    const result = await login({ email, password });
    if (result.status === 'success') {
      localStorage.setItem('token', result.token);
      dispatch(aSetUser(result.userResponse);
      navigate('/');
    } else {
      alert(result.message);
    }
  } catch (error) {
    console.error('Login error:', error);
    if (error.response && error.response.data?.status === "error") {
      alert(result.message);
    } else {
      alert('An error occurred. Please try again later.');
    }
  }
}
  return (...);
}

export default Login;

Yes, we finished with the Redux implementation, we will definitely need and use this store in the future so we will have more practice.

In essence, integrating Redux into our CMS project is an investment in the future of our application. While it may introduce some initial complexity, the long-term benefits in state management, code organization, and application predictability are well worth the effort. As you continue to develop your CMS, you'll find that this Redux foundation becomes an invaluable asset, supporting your project's growth and maintaining code quality along the way. Happy coding, and may your Redux-powered CMS flourish!

If you need a source code for this tutorial you can get it here.

Found this post useful? ☕ A coffee-sized contribution goes a long way in keeping me inspired! Thank you)

Next step: "Enhancing User Experience: Implementing Notifications, Modals and Loaders in a React-based CMS"

Login Logic: Building User Authentication for Your CMS

WebCraft Notes — Tue, 15 Apr 2025 12:50:52 +0000

In our previous article, we developed the registration logic, creating a new registration page with a complete process from user input to password encryption and user creation in our database. The next crucial step in our CMS development is the login process. This authentication step is vital for user security and personalized access to our system. Today, we'll walk through creating a login page, configuring frontend requests, setting up backend endpoints, and implementing JWT for secure user sessions. By the end of this tutorial, we'll have a fully functional login system integrated into our CMS.Enough of the intro let's jump directly into the developing process...

1. Create a new Login form with React

So we had already created an "Empty" layout which we will use in the "Login" form, We also styled the "Registration" form and we will use the same design for our "Login" page. Okay let's start:

create a new "login" folder inside the "views" folder, then create 2 files, the "Login.jsx" component and the "login.styles.scss" file for SCSS;
import the "Login" page into our "App.jsx" file and set it near the "Registration" page, so that they both were inside the "auth" route;

<Route path="/auth/*" element={<EmptyLayout />}>
  <Route path='registration' element={<Registration />} />
  <Route path='login' element={<Login />} />
</Route>

import "React", "useState", "useNavigate", and file with our styles into our new component;
create new state values "password", and "email";
add return our HTML template which will represent the "Login" page with the "Login" form;

import React from 'react';
import { useState } from 'react';
import { NavLink, useNavigate } from 'react-router-dom';
import './login.styles.scss';

const Login = () => {
  const navigate = useNavigate();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const handleLogin = async () => {}
  return (
    <div className="login">
      <div className='bold-line'></div>
        <div className='container'>
        <div className='window'>
            <div className='overlay'></div>
            <div className='content'>
            <div className='welcome'>Welcome Back!</div>
            <div className='subtitle'>Please login.</div>
            <div className='input-fields'>
                <input
                  type='email'
                  placeholder='Email'
                  className='input-line full-width'
                  onChange={(e) => setEmail(e.target.value)}></input>
                <input
                  type='password'
                  placeholder='Password'
                  className='input-line full-width'
                  onChange={(e) => setPassword(e.target.value)}></input>
            </div>
            <div className='spacing'>Do not have an account yet? <NavLink to="/auth/registration" className='highlight'>Register</NavLink></div>
            <div>
              <button className='ghost-round full-width loader-styles'
                onClick={handleLogin}>
                'Login'
              </button>
            </div>
            </div>
        </div>
        </div>
    </div>
  );
}

export default Login;

Great, we added a new "Login" form and new route into our CMS, but it will not work until we update the backend part (new route, controller, and token generation), so let's do it.

2. Prepare the backend for the login process

We already prepared the "users" folder and files structure, so that we can move directly to the login process itself:

we need to add a new "login" route inside the "users.router.js" file;

usersRouter.post('/login', usersController.loginUser);

inside the "users.controller.js" file import the "jsonwebtoken" that we installed in the previous article;

const jwt = require('jsonwebtoken');

inside the "users.controller.js" file we will create a new "loginUser" function, that will receive "email", and "password" from the request body. Then search for the user with such an email, then check if the user was not found we will return an error message. Then compare two passwords one from the request and the other from the user object with the "bcrypt" compare method, if the password is not correct then a new error will be returned. If everything is fine we can move to the sign-in process, and create a JWT token with the sign method, inside the token we will encrypt the user ID, secret phrase, and expiration period. In the last part we will need to return this token, with a success message and user data without ID and password back to the client;

async function loginUser(req, res) {
    try {
        const { email, password } = req.body;
        const user = await usersModel.loginWithEmail({ email });
        if(!user){
            return res.status(404).json({status: "error", message: "User doesn't exist" });
        }
        const isPasswordCorrect = await bcrypt.compare(password, user.password);
        if(!isPasswordCorrect){
            return res.status(400).json({status: "error", message: "Invalid password" });
        }
        const token = jwt.sign({ id: user._id }, "secret phrase", { expiresIn: "24h" });
        const { _id, password, ...userResponse } = user._doc;
        return res.status(200).json({
            status: 'success',
            token,
            userResponse
        })
    } catch (error) {
        console.log(error);
        res.status(500).json({
            status: 'error',
            message: 'Internal server error'
        });
    }
}

we need also add the "loginWithEmail" function inside the "users.model.js" file, that function will simply get user data from the database and return it to the controller;

async function loginWithEmail(payload) {
    try {
        const user = await users.findOne(payload);
        return user;
    } catch (error) {
        console.error('Error logging in user:', error);
        throw error;
    }
}

Awesome, looks like we have the frontend and backend parts ready, now we need to connect them and start testing, let's do it on the next part.

3. Connect frontend with backend

So, we have an API endpoint that we can call after the user presses the login button, and then we will return a token or some message. That's simple, right?

create a new "login" request function inside our "auth.services.js" file;

export const login = (data) => 
    HTTP.post('/users/login', data).then(({data}) => data );

modify our "login.jsx" file. Import the "login" function from the "services" folder;

import { login } from '../../http/services/auth.services';

now the "Login" function itself. We need to send a request with login and password to the server, get the response, save the token and show something to the user;

const handleLogin = async () => {
  try {
    const result = await login({ email, password });
    if (result.status === 'success') {
      localStorage.setItem('token', result.token);
      navigate('/');
    } else {
      alert(result.message);
    }
  } catch (error) {
    console.error('Login error:', error);
    if (error.response && error.response.data?.status === "error") {
      alert(result.message);
    } else {
      alert('An error occurred. Please try again later.');
    }
  }
}

Yes, that's it, we created a "login" process with React and Node.js, we will need to work on UI and UX-like notifications, and loaders but it will be in the next article. And now we need to check the whole registration-login process and get some rest for the next time.

Now let's relaunch the server with the "npm run watch" command and our React app with the "npm run dev" command visit the localhost route and check how it works.

Looks great, also let's check our database if there is a new user, and the application tab in the browser console (local storage) if there is our security token. Yes, No, please write back or send a screenshot of the results.

In this article, we've successfully implemented a complete login system for our CMS. We've covered the essential steps from creating a React-based login form to setting up the backend authentication process and establishing the connection between the two.

We've built a secure login flow that includes email and password verification, JWT token generation, and proper error handling. This login system complements the registration process we developed earlier, providing a solid foundation for user authentication in our CMS.

Remember, while we now have a functional login system, there's always room for improvement. In future articles, we'll explore enhancing the user experience with features like loading indicators, more robust error messages, and perhaps implementing password reset functionality.

Thank you for following along, and happy coding! Don't hesitate to experiment with and build upon this login system as you grow your CMS project.

If you need a source code for this tutorial you can get it here.

Found this post useful? ☕ A coffee-sized contribution goes a long way in keeping me inspired! Thank you)

Next step: "Redux Integration: Enhancing Your Node.js and React CMS"

Building a Complete User Registration System with React and Node.js

WebCraft Notes — Tue, 08 Apr 2025 12:00:00 +0000

There gonna be many JS code sections, and the best way to learn something is to go through this knowledge by yourself but you always can get the whole code here.

The first thing that welcomes a new user is a registration page with its functionality. Registration is the process where users create an account on a website or application. It typically involves providing personal information and creating login credentials, allowing users to access personalized features and services. Today we're going to work on creating the registration page for our React app and implement the entire registration process on the Node.js backend. We have much to cover, so let's outline a brief plan and dive into coding.

1. Create a new empty layout for our Blog CMS
2. Design and build a simple registration page with a registration form
3. Prepare the backend for the registration process: (receive and save user data, generate token)
4. Implement API communication between frontend and backend

Now that we have our roadmap, let's roll up our sleeves and get to work. We'll start by setting up the foundation of our CMS layout, which will serve as the canvas for our registration page and future components.

1. Create a new empty layout for our Blog CMS

We created our "main" layout earlier, and now we need to create a simple empty layout (without header, menu, etc...) with some basic styles for our registration, or login pages.

Let's create an "empty" folder inside "layouts", then we will create two files "EmptyLayout.jsx" and "emptyLayout.styles.scss", first for js code and second for styles.

We will simply need to export our empty layout function with "Outlet" inside, where our components will be rendered.

import React from 'react';
import { Outlet } from 'react-router-dom';
import './emptyLayout.styles.scss';

const EmptyLayout = () => {
  return (
    <div className='emptyLayout'>
      <Outlet />
    </div>
  );
};

export default EmptyLayout;

Also, let's add two simple css rules:

.emptyLayout {
    width: 100%;
    height: 100%;
}

That's it, we can use this layout wherever we need it, and firstly in our registration form that we are going to build in the next part.

2. Design and build a simple registration page with a registration form

To tell you the truth I'm not a good designer, so I found a free registration form design here, and I'll use it in our blog CMS. Okay, we will separate this section into smaller steps to make it easier to implement into your future projects:

create a new "registration" folder inside the views folder with two files "Registration.jsx" for our page and "registration.styles.scss" for all the styles;
import the "Registration.jsx" file into "App.jsx", and register a new "auth" route for our empty layout with the "registration" route for our "Registration" page;

import Registration from './views/registration/Registration';

<Route path="/auth/*" element={<EmptyLayout />}>
  <Route path='registration' element={<Registration />} />
</Route>

prepare our registration form template for work. Also, we will need to import "React", "useState" from react, "useNavigate" and "navLink" from react-router-dom;
create a new "Registration" functional component that will use "useState" to store name, email, and password and return our HTML registration form. Each input will update our state data;

import React from 'react';
import { useState } from 'react';
import { NavLink, useNavigate } from 'react-router-dom';
import './registration.styles.scss';

const Registration = () => {
    const navigate = useNavigate();
    const [name, setUsername] = useState('');
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    return (
        <div className="registration">
        <div className='bold-line'></div>
            <div className='container'>
            <div className='window'>
                <div className='overlay'></div>
                <div className='content'>
                <div className='welcome'>Hello There!</div>
                <div className='subtitle'>We're almost done. Before using our services you need to create an account.</div>
                <div className='input-fields'>
                    <input 
                        type='text'
                        placeholder='Username'
                        className='input-line full-width'
                        onChange={(e) => setUsername(e.target.value)}></input>
                    <input
                        type='email'
                        placeholder='Email'
                        className='input-line full-width'
                        onChange={(e) => setEmail(e.target.value)}></input>
                    <input
                        type='password'
                        placeholder='Password'
                        className='input-line full-width'
                        onChange={(e) => setPassword(e.target.value)}></input>
                </div>
                <div className='spacing'>or continue with 
                    <NavLink to="/auth/login" className='highlight'>Login</NavLink>
                </div>
                <div>
                    <button 
                        className='ghost-round full-width loader-styles'
                        onClick={handleSubmit}>
                            'Create Account'
                    </button>
                </div>
                </div>
            </div>
            </div>
        </div>
    );
}

export default Registration;

export default Registration;
It is not the best idea to insert styles, because it will take too much space but you can download the whole app and check styles over there.

And our result will be:

But it is a simple UI part, we need to add its main functionality.

I like to separate some parts of functionality, especially what touches APIs, that is why let's install and use "Axios" and create a folder where we will configure "Axios" and where we will store our API call functions like it was described in one of the previous articles "Mastering Axios in React: From Installation to Project Structure";
let's add the "registerNewUser" function inside the "auth.services.js" file in the services folder. This function will use the "post" method to send data to our endpoint;

import { HTTP } from '../http-client';

export const registerNewUser = (data) => 
    HTTP.post('/users/register', data).then(({data}) => data );

import this function into the "Registration.jsx" component;
send name, email, and password from state to this endpoint, and if we receive "success" status as a response, then redirect from the "registration" page to the "dashboard" page;

const handleSubmit = async (e) => {
    e.preventDefault();
    const result = await registerNewUser({name, email, password});
    if (result.status === 'success') {
        navigate('/');
    }
}

This is great, but if we push the register button nothing will happen (not nothing, we will receive an error) because for now we still do not have any registration routes on our Node.js server side.

3. Prepare the backend for the registration process: (receive and save user data, generate token)

Luckily we did the hardest part of the job in our previous article (we prepared the structure and even started with the user registration process as an example, we have API, model, and controller, but we need to add some updates to our "registerNewUser" controller), so it will be easier for us now. Less words, more code:

open a new terminal, go to our "server" folder, and use "npm i bcryptjs jsonwebtoken" command to install 2 new libraries:

BcryptJS is a JavaScript library used for hashing passwords securely. It implements the bcrypt hashing function, allowing us to easily create password hashes that are resistant to brute-force attacks, and for storing user passwords in web applications.

The jsonwebtoken library is a popular Node.js package used for generating and verifying JSON Web Tokens (JWTs). It provides a simple way to create secure tokens for user authentication and authorization in web applications, allowing servers to transmit user information safely between different parts of an application or between separate systems.

open the "users.controller.js" file from the routes folder, and import "bcryptjs" and "jsonwebtoken";
inside the "registerNewUser" function we need to encrypt the receieved password from the user:

const hashedPassword = await bcrypt.hash(password, 12);

We are using the hash method from the bcrypt library, with a cost factor of 12 (it determines how computationally intensive the hashing process will be);

first, we will check if a user with such an email does not exist in our database, if yes we will return an error message;
if we do not have a user with such an email we will create a new one with the "createNewUser" function from our users model;
if the user was created then we need to return a "success" message, and if not some sort of error message;

async function registerNewUser(req, res) {
    const {name, password, email} = req.body;
    const hashedPassword = await bcrypt.hash(password, 12);
    try {
        const existingUser = await usersModel.findUserByEmail(email);
        if (existingUser) {
            return res.status(400).json({
                status: 'error',
                message: 'Email already in use',
            });
        }
        const user = await usersModel.createNewUser({
            name,
            email,
            password: hashedPassword,
        });
        if (!user) {
            return res.status(500).json({
                status: 'error',
                message: 'Internal server error'
            });
        }
        if (user) {
            res.status(201).json({
                status: 'success',
                message: 'User created successfully',
            })
        }
    } catch (error) {
        console.log(error);
        res.status(500).json({
            status: 'error',
            message: 'Internal server error'
        });
    }
}

Nice, but we also should not forget to add "findUserByEmail" function which will look for items by email, into our user model.

async function findUserByEmail(email) {
    try {
        const user = await users.findOne({ email });
        return user;
    } catch (error) {
        console.error('Error finding user by email:', error);
        throw error;
    }
}

Awesome, let's move on.

4. Implement API communication between frontend and backend

We are all most there. Let's check that our API endpoint is the same in the frontend part and in the backend, restart our servers, and try to register.

If you have done everything right, then you should be redirected to our "Dashboard" page, and if you have "compass" from MongoDB installed, then you can check if your "users" db was created and if your newly created user document exists.

Finally, we made it, I think that the "login" functionality is probably the hardest part of the app development process, and we finished with the first half.

We've successfully built a functional user registration system for our Blog CMS. From creating the layout and designing the form in React to implementing the backend logic and establishing API communication, we've covered the essential steps to allow new users to create accounts securely. This registration system serves as a solid foundation for our CMS, paving the way for future enhancements like login functionality and user management. In our next article, we'll tackle the login process to complement this registration system. Thanks for following along, and happy coding!

If you need a source code for this tutorial you can get it here.

Found this post useful? ☕ A coffee-sized contribution goes a long way in keeping me inspired! Thank you)

Next step: "Login Logic: Building User Authentication for Your CMS"