The source code for Tarek Mulla personal portfolio https://mulla.au
Tarek created this project to showcase his personal brand, share his achievements and experience, and provide a platform for communication with others. He built the project himself, with a focus on DevSecOps principles. The portfolio is a Single-Page Application with the following features:
- 🔋 Serverless architecture: Utilizing services such as S3, API Gateway, CloudFront, and Lambda to eliminate the need for managing servers.
- 🚀 Automation: Leveraging GitHub Actions and Cloudwatch alarms to automate various processes and ensure efficient workflows.
- 🛠️ Multi-environment support: The project includes separate development and production environments to facilitate testing and deployment.
- 🔐 Enhanced security: Implementing a Web Application Firewall WAF, token-based authentication, and CloudFront policies to protect against potential threats.
- 💰 Cost optimization: The web application costs
$1 per month, while the firewall (WAF) costs$9 per month, ensuring a cost-effective solution. - 📊 Monitoring: Employing CloudWatch dashboards to monitor performance metrics, track blocked requests, and identify bot requests.
The webapp uses the following technology and tools.
| Technology / Tool | Purpose |
|---|---|
| Terraform | Build the infrastructure |
| React | Build the static page |
| Node.js | Build the dynamic backend |
| Github actions | Automation pipelines |
| Snyk | SAST analysis, SCA analysis, and Infrastructure as Code (IaC) analysis. |
| CodeQL | Discover vulnerabilities across the codebase |
| Dependabot | Send alert when the repository is using a dependency with a known vulnerability |
The project contains 3 parts: Web application, Infrastructure, and Automation
The frontend of the project is a Single-Page Application (SPA) built with React library. The code is hosted in an S3 bucket along with other static files like images. You can access the web application through the URL: https://mulla.au. The SPA interacts with the backend by sending requests to the API gateway at api.mulla.au. The following diagram illustrates how the web application interprets the received requests:
The infrastructure component is responsible for provisioning cloud resources in AWS, and it is built using Terraform. It includes the dynamic backend for the web application, which is constructed using API gateway and Lambda functions. The source code for the backend is written in Node.js. The architecture diagram below illustrates all the components in the cloud infrastructure:
The automation pipelines are responsible for deploying the application, performing linting, vulnerability scanning, format checking, and other validation checks. These pipelines are built using GitHub Actions and written in YAML. The following are the available pipelines:
| Pipeline | Purpose |
|---|---|
| terraform-plan | Check the Terraform plan and show it in the pull request |
| terraform-deploy | Deploy the terraform infrastructure when a new commit pushed to the main branch |
| snyk-security | Scan the source code, and find vulnerabilities in Terraform files, and suggest security best practices |
The web application is developed with a focus on DevSecOps, and it incorporates the following features to support this claim:
- ☁️ Multi-environments: The web app is designed to support both a development environment and a production environment. This allows for proper testing and staging before deploying changes to the live environment.
- 🚀 Full Automation: Dedicated pipelines are implemented to conduct comprehensive checks on any proposed changes before allowing them to be merged into the master branch. This ensures that only validated and approved changes are deployed.
- 🔒 Protected Branches: The repository is configured to prevent direct merges into the master branch, adding an extra layer of control and enforcing the use of pull requests for code review and approval.
- 🔍 Snyk Integration: Snyk is employed for Static Application Security Testing (SAST analysis, Software Composition Analysis (SCA analysis, and Infrastructure as Code (IaC) analysis. This helps identify potential vulnerabilities and maintain the security of the application and its dependencies.
- 🪄 CodeQL Integration: CodeQL is utilized to discover vulnerabilities across the codebase. It provides a powerful toolset for identifying and addressing security issues within the application code.
- 🔗 Dependabot Integration: Dependabot is configured to send alerts when the repository utilizes a dependency with a known vulnerability. This ensures that vulnerable dependencies are promptly addressed and updated.
- 🚨 Backend failure Alerting: Email alerts are set up to notify relevant stakeholders whenever an exception occurs in the backend code. This allows for immediate attention and quick resolution of any issues.
- 📊 Webapp Monitoring: The webapp is monitored for performance metrics, blocked requests, and bot requests. This monitoring helps ensure optimal performance, identify potential security threats, and maintain a smooth user experience. The dashboard is showing below:
- 👮 Enhanced Security: The web application is fully secured by implementing a Web Application Firewall (WAF), API tokens for authentication, and CloudFront policies. These measures protect against common security threats and unauthorized access. The following diagram illustrates the security measures implemented within the web application:
Feel free to clone the repository and create your own portfolio. However, kindly note that the source code is licensed under the BSD 2-Clause License. To learn more about the license and its terms, please refer to the complete license documentation available here.
Before proceeding with infrastructure provisioning, make sure to meet the following requirements:
- Set up an S3 bucket to store the infrastructure state file. Update the backend section in the Terraform configuration file accordingly to specify the S3 bucket details. For more details please check this page.
- Ensure that you have a public Route 53 domain where the desired domain is hosted. This domain will be used for the web application.
- Rename the terraform variables file to
terraform.tfvarsand set the values accordingly. For example, set the value of thedomainvariable to match the domain you created in Route 53. For more details, please check this page. - Rename the Webapp env file to
.envand configure the necessary values. Please note that theREACT_APP_TOKENcan be retrieved from the SSM parameter after your first deployment. For more details, please check this page.
- Install npm
- Install react
- Run commands that provided in ./Makefile:
make install: install the dependenciesmake build: build the webapp, the artifacts will be stored under./webapp/build/dirtectorymake run: run the webapp, after run the app can be accessed on localhost:3000
- Install Terraform
- Install and configure AWS CLI based on where you want to provision the tool.
- Create
terraform.tfvarsfile, and customize the terraform variable values as explained before in the prerequisites. - Init, plan and apply terraform. See: Provisioning Infrastructure
NOTE: Terraform will deploy the webapp files (that generated when building the react app) and images stored under directory ./webapp/images automatically.
You can contact Tarek Mulla directly using one of the following:
- 👔 Linkedin: Tarek Mulla
- ✉️ Personal Email tarek@mulla.au
- 📇 Contact form mulla.au