https://github.com/kamil20020/instagram

Simple instagram copy to learn mainly backend and less front technologies e.g. Java, Spring, Docker, Kubernetes, RabbitMQ, Postgres, ReactJs and CI/CD. App includes mainly creating posts and comments, posts and comment liking, following other users and also there is a chat
https://github.com/kamil20020/instagram

auth0 docker docker-compose github-actions java kubernetes liquibase lombok mockito postgresql reactjs reduxjs rest-assured spring spring-boot spring-data-jpa spring-security spring-validation spring-web testcontainer

Last synced: 2 months ago
JSON representation

Host: GitHub
URL: https://github.com/kamil20020/instagram
Owner: kamil20020
Created: 2023-02-22T17:48:36.000Z (about 2 years ago)
Default Branch: master
Last Pushed: 2024-11-20T16:26:34.000Z (5 months ago)
Last Synced: 2024-12-27T17:22:48.059Z (4 months ago)
Topics: auth0, docker, docker-compose, github-actions, java, kubernetes, liquibase, lombok, mockito, postgresql, reactjs, reduxjs, rest-assured, spring, spring-boot, spring-data-jpa, spring-security, spring-validation, spring-web, testcontainer
Language: Java
Homepage:
Size: 32.8 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Instagram copy
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.

## Running app

### Local light Kubernetes cluster
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](https://minikube.sigs.k8s.io/docs/start/?arch=%2Fwindows%2Fx86-64%2Fstable%2F.exe+download).

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:
```yaml
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: Opaque
```

The password is encoded in base64, so to use this password, it is necessary to decode it first.

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 .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:

| **E-mail** | **Password** |
|----------------------------|--------------|
| [email protected] | KamilKamil1% |
| [email protected] | KamilKamil1% |
| michał@kopia-instagrama.pl | KamilKamil1% |

### Docker-compose
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.

## Functional requirements:
* 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).

## Use cases:

### Instagram

### Chat

## Erd diagrams:

### Instagram
![Instagram](project/instagram/erd.png)

### Chat
![Chat](project/chat/erd.png)

## Technologies:
* 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.

## Architecture

### The most general view:

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.

### Microservices details and communication:

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 architecture:

Microfrontend arrchitecture is implemented here by including chat app inside instagram service.

### Communication with chat frontend:

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.

## Swagger

### Instagram

### Chat

## Screenshots for instagram microservice:

### Menu for unlogged user:

### Register:

#### First register in Auth0:

#### Then fill data in instagram copy app:

### Login by Auth0:

### Menu for logged user:

### User's own profile:

### Add avatar:

#### Click on current avatar and then select image from file system:

#### Changed avatar:

Avatar in the menu will be refreshed after next login;

### Other users' profiles:

#### Profile viewed by unlogged user:

#### Profile viewed by logged user:

### Searching users:

#### Searching users is possible by clicking on appropriate button in the left menu:

#### Search have also lately viewed profiles:

### Create post:

#### Post creation is possible by selecting appropriate option in left menu:

#### 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:

#### Accept post creation and then refresh own profile to see new post:

### Post view:

#### Post viewed by unlogged user:

#### Post viewed by logged user:

#### Post can also be viewied in the separate page and not only in the dialog window:

#### Post can be deleted by clicking on the dots in the upper right corner:

### Comments:

#### Comment creation is possible by clicking on the chat icon, which is near to heart icon. Then fill comment content:

#### Accept comment creation:

#### Comments can have sub comments and their creation is possible by clicking reply button under given comment.

#### Comment can be deleted by clicking on the options of comment:

### Post likes:

#### Post like can be added by logged user by clicking on the black outlined heart icon. Heart icon will change border color on red:

#### Post likes list can be viewed by clicking on the total post's likes:

### Comment likes:

#### Comment likes can be created by clicking on the hear icon, which is on the right of given comment:

#### Similary like for the post, list of comment's likes can be viewed by clicking on its total number of likes.

### Following:

#### 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: