Html

Series links: Part 1/5 - Introduction Part 2/5 - Database Planning Part 3/5 - AWS Setup Part 4/5 - Backend APIs Part 5/5 - Frontend (you are here) What A small, fast web app that helps you add transactions with bills and later search/export them. Why Quick to use on phone or laptop. No heavy frameworks needed; it’s plain HTML/CSS/JS so you can host it anywhere. How Get the code Frontend source: https://github.com/sagarnayak/expense-tracking-public Pages you’ll see Login Add Entry: date, amount, Credit/Debit, category, description, and file uploads (camera or file picker) Listing: search by text or date range, open documents, export CSV Configure once Open your config and set the API endpoints to your domains: Upload: https://upload.your-domain.com Filter: https://filter.your-domain.com Category autocomplete: https://getcats.your-domain.com Description autocomplete: https://getdesc.your-domain.com Export CSV: https://exportcsv.your-domain.com Set a username and a password hash for login (bcrypt hash). This is just to protect the UI; the backend still validates requests. Using it Login with your username and password. Add a transaction. Attach bill photos or PDFs. You’ll see an upload progress bar. Go to the listing page. Filter by dates or keywords (like “groceries” or “uber”). ...

What You can push your static HTML files with their related assets to AWS S3 directly from GitHub Actions whenever you push to GitHub. How You will need an AWS IAM user with access to S3 and CloudFront (if you are going to use CloudFront), and an S3 bucket to deploy into. name: Deploy to S3 on: push: branches: - master jobs: deploy: runs-on: ubuntu-latest steps: - name: Checkout code uses: actions/checkout@v4 with: submodules: false - name: Sync S3 bucket uses: jakejarvis/s3-sync-action@master with: args: --delete env: AWS_S3_BUCKET: your-bucket-name AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }} AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} AWS_REGION: 'us-west-1' SOURCE_DIR: '.' - name: Invalidate CloudFront uses: chetan/invalidate-cloudfront-action@v2 env: DISTRIBUTION: your-cf-id PATHS: "/*" AWS_REGION: "us-east-1" AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }} AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} If you are not using a CloudFront distribution to serve the S3 bucket, remove the Invalidate CloudFront step. ...