React Component Library CMS

  • amazon web services
  • aws
  • component library
  • react
  • react bootstrap
  • react cms
  • react components
  • serverless

In order to manage the content for the React Component Library I created, I decided to create my own content management system (CMS).

This was a great opportunity to exercise what I learned in the fantastic serverless course I did earlier this year.

I was able to develop the CMS using React, serverless and Amazon Web Services (AWS), but let me go into a bit more detail.

User accounts

In order to ensure that only a registered user could create groups and components for the library, I needed to register and then authenticate a user.

To do this I used the Cognito service from AWS.

Cognito takes care of security and makes it a lot easier to manage user accounts.

React Component Library CMS Account Registration
React Component Library CMS Account Registration
React Component Library CMS Login
React Component Library CMS Login

Next I need to create authenticated APIs to do the following:

  • Display user data for authenticated user
  • Create/delete a group
  • Create/edit/delete a component

Even though it is only three items, there is a bit more going on behind the scenes.

User data

When a user is logged into their dashboard, they should only see groups and components they created.

To do this, I had to create an API, and filter the data according to the account authenticating the request.

React Component Library CMS User Dashboard
React Component Library CMS User Dashboard

With that done, it was time to move on to creating a group which is an item in the DynamoDB table.

Creating a group

In order to create a group, the following values are needed:

  • userId
  • groupId
  • createdAt
  • id
  • name
  • components
  • symbol

But only the name and symbol values are needed for the user interface as the others are auto generated.

React Component Library CMS Create Group
React Component Library CMS Create Group

Creating a component

Next up, is creating a component.

When creating a component, it needs to be associated with a group which in turn means it can’t be an item in the DynamoDB table, it has to be added to one.

In order to do this, a component is created as an object and then appended to the components list within an item.

The following values are needed to create a component:

  • group
  • id
  • name
  • parentId
  • preview
  • usage
  • upload

Only the group, name, usage and upload values are available on the user interface the other values are once again auto generated.

When creating a component, you have the option of uploading media which is what the upload value is for.

To do this, I used the S3 service from AWS.

React Component Library CMS Create Component
React Component Library CMS Create Component

Editing a component

Because creating and editing have the same form, I decided to re-use the form and if you are editing a component the form will be auto completed with the existing values.

React Component Library CMS Edit Component
React Component Library CMS Edit Component

Deleting a group/component

To be safe, before deleting a group or component there is a modal to confirm the deletion.

React Component Library CMS Delete Group
React Component Library CMS Delete Group

Alerts

When a group or component is created, you have the option of receiving a text message and email alert which you can toggle in your user account.

To send a text messages I used the SNS service from AWS.

For emails, I used the SES service.

But before email alerts can be enabled, the email address (username) associated with the account needs to be verified because Cognito and SES are separate services and don’t share data.

React Component Library CMS Alerts
React Component Library CMS Alerts
React Component Library CMS Alerts
React Component Library CMS Alerts

Deploying

Even though I am using a database, I don’t need to deploy my CMS to a server that supports it, such as PHP & MySQL because I am using serverless which in my opinion is a major win.

I could’ve deployed my CMS using another service from AWS as shown in the course mentioned earlier but I decided to try something different.

Because I was already using GitHub, I chose to deploy to GitHub Pages.

And that is an overview of how I created my own CMS and deploying it without any costs!

If you have any questions or comments, please let me know.

 

 

 

 

Bronson Dunbar

I'm a WordPress fanatic, a fan of React & AWS and a Sass magician! I also enjoy capturing moments through the lens of my Canon https://adobe.ly/2HkE1SZ

Leave a Reply

Your email address will not be published. Required fields are marked *