💸 Budget Tracker - Frontend

This is the frontend application of the Budget Tracker project, built using React + Vite and styled with Tailwind CSS. It allows users to track their daily income and expenses, view daily summaries, and analyze monthly financial activity. Here project live on http://13.60.84.241:3000.

The application communicates with the Budget Tracker Backend via REST APIs.

🖥️ Tech Stack

• React + Vite
• Tailwind CSS
• Axios
• Docker + NGINX
• GitHub Actions
• AWS EC2

🌐 Live Deployment

The frontend is automatically deployed to an AWS EC2 instance via GitHub Actions, and served using Docker + NGINX.

• Frontend URL: http://13.60.84.241:3000
• Docker Hub Image: dilusharanasinghe/budget-tracker-fe

📁 Folder Structure

.
├── src/
├── public/
├── nginx.conf
├── Dockerfile
├── .env
└── .github/
    └── workflows/
        └── cicd.yml

⚙️ Environment Variables

Create a .env file in the root directory:

VITE_API_BASE_URL=http://<your-ec2-backend-ip>:5001/api

🐳 Docker Setup

Build Docker Image Locally

docker build --build-arg VITE_API_BASE_URL=http://<your-backend-ip>:5001/api -t dilusharanasinghe/budget-tracker-fe .

Run Container

docker run -d -p 3000:80 --name budget-tracker-fe-container dilusharanasinghe/budget-tracker-fe

🚀 CI/CD with GitHub Actions + AWS EC2

Setup Overview

• Builds the Docker image with VITE_API_BASE_URL from GitHub secrets.
• Pushes the image to Docker Hub.
• Connects to AWS EC2 via self-hosted runner.
• Pulls latest image and runs it using Docker.

GitHub Actions Workflow

.github/workflows/cicd.yml

# .github/workflows/cicd.yml
name: Deploy Budget Tracker FE to EC2

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Login to Docker Hub
        run: docker login -u ${{ secrets.DOCKER_USERNAME }} -p ${{ secrets.DOCKER_PASSWORD }}

      - name: Build Docker Image
        run: |
          docker build \
            --build-arg VITE_API_BASE_URL=${{ secrets.VITE_API_BASE_URL }} \
            -t dilusharanasinghe/budget-tracker-fe:latest .

      - name: Push Docker Image
        run: docker push dilusharanasinghe/budget-tracker-fe:latest

  deploy:
    needs: build
    runs-on: [aws-EC2-budget-tracker-frontend]
    steps:
      - name: Pull Docker image
        run: docker pull dilusharanasinghe/budget-tracker-fe:latest

      - name: Remove old container if exists
        run: docker rm -f budget-tracker-fe-container || true

      - name: Run container on port 3000
        run: docker run -d -p 3000:80 --name budget-tracker-fe-container dilusharanasinghe/budget-tracker-fe:latest

EC2 Setup Steps

1. Create an EC2 instance (Ubuntu).
2. Install Docker and Docker Compose.
3. Set up a self-hosted GitHub Actions runner.
4. Expose port 3000 via AWS security groups.
5. Add GitHub secrets:
   • DOCKER_USERNAME
   • DOCKER_PASSWORD
   • VITE_API_BASE_URL

🧪 Development Setup

npm install
npm run dev

Frontend runs at: http://localhost:5173

🔗 Related Projects

• Backend Repo: Budget Tracker Backend
• Frontend Docker Hub: budget-tracker-fe

👨‍💻 Author

Dilusha Ranasingha
GitHub: @Dilusha-Ranasingha