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.

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.

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.

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.

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.

Deleting a group/component

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

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.

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.