This app is mostly a simplified copy of Instagram in terms of its functions and website layout. This project finished. It is divided on 2 parts: first part is containing basic functions of instagram e.g. posts and other part is real time chat.
I finished both instagram and chat.
To test all app's functionalities, I prefer to setup the app locally in the Kubernetes cluster. One of the most popular light versions of Kubernetes is minikube.
Tutorial about how to install minikube: https://minikube.sigs.k8s.io/docs/.
If you now have minikube, next step is to create minikube cluster by:
minikube start
Later enable ingress (gateway which routes requests to specific services based on path) extension:
minikube addons enable ingress
Next step is installing ArgoCD, which makes continous delivery easy. a) First create ArgoCD namespace:
kubectl create namespace argocd
b) Then install ArgoCD in concected cluster:
kubectl apply -n argocd -f https://raw.githubusercontent.com/argoproj/argo-cd/stable/manifests/install.yaml
c) Get initial password to ArgoCD dashboard:
kubectl get secret argocd-initial-admin-secret -n argocd -o yaml
Sample result:
apiVersion: v1
data:
password: MzRIMTZodk1hWVdydFNqYg==
kind: Secret
metadata:
creationTimestamp: "2024-10-03T13:25:16Z"
name: argocd-initial-admin-secret
namespace: argocd
resourceVersion: "866"
uid: bb76fe3a-36c5-473f-b974-5513a91ac677
type: OpaqueThe password is encoded in base64, so to use this password, it is necessary to decode it first.
Login is admin.
d) Last step to setup ArgoCD is connecting to its service e.g. by forwarding its port:
kubectl port-forward svc/argocd-server -n argocd 8080:443
ArgoCD is now available on port 8080.
e) The best way to run the app now is to use command
kubectl apply -f <application_name>.yaml
for all yaml files in the code/argocd-apps directory (eventually tools can be skipped - its only pgadmin).
In ArgoCD's dashboard 3 required applications look like this:
There is a chance, that backends sender and receiver will be down or not working properly. One of possible reasons is that, these backend were started before running message queue. The solution to solve this problem is restarting these backends.
f) The app should be now running. I' ve decided to implement ingress layer as gateway, so I propose to use this service to access application. To access the app it is necessary to connect to the ingress-controller. One of the ways to do that is forwarding port by command:
kubectl port-forward svc/ingress-nginx-controller -n ingress-nginx 3000:80
The app is now available under link: http://localhost:3000/instagram-frontend
Details:
- In http://localhost:3000/instagram-frontend there is main frontend,
- In http://localhost:3000/chat-frontend there is chat frontend,
- In http://localhost:3000/instagram-backend/swagger-ui/index.html#/ there is instagram backend swagger,
- In http://localhost:3000/chat-backend-sender/swagger-ui/index.html#/ there is chat backend sender swagger,
- In http://localhost:3000/chat-backend-receiver there is chat backend receiver,
- After database launch, instagram and chat sender backends are creating schemas for databases by Liquibase and then also in instagram backend test data is loaded,
- On the start mainly 3 accounts are created:
| Password | |
|---|---|
| adam@kopia-instagrama.pl | KamilKamil1% |
| kamil@kopia-instagrama.pl | KamilKamil1% |
| michał@kopia-instagrama.pl | KamilKamil1% |
I do not propose to use docker-compose.yml and docker-compose-dev.yml files to run the app, because unfortunatelly frontends only work in the Kubernetes environemt - I had too little time to fix it. At this moment instead of user's interfaces, there are blank views. It is probably because of problems with base urls' prefixes.
- Register (done),
- Login (done),
- Searching users (done),
- Posts (done),
- Posts' comments (done),
- Rating posts' comments (done),
- Rating posts (done),
- Following other users (done),
- Stories (skip - too little time),
- Tags (skip - too little time),
- Simple, real time and one-one chat app (done).
- Frontend:
- ReactJS,
- TypeScript,
- ReduxJS.
- Backend:
- Java
- Spring Boot,
- Spring Data JPA,
- Spring Security,
- Liquibase,
- REST Assured,
- Testcontainers.
- Database - PostgreSQL,
- General:
- Main communicaiton architecture - REST,
- Communication for chat messages - STOMP with WebSocket,
- Architecture - microservices (basic Instagram functions and chat are isolated components),
- Micro frontends - chat app is included inside instagram app, but also can be used alone,
- External authentication and authorization provider - Auth0.
- Deploy:
- Docker,
- Docker images repository - Docker Hub,
- Message broker - RabbitMQ,
- CI/CD - GitHub Actions and ArgoCD,
- Orchestration - Kubernetes,
- Cloud - Azure AKS.
Most important info:
- The app is deployed in the AKS (Azure Kubernetes Service) cluster
- Both instagram and chat frontends are exposed by Nginx,
- Instagram and chat services' images are builded and pushed to the Docker Hub repo poautomatically by GitHub Actions,
- Gateway to the cluster from user perspective is Nginx reverse proxy,
- Reverse proxy forwards requests to the Nginx Ingress Controller,
- Then the request is forwarded to proper services based on the path provided by the user e.g. request with url post fix starting with /instagram-frontend is forwarded to instagram frontend service.
- Infrastructure is defined in the another git repo
https://github.com/kamil20020/Instagram-argocd, - Pushing changes to this repo results in making proper changes in the cluster automatically thanks to the ArgoCD,
- If git repo state is different from cluster state, ArgoCD is making changes to fix this situation,
- Auth0 is external auth service.
Most important info:
- Both instagram and chat microservices commnicate with Auth0,
- Sender service is responsible for creating and returning chat messages,
- Created messages are also published to the RabbitMQ message queue,
- Then receiver service is waiting for new messages in the specific queue,
- These meseges are then sent to the specific user (about given account id) by combination of STOMP and WebSocket protocols to ensure real time communication,
- Creating separate receiver service is because of increasing scaliblility posibility,
- Instagram and sender microservices have their own databases.
Microfrontend arrchitecture is implemented here by including chat app inside instagram service.
Most imortant info:
- Chat frontend used instagram backend to fetch details about users,
- Chat frontend requests from chat sender creating new messages and fetching all previous messages,
- Chat sender sends information about created message to RabbitMQ message queue,
- Chat receiver fetches messasges from queue and sends new messages to the user (chat frontent),
- It is done by STOMP and WebSocket protocols deployed on RabbitMQ message queue.
Avatar in the menu will be refreshed after next login;
Then select image from the file system like in the avatar selection and after that fill post description and maybye hide post likes or disable comments:
Comment creation is possible by clicking on the chat icon, which is near to heart icon. Then fill comment content:
Comments can have sub comments and their creation is possible by clicking reply button under given comment.
Post like can be added by logged user by clicking on the black outlined heart icon. Heart icon will change border color on red:
Similary like for the post, list of comment's likes can be viewed by clicking on its total number of likes.
User can follow other user to view his new posts in a convenient way. Following is possible by clicking on the blue follow button in the given user's profile page:
Lists of followers and followed users can be viewed by clicking on their total amounts in the user's profile:
I would like to show sample test conversation between Kamil and Michal.
After running chat by both sides, it was possible to communicate in real time.
Chat can be used independently, without instagram frontend:
