https://github.com/bharatsutharx/ecoshop_project
E-Commerce Project (React + Vite + Supabase as backend) – DevOps Practice
https://github.com/bharatsutharx/ecoshop_project
argocd cicd devops devops-tools docker github-actions jenkins kubernetes terraform
Last synced: 2 months ago
JSON representation
E-Commerce Project (React + Vite + Supabase as backend) – DevOps Practice
- Host: GitHub
- URL: https://github.com/bharatsutharx/ecoshop_project
- Owner: bharatsutharx
- License: mit
- Created: 2025-03-13T12:32:31.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-13T14:12:59.000Z (over 1 year ago)
- Last Synced: 2025-03-13T15:24:36.225Z (over 1 year ago)
- Topics: argocd, cicd, devops, devops-tools, docker, github-actions, jenkins, kubernetes, terraform
- Language: TypeScript
- Homepage: https://ecoshop-by-bharat.netlify.app
- Size: 8.14 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# EcoShop - DevOps Implementation
## Application Architecture
EcoShop is a **React + Vite + Supabase + Zustand** frontend project with the following architecture:
```
Client (Browser)
⬇️
Vite React App (Frontend)
⬇️
Supabase (Database)
```
### 🖥️ Frontend (React + Vite)
- **Vite**: Used for fast builds.
- **React**: Manages UI components.
- **Zustand**: Handles global state.
- **Tailwind CSS**: Provides modern styling.
### 🔗 Backend (Supabase)
Supabase acts as a backend replacement:
- **Database**: PostgreSQL
- **API access**: Managed via Supabase
### 🛠️ DevOps Stack
- **Containerization**: Docker
- **Orchestration**: Kubernetes (Minikube for local testing)
- **CI/CD**: Jenkins (Phase 1), GitHub Actions + ArgoCD (Phase 2)
- **Monitoring**: Prometheus, Grafana, Alertmanager
## DevOps implementation
### Containerization (Docker) : Build a lightweight, production-ready Docker image.
- Use a **multi-stage build** to minimize image size.
- Use **Nginx** to serve the frontend.
- pass **environment variables**.
---
### CI/CD Pipeline: GitHub Actions + ArgoCD
Automate testing, building, and deploying the app
GitHub Actions, Docker Hub, Kubernetes, ArgoCD
Steps:
1. GitHub Actions - CI Pipeline
* Build & push Docker image to Docker Hub
2. GitHub Actions - CD Pipeline
* Deploy to Kubernetes cluster using ArgoCD
* Ensure automatic deployments via GitOps
* Kubernetes Deployment
* Create Deployment, Service, Ingress YAML files
* Expose the app using Nginx Ingress Controller
**I deployed kubernetes manifests and using argocd in minikube**
## Flow (How ArgoCD Deploys Your App in minikube) -
* I push the Kubernetes YAML files to GitHub inside the k8s/ folder.
* ArgoCD watches the repo and detects changes automatically.
* ArgoCD pulls the latest manifests and applies them to Minikube.
* Application is deployed inside Minikube just like running kubectl apply -f k8s/ but fully automated.
---
### : Monitoring & Logging
Set up end-to-end observability for the application.
#### Integrate Monitoring Tools
- **Prometheus + Grafana** for metrics
- **Loki + Grafana** for logs
- **Alerting** via Alertmanager + Slack/Email
---