waldoibarra / portfolio

My very own portfolio website to showcase myself! ❤️

Welcome To My Personal Website Code

This is pretty much a work in progress, hope you enjoy reading this code as much as I enjoyed writing it.

Key Features

• Trunk Based Development as branching model.
• Infrastructure as code with Terraform, which includes a private S3 bucket, CloudFront distribution (SSL certs and cache) and Route 53 A records.
• Makefile as an entrypoint of the app to simplify usage of this repository.
• Docker Compose to reduce need to install dependencies and standardize development on any OS.
• Linting of Terraform, TypeScript and CSS files automatically checked before every commit and on CI.
• Linting of commit messages locally and on CI, conforming to conventional commits spectification.
• Unit tests for React code using Jest and testing library automatically checked before every commit and on CI.
• Hot reloading enabled on save of React files.
• Automated deployments with a GitHub Actions CI/CD pipeline.

Local Development

Requirements

The only needed tool you need to install in your machine is Docker.

Run Website Locally

To run the website on development mode, run the following command and visit localhost:3000.

make start

Or to see available commands in Makefile run:

make help

portfolio's Issues

Simplify Makefile by adding a Docker compose file

Definition of Done

• Makefile commands use Docker compose CLI rather than Docker commands

Add a CI/CD pipeline to deploy to production with each commit that lands in the trunk

Definition of Done

• Linters must pass as a prerequisite
• Tests must pass as a prerequisite
• React app must be built
• Website should be deployed using Terraform

Add IaC to make site available publicly

Definition of Done

• Site should be accesible via HTTPS on https://waldoibarra.com/.

Add a Makefile to standardize using Docker

Definition of Done

• Makefile has a plan command to visualize changes
• Makefile has an apply command to deploy the website
• Makefile uses Docker under the hood to avoid installing CLIs on host computer

Add error page on CloudFront to serve index.html on 404 error codes

Definition of Ready

Should investigate for the best option:

• The used Terraform module can be extended to add an error page
• A pull request can be made to add this functionality to the Terraform module
• The whole Terraform code for the website has to be coded from scratch (likely by forking the module)

Definition of Done

Due to the website being an SPA, for every request that is a 404 (Not Found) error status code:

• CloudFront should respond with the index.html file.
• The response should have a 200 (OK) success status code.

Update documentation to show project's features

Definition of Done

• The README.md should talk about from the used branching model used to the stack and practices.

Change favicon to something different than the React logo

Definition of Done

• Website should have a custom logo

Automate CloudFront cache invalidation on each deploy

Definition of Done

• Website cache should be invalidated on the CI/CD pipeline after deploying

Run Terraform, TypeScript and CSS linters with a Makefile command

Definition of Done

• Add linter for Terraform files
• Add linter for TypeScript files
• Add linter for CSS files
• All linters should be ran with Makefile commands

Migrate project to use React

Definition of Done

• React app is containerized in a Docker image
• Hot reload should work on changes
• Has scripts to build a React app
• Project is still deployable with make apply

Use conventional commit messages and lint them

Definition of Done

• Commits should follow conventional commits specification
• Commit messages should be linted locally on commit-msg hook
• Commit messages should also be linted during CI

Run linters and unit tests on Git pre-commit hook

Definition of Done

• A Git pre-commit hook is automatically added to the .git directory
• Hook runs linters and unit tests

Reduce pipeline run time by pushing built Terraform/AWS Docker image to Docker Hub

Context

GitHub Actions workflows are taking a bit more than 4 minutes to run as some CLIs such as Terraform and AWS are being downloaded and built during the custom image building that takes places on the job.

Definition of Done

• Extract the installation/building part of the Terraform and AWS CLIs to an image on the Docker Hub
• Use such image as base instead to reduce the run time on workflows

Run unit tests with a Makefile command

Definition of Done

• Unit tests should be ran with a Makefile command
• Watch mode should work for local development

Install best React framework option for good SEO without a server

Definition of Ready

Should investigate for the best rendering strategy, keeping in mind this is a simple static site (so, no Remix or SSR):

• Client side rendering using React.
• Static site generator using Gatsby or Next.js.

Definition of Done

• Should have a build script that generates static files for the site.
• The built project should work without a server.
• Linters and tests should still work