My fully Automated Portfolio website using MERN Stack and CI/CD

Hiransanjeewaa
3 min readJul 21, 2023

MERN Stack | CI/CD Pipeline using github actions | Docker & Docker-Hub AWS EC2 | Reverse Proxy (due to public wifi firewall issue)| Rapid Api for Me| Cloudflare | Name.com .

You guys might think why using MERN stack for a portfolio project . Let me explain . This not a traditional portfolio web application . In this site there is some advanced features . Let me start with the development of the web site.

So i have seen many portfolio websites and i wanted to do something better that . I am writing blogs on medium.com , At one time i thought what if i can use the same blogs in a portfolio website ? then i search for available medium apis . I found what exactly i’m looking for. It’s called Rapid api It allows us to use the api in 150 free request limit. documentation So i have to be in that limit , I have solved this problem by storing medium articles on MongoDb. I added automated Article receiving system using Node Scheduler . Each day at 6 pm my application check if there is new article on my medium profile . It only take new article data to my database. I stored data on my instance storage. So the data won’t be lost after a restart. And i have added message sending option and projects adding option to my web application. Once a message sent to me the application forwards it to my private email.

Right let’s talk the best part . The CI/CD . I used github actions for that. There is an option to use our own self-hosted runners to run jobs but the EC2 instance i had is only have 1GB ram so it is not enough for my workflow process. I have used github servers in that case.In my pipeline what i did was I Dockerized my frontend and backend then pushed into Docker-Hub then using the same workflow i am pulling the images to my EC2 instance in AWS and stop the current running containers and replace with new ones.

I am found that the public network i used (Kelani-wifi) is allows only port 80 (http) requests to pass. I have implemented a reverse proxy mechanism in my server on EC2 by setting-up configurations of nginx server (nginx.conf file). I have added a volume in my EC2 for my database just in case i have to restart my server. MongoDb database is also running in a container on ec2 . I have used the free domain name which is available in Name.com for github student pack. And I created Elastic Ip to my EC2 which is integrated with Cloudflare and to my Domain name. Have a look at my portfolio website → hiransanjeewa.live .

github repository

Let ‘s meet with my new article about Kubernetes .

--

--

Hiransanjeewaa

Software Engineering Undergraduate — University of Kelaniya