Skip to content

Commit d909288

Browse files
Dilusha-RanasinghaDilusha-Ranasingha
authored
Update by adding all details README.md
1 parent fa24e60 commit d909288

1 file changed

Lines changed: 137 additions & 7 deletions

File tree

‎README.md‎

Lines changed: 137 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,142 @@
1-
# React + Vite
1+
# 💸 Budget Tracker - Frontend
22

3-
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
3+
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](http://13.60.84.241:3000).
44

5-
Currently, two official plugins are available:
5+
The application communicates with the Budget Tracker Backend via REST APIs.
66

7-
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
8-
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
7+
## 🖥️ Tech Stack
98

10-
## Expanding the ESLint configuration
9+
- React + Vite
10+
- Tailwind CSS
11+
- Axios
12+
- Docker + NGINX
13+
- GitHub Actions
14+
- AWS EC2
1115

12-
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
16+
## 🌐 Live Deployment
17+
18+
The frontend is automatically deployed to an AWS EC2 instance via GitHub Actions, and served using Docker + NGINX.
19+
20+
- **Frontend URL:** [http://13.60.84.241:3000](http://13.60.84.241:3000)
21+
- **Docker Hub Image:** [dilusharanasinghe/budget-tracker-fe](https://hub.docker.com/r/dilusharanasinghe/budget-tracker-fe)
22+
23+
## 📁 Folder Structure
24+
25+
```
26+
.
27+
├── src/
28+
├── public/
29+
├── nginx.conf
30+
├── Dockerfile
31+
├── .env
32+
└── .github/
33+
└── workflows/
34+
└── cicd.yml
35+
```
36+
37+
## ⚙️ Environment Variables
38+
39+
Create a `.env` file in the root directory:
40+
41+
```env
42+
VITE_API_BASE_URL=http://<your-ec2-backend-ip>:5001/api
43+
```
44+
45+
## 🐳 Docker Setup
46+
47+
### Build Docker Image Locally
48+
49+
```bash
50+
docker build --build-arg VITE_API_BASE_URL=http://<your-backend-ip>:5001/api -t dilusharanasinghe/budget-tracker-fe .
51+
```
52+
53+
### Run Container
54+
55+
```bash
56+
docker run -d -p 3000:80 --name budget-tracker-fe-container dilusharanasinghe/budget-tracker-fe
57+
```
58+
59+
## 🚀 CI/CD with GitHub Actions + AWS EC2
60+
61+
### Setup Overview
62+
63+
- Builds the Docker image with `VITE_API_BASE_URL` from GitHub secrets.
64+
- Pushes the image to Docker Hub.
65+
- Connects to AWS EC2 via self-hosted runner.
66+
- Pulls latest image and runs it using Docker.
67+
68+
### GitHub Actions Workflow
69+
70+
`.github/workflows/cicd.yml`
71+
72+
```yaml
73+
# .github/workflows/cicd.yml
74+
name: Deploy Budget Tracker FE to EC2
75+
76+
on:
77+
push:
78+
branches:
79+
- main
80+
81+
jobs:
82+
build:
83+
runs-on: ubuntu-latest
84+
steps:
85+
- name: Checkout code
86+
uses: actions/checkout@v4
87+
88+
- name: Login to Docker Hub
89+
run: docker login -u ${{ secrets.DOCKER_USERNAME }} -p ${{ secrets.DOCKER_PASSWORD }}
90+
91+
- name: Build Docker Image
92+
run: |
93+
docker build \
94+
--build-arg VITE_API_BASE_URL=${{ secrets.VITE_API_BASE_URL }} \
95+
-t dilusharanasinghe/budget-tracker-fe:latest .
96+
97+
- name: Push Docker Image
98+
run: docker push dilusharanasinghe/budget-tracker-fe:latest
99+
100+
deploy:
101+
needs: build
102+
runs-on: [aws-EC2-budget-tracker-frontend]
103+
steps:
104+
- name: Pull Docker image
105+
run: docker pull dilusharanasinghe/budget-tracker-fe:latest
106+
107+
- name: Remove old container if exists
108+
run: docker rm -f budget-tracker-fe-container || true
109+
110+
- name: Run container on port 3000
111+
run: docker run -d -p 3000:80 --name budget-tracker-fe-container dilusharanasinghe/budget-tracker-fe:latest
112+
```
113+
114+
### EC2 Setup Steps
115+
116+
1. Create an EC2 instance (Ubuntu).
117+
2. Install Docker and Docker Compose.
118+
3. Set up a self-hosted GitHub Actions runner.
119+
4. Expose port 3000 via AWS security groups.
120+
5. Add GitHub secrets:
121+
- `DOCKER_USERNAME`
122+
- `DOCKER_PASSWORD`
123+
- `VITE_API_BASE_URL`
124+
125+
## 🧪 Development Setup
126+
127+
```bash
128+
npm install
129+
npm run dev
130+
```
131+
132+
Frontend runs at: [http://localhost:5173](http://localhost:5173)
133+
134+
## 🔗 Related Projects
135+
136+
- **Backend Repo:** [Budget Tracker Backend](https://github.com/Dilusha-Ranasingha/Budget-Tracker-BE)
137+
- **Frontend Docker Hub:** [budget-tracker-fe](https://hub.docker.com/r/dilusharanasinghe/budget-tracker-fe)
138+
139+
## 👨‍💻 Author
140+
141+
Dilusha Ranasingha
142+
GitHub: [@Dilusha-Ranasingha](https://github.com/Dilusha-Ranasingha)

0 commit comments

Comments
 (0)