{"id":23895396,"url":"https://github.com/kelomo2502/microservices-based-weather-app","last_synced_at":"2026-04-04T20:31:41.445Z","repository":{"id":266645623,"uuid":"898572966","full_name":"kelomo2502/Microservices-based-weather-app","owner":"kelomo2502","description":"Microservices-based weather application. The implementation involves creating two microservices: one for fetching weather data and another for displaying it. The primary objectives include containerizing these microservices using Docker, deploying them to a Kubernetes cluster, and accessing them through Nginx.","archived":false,"fork":false,"pushed_at":"2024-12-05T11:10:48.000Z","size":243,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-01T07:19:06.669Z","etag":null,"topics":["bash","css","docker","html","javascript","minikube-cluster","yaml"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/kelomo2502.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":"2024-12-04T16:28:20.000Z","updated_at":"2024-12-15T07:08:55.000Z","dependencies_parsed_at":"2024-12-05T11:29:28.477Z","dependency_job_id":null,"html_url":"https://github.com/kelomo2502/Microservices-based-weather-app","commit_stats":null,"previous_names":["kelomo2502/microservices-based-weather-app"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kelomo2502/Microservices-based-weather-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kelomo2502%2FMicroservices-based-weather-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kelomo2502%2FMicroservices-based-weather-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kelomo2502%2FMicroservices-based-weather-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kelomo2502%2FMicroservices-based-weather-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kelomo2502","download_url":"https://codeload.github.com/kelomo2502/Microservices-based-weather-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kelomo2502%2FMicroservices-based-weather-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31413267,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-04T20:09:54.854Z","status":"ssl_error","status_checked_at":"2026-04-04T20:09:44.350Z","response_time":60,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["bash","css","docker","html","javascript","minikube-cluster","yaml"],"created_at":"2025-01-04T15:55:42.579Z","updated_at":"2026-04-04T20:31:41.425Z","avatar_url":"https://github.com/kelomo2502.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Microsercies-based-weather-app\n\nMicroservices-based application. The implementation involves creating two microservices: one for fetching weather data and another for displaying it. The primary objectives include containerizing these microservices using Docker, deploying them to a Kubernetes cluster, and accessing them through Nginx.\n\n---\n\n## Hypothetical use case\n\nWe are developing a simple static website (HTML and CSS) for a company's landing page. The goal is to containerize this application using Docker, deploy it to a Kubernetes cluster, and access it through Nginx.\n\n---\n\n## Features\n\n- Provides real-time weather updates.\n- Built with a microservices architecture.\n- Containerized with Docker for portability.\n- Deployed in a Kubernetes cluster using Kind.\n\n---\n\n## Prerequisites\n\n- Docker\n- Kubernetes (Kind for local development)\n- kubectl\n\n---\n\n## Tasks\n\n### Task 1: Setup your project\n\n- Lets create a project folder called microservices based app  \n- `mkdir microservices-based-app`\n- Next inside the directory, create `index.html file`, `style.css file` and if you would like to add some interactivity to your app, you can add a `script.js file`\n\n---\n\n### HTML\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"UTF-8\"\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n  \u003ctitle\u003eGbenga and Sons\u003c/title\u003e\n  \u003clink rel=\"stylesheet\" href=\"style.css\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cheader\u003e\n    \u003cdiv class=\"logo\"\u003eGbenga \u0026 Sons\u003c/div\u003e\n    \u003cnav\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"#home\"\u003eHome\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#services\"\u003eServices\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#about\"\u003eAbout\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#contact\"\u003eContact\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/nav\u003e\n  \u003c/header\u003e\n\n  \u003csection id=\"home\" class=\"section\"\u003e\n    \u003ch1\u003eWelcome to Gbenga \u0026 Sons\u003c/h1\u003e\n    \u003cp\u003eYour trusted partner in excellence!\u003c/p\u003e\n  \u003c/section\u003e\n\n  \u003csection id=\"services\" class=\"section\"\u003e\n    \u003ch2\u003eOur Services\u003c/h2\u003e\n    \u003cdiv class=\"service-list\"\u003e\n      \u003cdiv class=\"service-item\"\u003eConsulting\u003c/div\u003e\n      \u003cdiv class=\"service-item\"\u003eProject Management\u003c/div\u003e\n      \u003cdiv class=\"service-item\"\u003eProduct Design\u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/section\u003e\n\n  \u003csection id=\"about\" class=\"section\"\u003e\n    \u003ch2\u003eAbout Us\u003c/h2\u003e\n    \u003cp\u003eAt Gbenga \u0026 Sons, we pride ourselves on delivering top-notch services tailored to meet your needs. With a team of experienced professionals, we guarantee excellence in every aspect of our work.\u003c/p\u003e\n  \u003c/section\u003e\n\n  \u003csection id=\"contact\" class=\"section\"\u003e\n    \u003ch2\u003eContact Us\u003c/h2\u003e\n    \u003cform id=\"contact-form\"\u003e\n      \u003clabel for=\"name\"\u003eName\u003c/label\u003e\n      \u003cinput type=\"text\" id=\"name\" placeholder=\"Your Name\" required\u003e\n      \n      \u003clabel for=\"email\"\u003eEmail\u003c/label\u003e\n      \u003cinput type=\"email\" id=\"email\" placeholder=\"Your Email\" required\u003e\n      \n      \u003clabel for=\"message\"\u003eMessage\u003c/label\u003e\n      \u003ctextarea id=\"message\" placeholder=\"Your Message\" required\u003e\u003c/textarea\u003e\n      \n      \u003cbutton type=\"submit\"\u003eSend\u003c/button\u003e\n    \u003c/form\u003e\n  \u003c/section\u003e\n\n  \u003cfooter\u003e\n    \u003cp\u003e\u0026copy; 2024 Gbenga and Sons. All rights reserved.\u003c/p\u003e\n  \u003c/footer\u003e\n\n  \u003cscript src=\"script.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n\n```\n\n---\n\n### CSS\n\n```css\n/* General Reset */\nbody, h1, h2, p, ul, li, input, textarea, button {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  font-family: Arial, sans-serif;\n}\n\nbody {\n  background-color: #000;\n  color: #fff;\n  line-height: 1.6;\n}\n\nheader {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 10px 20px;\n  background: #222;\n  position: sticky;\n  top: 0;\n}\n\nheader .logo {\n  font-size: 24px;\n  font-weight: bold;\n  color: #f90;\n}\n\nheader nav ul {\n  list-style: none;\n  display: flex;\n  gap: 15px;\n}\n\nheader nav ul li a {\n  color: #f90;\n  text-decoration: none;\n}\n\nheader nav ul li a:hover {\n  text-decoration: underline;\n}\n\n.section {\n  padding: 20px;\n  text-align: center;\n}\n\n#home {\n  background: #111;\n  padding: 50px;\n}\n\n#services {\n  background: #222;\n}\n\n#about {\n  background: #111;\n}\n\n#contact {\n  background: #222;\n}\n\n.service-list {\n  display: flex;\n  justify-content: center;\n  gap: 15px;\n}\n\n.service-item {\n  background: #333;\n  padding: 10px 20px;\n  border-radius: 5px;\n  color: #f90;\n}\n\nform {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  max-width: 400px;\n  margin: 0 auto;\n}\n\ninput, textarea, button {\n  padding: 10px;\n  border: none;\n  border-radius: 5px;\n}\n\ninput, textarea {\n  width: 100%;\n  background: #333;\n  color: #fff;\n}\n\nbutton {\n  background: #f90;\n  color: #000;\n  cursor: pointer;\n}\n\nbutton:hover {\n  background: #ffa500;\n}\n\nfooter {\n  text-align: center;\n  padding: 10px;\n  background: #111;\n}\n\n```\n\n---\n\n### JS\n\n```js\n// Basic Form Submission\ndocument.getElementById('contact-form').addEventListener('submit', function (e) {\n  e.preventDefault();\n  alert('Thank you for contacting Gbenga \u0026 Sons. We will get back to you soon!');\n});\n\n```\n\n## Task 2: Initialize Git\n\n- cd /path/to/your/project\n- `git init`\n\n## Task 3: Git commit\n\nTo commit our work we would first do:\n\n- `git add .` This means adding all of the files to the staging area of git\n- Next we would run `git commit -m \"Initial commit`\n- To push the code to a remote repository, we would need to open our github account\n- Log into github\n- Click on your repository\n- Clicke on new repository\n- Give the repository a descriptive name and a brief description\n- Create the repository and copy the the repository git url\n- Then you can push the local repository to the remote repository using the `git push` command\n\n## Task 4: Dockerize the application\n\nto dockerize our application, we would need to first add a dockerfile, while is essentially the blue-print for our docker image\nour Dockerfile would look like this:\n\n```yaml\n# Use a lightweight Nginx image\nFROM nginx:alpine\n\n# Set the working directory\nWORKDIR /usr/share/nginx/html\n\n# Remove default Nginx static files\nRUN rm -rf ./*\n\n# Copy application files to the container\nCOPY . .\n\n# Expose port 80 for the container\nEXPOSE 80\n\n# Start Nginx\nCMD [\"nginx\", \"-g\", \"daemon off;\"]\n\n```\n\n---\n\n- To oprimize our docker image , we can create a .dockerignore file to exclude unneccesary files\n\nnode_modules\n*.log\nDockerfile\n.dockerignore\n\n## Building the docker image\n\nWe would build  the docker image by running.\n`docker build -t gbenga-and-sons .`\n\n- At this point the application has been built into an image named  \"gbenga-and-sons\"\n\n## Task 5: Pushing the image to dockerhub\n\nTo push the image to dockerhub:\n\n- Log in to Docker Hub\nBefore pushing images to Docker Hub, you need to log in using your Docker Hub credentials. Run the following command:\n`docker login`\n- Build Your Docker Image\nMake sure you are in the project folder where the Dockerfile is located and run\n`docker build -t \u003cyour-dockerhub-username\u003e/\u003cimage-name\u003e:\u003ctag\u003e .`\n- For example `docker build -t kelomo2502/gbenga-and-sons:v1 .`\n- Let's verify the image locally by running\n  `docker images`\n- After confirming the image is available on our local machine, we can push it to dockerhub by runnin `docker push \u003cyour-dockerhub-username\u003e/\u003cimage-name\u003e:\u003ctag\u003e`\n- for example `docker push kelomo2502/gbenga-and-sons:v1`\nWe have successfully push our docker image to dockerhub\n![Dokcer image pushed to dockerhub](/docke-image.png)\n\n## Task 6: Setup Kubernetes cluster using kind\n\nTo setup a kubernetes cluster using kind, we need to first install kind\n\n### Windows\n\nYou can install kind by running\n`choco install kind` note: you need to chocolatey installed already\ncheck the version by running `kind version`\n\n### Macos and Linux\n\nYou can install kind by running `brew install kind` Note: you need to have homebrew installed already\n\n## Task 7: Setting up a kubernetes cluster\n\nAfter insyall kind, we would setup a kubernets cluster by running\n`kind create cluster`\n\n## Task 8: Depploying cluster\n\nWe would be deploying our kubernetes cluster using kind as follows:\n\n- Firstyly, we would create a kubernetes manifest using yaml syntax\nThe first file will be deployment.yaml with the following configuration\n\n### deployment.yaml\n\n```yaml\n  apiVersion: apps/v1\n\nkind: Deployment\nmetadata:\n  name: gbenga-and-sons-deployment\n  labels:\n    app: gbenga-and-sons\nspec:\n  replicas: 2\n  selector:\n    matchLabels:\n      app: gbenga-and-sons\n  template:\n    metadata:\n      labels:\n        app: gbenga-and-sons\n    spec:\n      containers:\n      - name: gbenga-and-sons-container\n        image: kelomo2502/gbenga-and-sons:v1 # Replace with your Docker Hub image\n        ports:\n        - containerPort: 80 # Update with the port your app listens on\n\n  ```\n\n### service.yaml\n\n```yaml\napiVersion: v1\nkind: Service\nmetadata:\n  name: gbenga-and-sons-service\nspec:\n  selector:\n    app: gbenga-and-sons\n  ports:\n  - protocol: TCP\n    port: 80       # Exposed port\n    targetPort: 80 # The port your app listens on\n  type: LoadBalancer\n\napiVersion: v1\nkind: Service\nmetadata:\n  name: gbenga-and-sons-service\nspec:\n  selector:\n    app: gbenga-and-sons\n  ports:\n  - protocol: TCP\n    port: 80       # Service port\n    targetPort: 80 # Container port\n  type: ClusterIP # Default type for internal services\n```\n\n```yaml\nkubectl apply -f deployment.yaml\n\nkubectl apply -f service.yaml\n\n  ```\n\nThese two commands apply the configurations in our deployment and service manifest\n\n- We can verify that the pod and service are running bu using:\n  `kubectl get pods`\n  `kubectl get service`\nAt this point our app has been sucessfully deployed to kubernetes cluster using kind\n![Running pods](/pods.png)\n![Running services](/services.png)\n\n## Task 9: Acessing the website\n\nSince our deployment is of type ClusterIP, the website will only be accessible internally within the pods but lets use port forwarding, so we can access the website pn our local machine by running:\n`kubectl port-forward service/gbenga-and-sons-service 8080:80`\nThen we can access on \u003chttp://localhost:8080\u003e\n\n## Author Information\n\n👤 Author: Gbenga\nGitHub: \u003chttps://github.com/kelomo2502\u003e\nLinkedIn: \u003chttps://www.linkedin.com/in/oyewunmi-gbenga/\u003e\nEmail: \u003ckelvinoye@gmail.com\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkelomo2502%2Fmicroservices-based-weather-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkelomo2502%2Fmicroservices-based-weather-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkelomo2502%2Fmicroservices-based-weather-app/lists"}