Code Monkey home page Code Monkey logo

udagram's Introduction

Udagram Image Filtering Application

Udagram is a simple cloud application developed alongside the Udacity Cloud Engineering Nanodegree. It allows users to register and log into a web client, post photos to the feed, and process photos using an image filtering microservice.

The project is split into two parts:

  1. Frontend - Angular web application built with Ionic Framework
  2. Backend RESTful API - Node-Express application

Getting Started

Prerequisite

To run the application you will need:

Amazon Web Services (AWS)

The application uses the following services:

Clone the repository

Clone the repository on your local machine:

git clone [email protected]:nass59/udagram.git

Once installed you will have to set your environment variables in udagram-api-feed and udagram-api-user

cp udagram-api-feed/.env.dist udagram-api-feed/.env
cp udagram-api-user/.env.dist udagram-api-user/.env

Environment Script

A file named set_env.sh can be used to help you configure these variables on your local development environment.

Database

Create a PostgreSQL database either locally or on AWS RDS. Set the config values for environment variables prefixed with POSTGRES_ in set_env.sh.

S3

Create an AWS S3 bucket. Set the config values for environment variables prefixed with AWS_ in set_env.sh.

Add this following configuration for CORS

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Run the application

tip: You can run application from this parent directtory or from each projects.

  1. Build Docker images:
make build-images
  1. Run Docker images:
make run
  1. You can visit http://localhost:8100 in your web browser to verify that the application is running.

Docker Hub

You can push images to the Docker Hub

make push-images

You will have the following results on your Docker Hub

Screenshot of Docker Hub

Travis

The project uses Travis as CI/CD tool.

Success Build on Travis

Kubernetes

The project uses Kubernetes as a CD Tool to orchestrate our docker containers.

Before deploying on k8s you will have to set secrets variables. You can run:

make k8s-set-env // Set Env Variables
make k8s-env     // Add Env Variables to k8s

Now you can deploy on k8s using the command:

make k8s-deploy

Once deployed you can check if everything is correct by running the following commands:

  • kubectl get pods

Pods

  • kubectl get services

services services

  • kubectl describe hpa

tip: You can enable autoscale by running the command make k8s-autoscale on the project you want.

Pods

If everything looks good, you should be able to use the application on your browser. You can go to http://localhost:8100 or to your EKS Endpoint (Load Balancer).

services

Monitoring / Logs

To check that the backend API pod logs user activity that is logged when an API call is made you can run the command:

kubectl log YOUR_USER_API_POD -f

monitoring

Tips

  1. It's useful to "lint" your code so that changes in the codebase adhere to a coding standard. This helps alleviate issues when developers use different styles of coding. eslint has been set up for TypeScript in the codebase for you. To lint your code, run the following:

    npx eslint --ext .js,.ts src/

    To have your code fixed automatically, run

    npx eslint --ext .js,.ts src/ --fix
  2. Over time, our code will become outdated and inevitably run into security vulnerabilities. To address them, you can run:

    npm audit fix

udagram's People

Contributors

nass59 avatar

Watchers

James Cloos avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.