CMS Blog is a basic version of a Distributed Content Management System (CMS) for a blogging site.

Users can can store, manage, and serve various types of content (primarily text and images).

This solution uses React.js for the UI, Styled-Components for styling, Node.js runtime, Express.js for the API layer, with Redis for cache/session, MongoDB for data like images and posts, and Nginx as a reverse proxy.

You can explore the REST API

This is a high-level view of how the different containers interact with each other.

• A timeline/feed for viewing all posts
• Ability to create, edit, update and delete posts as a user
• Design and implemented object models for entities.
• Schema-based solution to efficiently stores and retrieves content
• Supports replication, sharding, connection pooling
• Caching mechanisms to improve response times
• User authentication and authorization using cookie session
• Test Driven Development (TDD)
• CI/CD with GitHub Actions
• Responsive web design
• Infinite scroll
• Easy-to-use UI
• React context for state management

Authentication/Authorization:

• Express session middleware HTTP server-side framework used to create and manage a session middleware.

Storage:

• MongoDB open source NoSQL database management program that manages document-oriented information.
• Redis in-memory data structure store, used as a distributed, in-memory key–value database, cache and message broker.

CI/CD:

• GitHub Actions continuous integration and continuous delivery (CI/CD) platform that allows you to automate your build, test, and deployment pipeline.

Networking/Routing:

• Nginx web server that can also be used as a reverse proxy, load balancer, mail proxy and HTTP cache

Containers:

• Docker used to automate the deployment of applications in lightweight containers so that applications can work efficiently in different environments.

Forms Validation:

• React Hook Form library that helps you validate forms in React.js.

JavaScript library:

• React.js declarative, efficient, and flexible JavaScript library for building reusable UI components.
• Styled-components use component-level styles in your applications by the leverage mixture of JavaScript and CSS using a technique called CSS-in-JS.

Before getting started, make sure you have the following requirements:

• Docker
• Docker Compose (Supporting compose file version 3)
• A bash compatible shell

Follow these steps to get your development environment set up:

1. Clone this repository locally;

# Change to the desired directory
$ cd <desired-directory>

# Clone the repo
$ git clone https://github.com/evanigwilo/cms-blog.git

# Change to the project directory
$ cd cms-blog

2. Change environmental variables file name in both backend and frontend folder from .env.example to .env

3. At the root directory cms-blog, run the following command:

# Create external docker volume for the mongo development database
$ docker volume create cms-blog_mongo-db-dev

# Build and run in a development container environment
$ docker-compose --env-file ./backend/.env --env-file ./frontend/.env -p cms-blog-dev-stack -f ./backend/docker-compose.yml -f ./backend/docker-compose.dev.yml -f ./frontend/docker-compose.dev.yml up --build -d

5. The web-app will be running at http://localhost:80

# Stops development containers and removes containers, networks and volumes
$ docker-compose --env-file ./backend/.env --env-file ./frontend/.env -p cms-blog-dev-stack -f ./backend/docker-compose.yml -f ./backend/docker-compose.dev.yml -f ./frontend/docker-compose.dev.yml up down --remove-orphans

# Show compose configurations
$ docker-compose --env-file ./backend/.env --env-file ./frontend/.env -p cms-blog-dev-stack -f ./backend/docker-compose.yml -f ./backend/docker-compose.dev.yml -f ./frontend/docker-compose.dev.yml config

# Build and run backend tests in a container environment
$ docker-compose --env-file ./backend/.env -p cms-blog-test-stack -f ./backend/docker-compose.yml -f ./backend/docker-compose.test.yml up --build -d

# View logs for backend tests
$ docker-compose --env-file ./backend/.env -p cms-blog-test-stack -f ./backend/docker-compose.yml -f ./backend/docker-compose.test.yml logs -f api-server

# Stops backend tests containers and removes containers, networks and volumes
$ docker-compose --env-file ./backend/.env -p cms-blog-test-stack -f ./backend/docker-compose.yml -f ./backend/docker-compose.test.yml down -v --remove-orphans

MongoDB

Diagrams.net

Achieving High Performance with PostgreSQL and Redis

Docker Healthcheck for your Node.js App

Cache management with GitHub Actions

Swagger: API Documentation & Design Tools for Teams