project portfolio

What it is

This application showcases my portfolio, displaying a collection of my most recent development work. Users can see a complete list of my most recent projects & they can sort the projects based on the technologies used in each one.

How it's built

Contentful serves as a CMS for the project data and a React front-end requests and renders this data. The Contentful JavaScript Content Delivery Library is used to make the requests to Contentful. A basic markdown content type is used for each projects description and this is then rendered in React via marked. Redux Toolkit is used to manage state throughout the application and Chakra-UI is used as the component library.

Technologies

• React: Front-end user interface library.
• Contentful: Content management system (CMS) used for this project.
• Redux Toolkit: Used for state management.
• Charka UI: UI component library used for styling.
• marked: Markdown compiler for parsing the Github markdown
• Docker: Portable container used for deployment.
• contentful.js
• Elastic Beanstalk: Deployment orchestration for EC2. Hosts the live React application.
• Amazon Elastic Container Registry (Amazon ECR): Used to store the containerized project and deploy to the Elastic Beanstalk environment.

Lessons learned

• Redux: I used Redux Toolkit for state management in this project. I have used Redux in the past but I wanted to use Redux Toolkit to see how it compares to the vanilla Redux implementation. I found it to be a lot easier to use and it has a lot of built-in functionality that makes it easier to use than vanilla Redux. I also used the createAsyncThunk function to handle the asynchronous API calls to Contentful. This was a lot easier to use than the redux-thunk middleware I have used in the past. Redux isn't necessary in many projects & I have a lot more to learn about this tool, including integration testing for components using Redux. For a project of this size, with limited features Redux feels unnecessary.
• Elastic Beanstalk: I used Elastic Beanstalk to deploy the application to AWS. I have used Elastic Beanstalk in the past but I wanted to use it again to see how it compares to other deployment tools. I found it to be a lot easier to use than other deployment tools I have used in the past. I also used the AWS CLI to deploy the application to Elastic Beanstalk. Elastic Beanstalk is a great tool for deploying applications to AWS. It is easy to use and it is a lot easier to set up than other deployment tools I have used in the past. Single-instance environments cannot be used with AWS ACM. Although this is a small project I used a load-balanced environment so I could take advantage of the certificates in AWS.