{"id":18664450,"url":"https://github.com/kamil20020/instagram","last_synced_at":"2026-04-11T05:04:52.556Z","repository":{"id":160573655,"uuid":"605220983","full_name":"kamil20020/Instagram","owner":"kamil20020","description":"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","archived":false,"fork":false,"pushed_at":"2024-11-20T16:26:34.000Z","size":34383,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-12-27T17:22:48.059Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kamil20020.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-22T17:48:36.000Z","updated_at":"2024-11-22T17:59:49.000Z","dependencies_parsed_at":null,"dependency_job_id":"9ceeffa1-fe80-426f-84c4-50a0502c0893","html_url":"https://github.com/kamil20020/Instagram","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kamil20020%2FInstagram","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kamil20020%2FInstagram/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kamil20020%2FInstagram/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kamil20020%2FInstagram/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kamil20020","download_url":"https://codeload.github.com/kamil20020/Instagram/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239491352,"owners_count":19647811,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2024-11-07T08:23:38.144Z","updated_at":"2025-12-30T19:14:29.717Z","avatar_url":"https://github.com/kamil20020.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Instagram copy \nThis 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.\n\nI finished both instagram and chat. \n\n## Running app\n\n### Local light Kubernetes cluster\nTo test all app's functionalities, I prefer to setup the app locally in the Kubernetes cluster.\nOne 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).\n\nTutorial about how to install minikube: https://minikube.sigs.k8s.io/docs/.\n\nIf you now have minikube, next step is to create minikube cluster by:\n```\nminikube start\n```\n\nLater enable ingress (gateway which routes requests to specific services based on path) extension:\n```\nminikube addons enable ingress\n```\n\nNext step is installing ArgoCD, which makes continous delivery easy.\na) First create ArgoCD namespace:\n```\nkubectl create namespace argocd\n```\n\nb) Then install ArgoCD in concected cluster:\n```\nkubectl apply -n argocd -f https://raw.githubusercontent.com/argoproj/argo-cd/stable/manifests/install.yaml\n```\n\nc) Get initial password to ArgoCD dashboard:\n```\nkubectl get secret argocd-initial-admin-secret -n argocd -o yaml\n```\n\nSample result:\n```yaml\napiVersion: v1\ndata:\n  password: MzRIMTZodk1hWVdydFNqYg==\nkind: Secret\nmetadata:\n  creationTimestamp: \"2024-10-03T13:25:16Z\"\n  name: argocd-initial-admin-secret\n  namespace: argocd\n  resourceVersion: \"866\"\n  uid: bb76fe3a-36c5-473f-b974-5513a91ac677\ntype: Opaque\n```\n\nThe password is encoded in base64, so to use this password, it is necessary to decode it first.\n\nLogin is `admin`.\n\nd) Last step to setup ArgoCD is connecting to its service e.g. by forwarding its port:\n```\nkubectl port-forward svc/argocd-server -n argocd 8080:443\n```\n\nArgoCD is now available on port 8080.\n\ne) The best way to run the app now is to use command\n```\nkubectl apply -f \u003capplication_name\u003e.yaml\n```\n\nfor all yaml files in the `code/argocd-apps` directory (eventually tools can be skipped - its only pgadmin).\n\nIn ArgoCD's dashboard 3 required applications look like this:\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"screenshots/argo/argo.png\"\u003e\n\u003cp\u003e\n\nThere 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.\n\nf) 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:\n```\nkubectl port-forward svc/ingress-nginx-controller -n ingress-nginx 3000:80\n```\n\nThe app is now available under link:\nhttp://localhost:3000/instagram-frontend\n\nDetails:\n* In http://localhost:3000/instagram-frontend there is main frontend,\n* In http://localhost:3000/chat-frontend there is chat frontend,\n* In http://localhost:3000/instagram-backend/swagger-ui/index.html#/ there is instagram backend swagger,\n* In http://localhost:3000/chat-backend-sender/swagger-ui/index.html#/ there is chat backend sender swagger,\n* In http://localhost:3000/chat-backend-receiver there is chat backend receiver,\n* 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,\n* On the start mainly 3 accounts are created:\n\n\u003cp align=\"center\"\u003e\n\n| **E-mail**                 | **Password** |\n|----------------------------|--------------|\n| adam@kopia-instagrama.pl   | KamilKamil1% |\n| kamil@kopia-instagrama.pl  | KamilKamil1% |\n| michał@kopia-instagrama.pl | KamilKamil1% |\n\n\u003c/p\u003e\n\n### Docker-compose\nI 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.\n\n## Functional requirements:\n* Register (done),\n* Login (done),\n* Searching users (done),\n* Posts (done),\n* Posts' comments (done),\n* Rating posts' comments (done),\n* Rating posts (done),\n* Following other users (done),\n* Stories (skip - too little time),\n* Tags (skip - too little time),\n* Simple, real time and one-one chat app (done).\n\n## Use cases:\n\n### Instagram\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"project/instagram/inheritance.png\"\u003e\n\u003cp\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"project/instagram/user.png\"\u003e\n\u003cp\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"project/instagram/unlogged-user.png\"\u003e\n\u003cp\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"project/instagram/logged-user.png\"\u003e\n\u003cp\u003e\n\n### Chat\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"project/chat/unlogged-user.png\"\u003e\n\u003cp\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"project/chat/logged-user.png\"\u003e\n\u003cp\u003e\n\n## Erd diagrams:\n\n### Instagram\n![Instagram](project/instagram/erd.png)\n\n### Chat\n![Chat](project/chat/erd.png)\n\n## Technologies:\n* Frontend:\n    * ReactJS,\n    * TypeScript,\n    * ReduxJS.\n* Backend:\n    * Java\n    * Spring Boot,\n    * Spring Data JPA,\n    * Spring Security,\n\t* Liquibase,\n\t* REST Assured,\n\t* Testcontainers.\n * Database - PostgreSQL,\n * General:\n    * Main communicaiton architecture - REST,\n    * Communication for chat messages - STOMP with WebSocket,\n\t* Architecture - microservices (basic Instagram functions and chat are isolated components),\n\t* Micro frontends - chat app is included inside instagram app, but also can be used alone,\n    * External authentication and authorization provider - Auth0.\n * Deploy:\n    * Docker,\n    * Docker images repository - Docker Hub,\n\t* Message broker - RabbitMQ,\n\t* CI/CD - GitHub Actions and ArgoCD,\n    * Orchestration - Kubernetes,\n    * Cloud - Azure AKS.\n    \n## Architecture\n\n### The most general view:\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"project/architecture/architecture1.png\"\u003e\n\u003cp\u003e\n\nMost important info:\n* The app is deployed in the AKS (Azure Kubernetes Service) cluster\n* Both instagram and chat frontends are exposed by Nginx,\n* Instagram and chat services' images are builded and pushed to the Docker Hub repo poautomatically by GitHub Actions,\n* Gateway to the cluster from user perspective is Nginx reverse proxy,\n* Reverse proxy forwards requests to the Nginx Ingress Controller,\n* 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.\n* Infrastructure is defined in the another git repo `https://github.com/kamil20020/Instagram-argocd`,\n* Pushing changes to this repo results in making proper changes in the cluster automatically thanks to the ArgoCD,\n* If git repo state is different from cluster state, ArgoCD is making changes to fix this situation,\n* Auth0 is external auth service.\n\n### Microservices details and communication:\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"project/architecture/architecture.png\"\u003e\n\u003cp\u003e\n\nMost important info:\n* Both instagram and chat microservices commnicate with Auth0,\n* Sender service is responsible for creating and returning chat messages,\n* Created messages are also published to the RabbitMQ message queue,\n* Then receiver service is waiting for new messages in the specific queue,\n* 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,\n* Creating separate receiver service is because of increasing scaliblility posibility,\n* Instagram and sender microservices have their own databases.\n\n### Microfrontend architecture:\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"project/architecture/architecture2.png\"\u003e\n\u003cp\u003e\n\nMicrofrontend arrchitecture is implemented here by including chat app inside instagram service.\n\n### Communication with chat frontend:\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"project/architecture/architecture3.png\"\u003e\n\u003cp\u003e\n\nMost imortant info:\n* Chat frontend used instagram backend to fetch details about users,\n* Chat frontend requests from chat sender creating new messages and fetching all previous messages,\n* Chat sender sends information about created message to RabbitMQ message queue,\n* Chat receiver fetches messasges from queue and sends new messages to the user (chat frontent),\n* It is done by STOMP and WebSocket protocols deployed on RabbitMQ message queue.\n\n## Swagger\n\n### Instagram\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"swagger/instagram/swagger-1.png\"\u003e\n\u003cp\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"swagger/instagram/swagger-2.png\"\u003e\n\u003cp\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"swagger/instagram/swagger-3.png\"\u003e\n\u003cp\u003e\n\n### Chat\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"swagger/chat/swagger-4.png\"\u003e\n\u003cp\u003e\n\n## Screenshots for instagram microservice:\n\n### Menu for unlogged user:\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"screenshots/instagram/menu-unlogged.png\"\u003e\n\u003cp\u003e\n\n### Register:\n\n#### First register in Auth0:\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"screenshots/instagram/register.png\"\u003e\n\u003cp\u003e\n\n#### Then fill data in instagram copy app:\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"screenshots/instagram/fill-data.png\"\u003e\n\u003cp\u003e\n\n### Login by Auth0:\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"screenshots/instagram/register.png\"\u003e\n\u003cp\u003e\n\n### Menu for logged user:\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"screenshots/instagram/menu-logged.png\"\u003e\n\u003cp\u003e\n\n### User's own profile:\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"screenshots/instagram/user-profile-logged.png\"\u003e\n\u003cp\u003e\n\n### Add avatar:\n\n#### Click on current avatar and then select image from file system:\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"screenshots/instagram/create-avatar.png\"\u003e\n\u003cp\u003e\n\n#### Changed avatar:\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"screenshots/instagram/user-profile-avatar.png\"\u003e\n\u003cp\u003e\n\nAvatar in the menu will be refreshed after next login;\n\n### Other users' profiles:\n\n#### Profile viewed by unlogged user:\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"screenshots/instagram/user-profile-unlogged.png\"\u003e\n\u003cp\u003e\n\n#### Profile viewed by logged user:\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"screenshots/instagram/user-profile-other-logged.png\"\u003e\n\u003cp\u003e\n\n### Searching users:\n\n#### Searching users is possible by clicking on appropriate button in the left menu:\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"screenshots/instagram/search-users.png\"\u003e\n\u003cp\u003e\n\n#### Search have also lately viewed profiles:\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"screenshots/instagram/search-users-history.png\"\u003e\n\u003cp\u003e\n\n### Create post:\n\n#### Post creation is possible by selecting appropriate option in left menu:\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"screenshots/instagram/create-post-1.png\"\u003e\n\u003cp\u003e\n\n#### 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:\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"screenshots/instagram/create-post-2.png\"\u003e\n\u003cp\u003e\n\n#### Accept post creation and then refresh own profile to see new post:\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"screenshots/instagram/create-post-3.png\"\u003e\n\u003cp\u003e\n\n### Post view:\n\n#### Post viewed by unlogged user:\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"screenshots/instagram/post-view-unlogged.png\"\u003e\n\u003cp\u003e\n\n#### Post viewed by logged user:\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"screenshots/instagram/post-view-logged.png\"\u003e\n\u003cp\u003e\n\n#### Post can also be viewied in the separate page and not only in the dialog window:\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"screenshots/instagram/post-view-page.png\"\u003e\n\u003cp\u003e\n\n#### Post can be deleted by clicking on the dots in the upper right corner:\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"screenshots/instagram/delete-comment.png\"\u003e\n\u003cp\u003e\n\n### Comments:\n\n#### Comment creation is possible by clicking on the chat icon, which is near to heart icon. Then fill comment content:\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"screenshots/instagram/create-comment-1.png\"\u003e\n\u003cp\u003e\n\n#### Accept comment creation:\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"screenshots/instagram/create-comment-2.png\"\u003e\n\u003cp\u003e\n\n#### Comments can have sub comments and their creation is possible by clicking reply button under given comment.\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"screenshots/instagram/sub-comment.png\"\u003e\n\u003cp\u003e\n\n#### Comment can be deleted by clicking on the options of comment:\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"screenshots/instagram/delete-comment.png\"\u003e\n\u003cp\u003e\n\n### Post likes:\n\n#### Post like can be added by logged user by clicking on the black outlined heart icon. Heart icon will change border color on red:\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"screenshots/instagram/like-post.png\"\u003e\n\u003cp\u003e\n\n#### Post likes list can be viewed by clicking on the total post's likes:\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"screenshots/instagram/post-likes.png\"\u003e\n\u003cp\u003e\n\n### Comment likes:\n\n#### Comment likes can be created by clicking on the hear icon, which is on the right of given comment:\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"screenshots/instagram/like-comment.png\"\u003e\n\u003cp\u003e\n\n#### Similary like for the post, list of comment's likes can be viewed by clicking on its total number of likes.\n\n### Following:\n\n#### 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:\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"screenshots/instagram/user-profile-other-logged.png\"\u003e\n\u003cp\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"screenshots/instagram/follow-user.png\"\u003e\n\u003cp\u003e\n\n#### Then followed user's posts will be viewed in the main page from the left menu:\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"screenshots/instagram/followed-posts.png\"\u003e\n\u003cp\u003e\n\n#### Lists of followers and followed users can be viewed by clicking on their total amounts in the user's profile:\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"screenshots/instagram/followers.png\"\u003e\n\u003cp\u003e\n\n### Almost every collections of data that are loaded from api, are requested in portions called pages:\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"screenshots/instagram/pagination-1.png\"\u003e\n\u003cp\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"screenshots/instagram/pagination-2.png\"\u003e\n\u003cp\u003e\n\n## Screenshots for chat microservice:\n\nI would like to show sample test conversation between Kamil and Michal.\n\n### Kamil perspective:\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"screenshots/chat/chat1.png\"\u003e\n\u003cp\u003e\n\n### Michal perspective:\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"screenshots/chat/chat2.png\"\u003e\n\u003cp\u003e\n\nAfter running chat by both sides, it was possible to communicate in real time.\n\n### Independent app\n\nChat can be used independently, without instagram frontend:\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"screenshots/chat/chat3.png\"\u003e\n\u003cp\u003e\n\n## Other screenshots\n\n### Auth0 config - 4 apps:\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"screenshots/auth0/auth0.png\"\u003e\n\u003cp\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkamil20020%2Finstagram","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkamil20020%2Finstagram","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkamil20020%2Finstagram/lists"}