Content Management System (CMS) using React and Express.js

This project is a Content Management System (CMS) Admin Panel developed using React for the frontend and NodeJS and ExpressJS for the backend. The Admin Panel allows administrators to manage content, including viewing and editing posts, approving pending posts, and adding new content. It features real-time updates, allowing administrators to collaboratively manage content seamlessly.

Output Preview: Let us have a look at how the final output will look like.

👁 Screenshot-2024-03-04-155725

Prerequisites:

• NPM & NodeJS
• Express JS
• React JS
• CSS

Approach to Create a Content Management System:

• Server-side (server.js):
  • Set up an ExpressJS server.
  • Define routes for handling GET, POST, and PUT requests.
  • Implement endpoints for fetching content, approving content, editing content, and adding new content.
  • Use body-parser middleware to parse request bodies.
  • Enable CORS to allow cross-origin requests.
  • Use an array to store content data.
  • Implement functions to handle different types of requests, such as approving content, editing content, and adding new content.
• Client-side (App.js):
  • Use React functional components and hooks for managing state and side effects.
  • Utilize axios for making HTTP requests to the server.
  • Use useState hooks to manage the state of posts, new content, and content being edited.
  • Use useEffect hook to fetch content from the server when the component mounts.
  • Implement functions to handle different user interactions, such as clicking on dashboard or posts, approving posts, editing posts, adding new content, and handling input changes.
  • Render UI components dynamically based on the current state, such as displaying posts, forms for adding new content and editing content, and handling different actions based on the status of posts (e.g., pending or approved).

Steps to Create a NodeJS App and Installing module:

Step 1: Create a new project directory and navigate to your project directory.

mkdir <<name of project>>
cd <<name of project>>

Step 2: Run the following command to initialize a new NodeJS project.

npm init -y

Step 2: Install the required the packages in your server using the following command.

npm install express body-parser cors

Project Structure(Backend):

The updated dependencies in package.json file of backend will look like:

"dependencies": { 
 "express": "^4.18.2",
 "cors": "^2.8.5",
 "body-parser": "^1.20.2"
}

Example: Below is an example of creating a server of content management system.

Start the server using the following command.

node index.js

This will run your server on http://localhost:5000/cms. You should see the message "Server is running on port 5000" in the terminal.

Steps to Create a Frontend using React:

Step 1: Create a new application using the following command.

npx create-react-app <<Name_of_project>>
cd <<Name_of_project>>

Step 2: Install the required packages in your application using the following command.

npm intall axios

Project Structure(Frontend):

The updated dependencies in package.json file of frontend will look like:

"dependencies": {
 "axios": "^1.6.7",
 "react": "^18.2.0",
 "react-dom": "^18.2.0",
 "web-vitals": "^2.1.4"
 }

Example: Below is an example of creating frontend for content management system.

Step 4: Start the React App

npm start

Output: